React.js | 입문 | useEffect

useEffect는 useState로 선언한 상태를 관리하기에 정말 좋은 Hook이다.

컴포넌트가 마운트 됐을 때(처음 나타났을 때,), 언마운트 됐을 때(사라질 때), 업데이트 될 때(특정 props가 바뀔 때)

특정 작업을 처리할 수 있게 해준다.

 

1. 마운트 됐을 때 처리

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

이런식을 두번째 파라미터에 빈 배열( deps )을 넣어주면 처음 나타났을 때 특정 작업을 처리할 수 있게 해준다.

 

 

2. deps에 특정 값 추가( 업데이트 될 때 )

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

두번째 파라미터 배열 안에 원하는 상태 변수를 넣어 해당 변수에 변경 사항이 있을 경우 특정 작업을 처리할 수 있게끔

해준다.

 

 

3. deps 파라미터 생략

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

deps 파라미터를 생략하면 컴포넌트가 리렌더링 될 때마다 특정 작업을 실행할 수 있게 해준다.

 

 

 

 

 

- 참조 

https://react.vlpt.us/basic/16-useEffect.html