소프트웨어/Web

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

cs만두 2021. 3. 25. 23:03

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

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

 

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

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

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

1
2
3
4
5
6
7
8
9
  componentDidMount() {
    this.getMyData();
  };
  componentDidUpdate() {
      console.log('in componentDidUpdate@Movie.js');
  };
  componentWillUnmount() {
      console.log('in componentWillUnmount@Movie.js');
  };
 cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  // 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 () => {
    }
  });
 cs

 

 

ref. boxfoxs.tistory.com/395