[React] 함수형 Component에서의 Lifecycle함수

내가 처음 봤었던 React.org의 튜토리얼에서는 주로 Class Component를 사용해서 강의를 진행했다.

그래서 Class Component에만 익숙해져 있었는데, 구현을 하다보니 요즘은 함수형 컴포넌트를 더 많이쓴다고 해서 App.js를 함수형으로 바꿔보기로 했다.

 

시작하자마자 맞이한 문제점은 함수형 컴포넌트에서는 componentDid* 형태로 된 Lifecycle 함수를 찾을수 없었다는 점이다.

대신 React에서는 'useEffect'라는 Hook을 이용해서 비슷한 구현을 제공하고있다.

코드는 아래와 같으므로 참고.

componentDidMount() { this.getMyData(); }; componentDidUpdate() { console.log('in componentDidUpdate@Movie.js'); }; componentWillUnmount() { console.log('in componentWillUnmount@Movie.js'); };

// componentDidMount로 동작시키거나, 바인딩된 props,state 변경시에만 불리는 hook useEffect(() => { console.log('like didMount HOOK@app.js'); }, []); //두 번째 배열에 props나 state값을 넣을경우 // --> 해당 값이 변경될때만 effect hook 호출 //두 번째 배열에 아무것도 넣지않을 경우 // --> 바인딩 감시가 필요없으므로 component가 mount될 때만 불림 // componentDidMount와 componentDidUpdate와 비슷한 lifcyle을 갖는 Hook useEffect(() => { // 마운트, 렌더링마다 호출됨 console.log('like didMount or didUpdate HOOK@app.js'); }); // componentWillUnmount와 비슷한 liftcycle을 갖는 Hook (함수 return을 넣어주면 됨) useEffect(() => { console.log('like didUnmount HOOK@app.js'); return () => { } });

 

 

ref. boxfoxs.tistory.com/395