Side Effect 란?
React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 이전에도 종종 해보셨을 것입니다. 우리는 이런 모든 동작을 “side effects”(또는 짧게 “effects”)라고 합니다.
왜냐하면 이것은 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문입니다.
useEffect 훅
Effect Hook, 즉
useEffect
는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. React class의
componentDidMount
나 componentDidUpdate
, componentWillUnmount
와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다. (useEffect
와 이 세 가지 메서드를 비교하는 예시가 Using the Effect Hook 문서에 있습니다.)