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

1. 배열에 값이 없는 경우 (deps에 빈배열: 처음에만 함수 호출)  [ ]

    useEffect(() =>{ { //마운트    
    
      //props => state, REST API, D3 Video.js, setInterval, setTimeout
      console.log('컴포넌트가 화면에 나타남'); -> ui가 화면에 나타난 상태 이후
      
      return () => {//언마운트
      
        //clearInterval, clearTimout, 라이버리 인스턴스 제거 , useEffect 반환되는 함수는 cleanup 함수 (뒷정리)
        console.log('컴포넌트가 화면에서 사라짐'); -> 등록했던 작업을 제거 할 때 , deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출
     
     }
    }, []);

 

2. 배열안에 값이 있을경우 (deps에 의존값 존재 : 처음과 지정값이 변경될 때 호출)  [user] 

= 값이 설정이나 바뀔 때호출이 됨

 useEffect(() =>{
   console.log('user 값이 설정됨'); -> 값이 설정될 때 호출
   return () =>{
     console.log('user 값이 바뀌기 전'); -> 해당 값이 바뀔 때마다 등록한 함수 호출되고 해당값이 바뀌기 바로 직전에는 return 안에 함수가 호출
   }
 }, [user]);

 

3. deps 배열 아예 생략할 경우 (deps가 아예 없는 경우 : 컴포넌트가 리렌더링 될 때마다 호출 )   }); 

= 컴포넌트가 리렌더링 되고 나서 호출(부모컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링됨)

= 업데이트 된 경우 모든 브라우저에 변화가 있는것이아니라(특정 부분만 업데이트) 처럼 보이고 

   가상돔 상에서는 모든 컴포넌트 렌더링하고 나서 바뀐 부분 만 적용

 useEffect(() =>{

  });