useEffect란?

이름에서도 알 수 있듯이 effect를 처리하는 hook이다. 여기서 effect란 Side-Effect로, 부수 효과를 의미한다. 부수 효과란 외부 상태를 변경하는 것을 의미한다. 즉, 서버 API를 호출하거나 이벤트 핸들러를 등록하는 것 등이 부수 효과이다.

사실 이것보다는 함수형 컴포넌트에서 Lifecycle 메서드를 지원하는 Hook으로 알려져 있다.

왜 Side-Effect는 useEffect 내부에서 실행해야 하는가?

useEffect 내부에서 Side effect를 실행해야 하는 이유

똑같은 의문을 품고 찾아보신 분이 계셨다. 사실 이 글을 읽어봐도 아직 정확하게 이해가 가진 않는다.

위 글에는 render phrase와 commit phrase가 나오는데 [공식 문서] Browsing commits 여기서 설명을 볼 수 있다.

react-lifecycle-methods-diagram 여기서는 phrase들을 Lifecycle과 관련하여 시각적으로 확인할 수 있다.

useEffect와 Lifecycle

useEffect가 Lifecycle Method(componentDidMount, componentDidUpdate, componentWillUnmount)를 어떻게 구현하는지는 아래 ZeroCho님 블로그에 아주 잘 설명이 되어 있다. 이미 잘 알고 있는 내용이므로 여기에 기술하진 않으려 한다.

• React Hooks! useEffect편(React 17버전)
• React Hooks! useRef편(React 17버전)

프로젝트를 하며 마주친 에러

모두 clean up 함수를 제대로 설정하지 않아서 발생했던 에러였다.

1. 제거해주지 않은 이벤트 핸들러
2. 비동기 작업 이후 수행한 setState

1.을 해결하는 방법은 clean up 함수에서 removeEventListener()를 해주면 되므로 간단하다.

2.을 해결하는 방법으로는 2가지가 있는데 Clean Up Async Requests in useEffect Hooks 이 글에서 잘 설명해주고 있다. 여기서 소개한 첫 번째 방법을 통해 해결하였는데 아예 HTTP 요청 자체를 보내지 않기 위해 두 번째 방법을 시도해보아야겠다.

추가 학습

React 17 runs useEffect cleanup functions asynchronously

useEffect의 cleanup 함수에 대해 조금 더 깊이 알 수 있다.

A Complete Guide to useEffect

Dan Abramov가 작성한 글로, 매우 길다. 나도 앞의 TL;DR만 읽어봤지만 다음에 다 읽어보려고 한다.