[React] UseEffect

UseEffect

hook 함수 중 하나로 리액트 컴포넌트가 처음 화면에 나타나게 될 때 / 화면에서 사라지게 될 때 어떤 특정 작업을 할 수 있고, 컴포넌트에 어떤 props나 state가 바뀌어서 업데이트 될 때에도 어떤 작업을 할 수 있고, 업데이트 되기 전에도 할 수 있다. 리렌더링 할 때에도 가능

useEffect(() => {
    console.log("컴포넌트가 화면에 나타남");
    // props -> state
    // REST API
    // D3 Video.js
    // setInterval, setTimeout
  
    return () => {
      // clearInterval, clearTimeout
      // 라이브러리 인스턴스 제거
      console.log("컴포넌트가 화면에서 사라짐");
    };
  }, []);

마운트 될 때
1. props -> state
2. REST API
3. D3 Video.js
4. setInterval, setTimeout

언마운트 될 때
1. clearInterval, clearTimeout
2. 라이브러리 인스턴스 제거