[React] lifecycle과 useEffect에 대해 알아보자

오늘은 class형 컴포넌트의 lifecycle과 관련이 깊은 useEffect에 대해 알아보고자 합니다.

class형 컴포넌트의 lifecycle에는

1) componentWillMount
2) componentDidMount
3) componentDidUpdate
4) componentWillUnmount

이 있습니다.

컴포넌트가 처음 실행될 때를 Mount라고 표현합니다. 컴포넌트가 시작되면 우선 context, defaultProps와 state를 저장하고 그 후에 componentWillMount 메소드를 호출합니다. 그리고 render로 컴포넌트를 DOM에 부착한 후 Mount가 완료되면 componentDidMount가 호출됩니다.

주의할 점은, componentWillMount에서는 props나 state를 바꾸면 안 됩니다. Mount 중이기 때문이죠. 그리고 아직 DOM에 render하지 않았기 때문에 DOM에도 접근할 수 없습니다.

그리고 componentDidUpdate는 리랜더링이 될 때마다 호출되는 메소드, componentWillUnmount는 컴포넌트가 끝날 때 호출되는 메소드입니다.

class형 component의 lifecycle이 functional component에서는 어떻게 사용되고 있을까요?

useEffect

useEffect를 통해 사용되고 있습니다.

1) componentDidMount

  useEffect(() => {
    console.log("마운트 됨");
  }, []);

componentDidMount는 위처럼 처음 마운트되었을 때처럼과 동일하게 사용할 수 있습니다.

2) componentDidUpdate

 useEffect(() => {
  console.log("수정되고 다시그려짐");
 });
 
 useEffect(() => {
  console.log("수정되고 다시그려짐");
 }, [count]);

componentDidUpdate는 위처럼 사용되는데 첫 번째 useEffect는 컴포넌트 내의 state가 변경되어 랜더링될 때마다 실행되고, 두 번째 useEffect는 deps에 들어있는 값이 업데이트될 때에만 안에 있는 함수가 실행됩니다.

3) componentWillUnmount

useEffect(() => {
 return () => {
   console.log("여기서 나갈래요");
 };
}, []);

위처럼 return 뒤에 화살표 함수를 써주게 되면 useEffect를 사용하는 컴포넌트에서 빠져나갈 때 바로 직전에 실행되게 됩니다.

주의할 점은 router나 history를 사용하면 componentWillUnmount의 기록이 남아있지만 window.location.href를 사용하게 되면 새로고침되어 저장된 값들도 사라지게 되니 주의하시길 바랍니다. 이와 연관된 SPA에 관한 내용은 추후 다루도록 하겠습니다.