useEffect 맨날쓰는거 그거, 정확히 알아??

React Hooks 레퍼런스를 보다가 useEffect는 가장 많이 쓰지만 가끔씩 헷갈리는 부분이 있어서 복습할 겸 정리해본다.

---

🔧 기본 사용법

const UseEffectExample = () => {
  const [test, setTest] = useState('initial value');
  useEffect(() => {
    console.log('렌더링!');
  });

  return (
    <div>
      <p>{test}</p>
      <input onChange={(e) => {setTest(e.target.value)}} />
    </div>
  )
}

컴포넌트가 렌더링 될 때 자동으로 해당 함수를 호출하는 useEffect 가장 기본적인 사용법이다.
위 예시는 input에 타자를 입력할 때 마다 useEffect 안의 console.log함수가 '렌더링'을 찍게된다.

🔨 state 특정하기

useEffect(() => {
  console.log('렌더링!');
},[test]);

useEffect는 두번째 매개변수 인자를 받을 수 있다. 위 예시는 두번째 매개변수로 받은 state가 변경될 때만 console을 찍게된다.

만약 여러개의 state에 대해서 여러개의 개별적인 동작을 실행시키고 싶다면??

useEffect(() => {
  console.log('test state에 대해서만 호출!')
}, [test])

useEffect(() => {
  console.log('test2 state에 대해서만 호출!')
}, [test2])

간단하게 여러개의 useEffect를 사용하면 된다.

🪓 첫 렌더링에만 호출하기

렌더링될 때 마다 호출되는 것 말고 처음에만 호출시키고 싶다면??

useEffect(() => {
  console.log('첫 렌더링에만 호출')
}, [])

매개변수를 넘기되, 빈 배열로 넘겨주면 됩니다.
이렇게 할 경우 처음 렌더링 될 때 한번만 호출되고, 이후의 어떠한 렌더링에도 재호출 되지 않는다.

⛏ 컴포넌트가 unmount될때 호출하기

컴포넌트가 렌더링 될 때마다 useEffect함수를 호출하는건 모두 알아봤고,
컴포넌트가 unmount될때는 어떻게 해야 할까요?

useEffect(() => {
  console.log('state가 변경될 때 마다 호출!');
  return () => {
    console.log('언마운트 시 호출!')
  }
})

useEffect함수에서 return을 해주면 됩니다.
그리고 당연하게도 두번째 인자에 state를 줬을 경우에는 해당 state의 변화에 대한 unmount에만 반응하게 됩니다.

🔩 unmount에서만 호출하기

첫 렌더링에서만 useEffect를 호출하는 방법이 있듯이, 마지막 unmount에서만 호출하는 방법도 있다. 물론 방식도 똑같이 두번째 인자를 빈 배열로 주면 된다.

const UseEffectExample = () => {
  const [test, setTest] = useState('initial state');

  useEffect(() => {
    console.log('첫 렌더링에만 호출');
    return () => {
      console.log('마지막 언마운트 시 호출')
    }
  }, [])

state를 unmount 해주는 작업을 해주면 '마지막 언마운트 시 호출'로그를 볼 수 있습니다.

---

useEffect의 사용법들을 간단하게 정리해보았고, 앞으로 React Hooks시리즈를 포스팅하면서 useMemo, useFocus등 다양한 훅들을 정리해나가야겠다.