[React] mount시 실행되는 useEffect

함수형 컴포넌트에서는 플러터의 initState, dispose와 같이

컴포넌트가 생성(mount)되거나 해제(unmount)될 때의 호출을 useEffect를 사용해 구현한다.

 

useEffect는 deps 값을 통해 어떤 경우에 동작할 것인지 정할 수 있다.

 

1. 컴포넌트가 mount 되는 최초 1회

  useEffect(() => {
    console.log("init");
    return () => {
      console.log("dispose");
    };
  }, []);

return을 통해 unmount가 될 때 동작하는 dispose를 구현할 수 있다.

맨 뒤의 deps에 빈 배열을 넣어주면 최초 1회만 동작한다.

 

2. 특정 값이 바뀌는 경우 & mount시

  useEffect(() => {
    console.log('user 값 설정');
    return () => {
      console.log('user 변경 전');
    };
  }, [user]);

값이 설정되기 전과 후에 동작한다.

만약 mount시에 호출하고 싶지 않다면 bool 타입의 ref를 사용해 mount 여부를 걸러내보자.

 

3. 리렌더링 시 호출

  useEffect(() => {
    console.log('리 렌더링');
  });

매 렌더링 마다 호출되며 mount시에도 호출 된다.

 

주의할 점

useEffect 내에서 사용하는 state, props가 있다면 deps에 넣어줘야하는 것이 규칙이다.

그래야만 useEffect에서 최신 값을 사용할 수 있기 때문이다.

그리고, 당연히 여러 개의 useEffect를 하나의 컴포넌트에서 사용할 수 있다.