[React]useEffect

useEffect?

• 화면내에서 타이머 시작/종료와 같은 sideEffect(부작용)를 처리할 때 사용한다.
  리액트의 렌더링 단계에 따르면 함수 컴포넌트의 본문 안에서는 허용되기 않기때문에)

useEffect의 사용

1. 인자로 콜백함수만 받는 경우

useEffect(()=>{
  //작업들..
});

컴포넌트가 렌더링될때마다 매번 콜백함수가 실행된다.

2. 인자로 콜백함수와 의존성배열까지 받는경우

useEffect(()=>{
  //작업들..
}. [value]);

컴포넌트가 렌더링되는 순간, 의존성배열내에 데이터의 변경이 확인된다면 콜백함수를 실행한다.

3. 인자로 콜백함수와 빈배열을 받는경우

useEffect(()=>{
  //작업들..
}. []);

화면이 처음 한번 렌더링 될 때만 실행된다.

useEffect의 Clean Up

API 요청으로 인한 데이터 획득, DOM조작 등의 일반적인 행위는 실행만으로 문제되지 않지만, 특정 작업의 경우에는 메모리 누수 등의 문제를 해결하기 위한 방법이 필요하다.(ex. setTimeout+clearTimeout, setInterval+clearInterval)

useEffect(()=>{
  //작업들..
  return(
    //cleanUp!
    );
});

return내부에 있는 cleanUp 동작은 useEffect가 다시 호출되기전에 실행된다.
만약 useEffect에 빈 배열을 받는경우 useEffect가 첫 렌더링시에만 동작하게 된느데, 이때의 return은 컴포넌트가 최종적으로 DOM에서 unmount되는 시점에 수행된다.