useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기

useEffect라는 Hook을 사용하여 컴포넌트가 마운트되거나 언마운트 됐을때, 또 업데이트가 되었을때 특정 작업을 처리하는 방법에 대해 알아보자

마운트 / 언마운트

 useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

useEffect를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 deps를 넣는다. 만약 deps를 위와같이 비워두게 되면 처음 마운트 됐을때만 호출된다.

 

useEffect에서는 함수를 반환 할 수 있는데 이름 cleanup 함수라고 부른다. 후처리라고 생각하면 편하다.

deps 에 특정 값 넣기

useEffect(() => {
    console.log('user 값이 설정됨');
    console.log(user);
    return () => {
      console.log('user 가 바뀌기 전..');
      console.log(user);
    };
  }, [user]);

deps에 특정 값을 넣게 되면 마운트가 될 때도 호출하고 지정한 값이 변경될 때도 호출한다. 

위에처럼 deps에 user를 지정하게 되면 user에 값이 변경될때마다 함수가 실행된다.

deps 파라미터 생략하기

 useEffect(() => {
    console.log(user);
  });

deps에 값을 생략 할 수 있다. 생략을 하게되면 컴포넌트가 리렌더링 될 때마다 호출하게 된다.