useEffect

Hooks

Hook은 Component에서 데이터(state) 를 관리하고 데이터가 변경될 때 Effect(상호작용) 를 다룰 수 있다.

• useState
• useEffect
• useCallback

이러한 것들이 모두 React의 hooks 이다.

기존의 Class 기반 Component는 State와 life-cycle을 관리하기 복잡했지만 Hooks는 이러한 것들을 간편하게 관리할 수 있게 도와준다.

단, Hooks는 React 함수 내부 에서만 사용이 가능하며 Hooks의 이름은 use로 시작한다.

React Hook은 이러한 특징들이 있는데, 그 중에서 나를 골치아프게 했던 useEffect에 대한 기록을 남기려고 한다.

Effect Hook

• Effect Hook을 사용하면 함수 컴포넌트에서 Side effect를 수행할 수 잇다.
• Component가 최초 Rendering(Mount)될 때, 지정한 State나 Prop의 변경에 따른 Effect callback 함수가 호출된다.
• 첫 번째 파라미터 EffectCallback은 두 번째 파라미터 Deps에 지정된 변수가 변경될 때 실행되는 함수이다.
• 두 번째 Deps Parameter에는 변경을 감지한 변수들의 Array가 인자로 들어간다.

첫 번째 렌더링은 life-cycle 중에서 componentDidmount 처럼 실행한다.

const App = () => {
  useEffect(() => {
    console.log("useEffect")
  }, [])
}

위의 코드는 App이 렌더링 될 때 console에 useEffect라는 문자를 출력한다.

const App = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log(`Count up! ${count}`)
  }, [count])

  return (
      <div>
        <button onClick={() => setCount(count + 1)}>Click</button>
    </div>
  )
}

위의 코드는 count라는 state가 변경될 때마다 Count up! 이라는 문장을 console에 출력한다.

const App = () => {
  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log("useEffect")
    }, 1000)

    return () => {
          clearInterval(intervalId)
    }
  }, [])
}

위의 코드는 useEffect 함수 내에서 다른 함수를 return하는 형태를 가지고 있다. 이러한 경우 Component가 다시 rendering 되기 전과 컴포넌트가 Destroy 될 때 호출할 함수를 지정하게 된다. 이를 cleanup 함수라고 부른다. 이러한 cleanup 함수는 useEffect에 대한 마무리 정리를 해준다고 생각하면 된다. 이전의 class 기반 Component에서는 componentWillUnmount 처럼 실행한다.