useEffect란?
컴포넌트의 여러 값들을 활용해 부수 효과를 만드는 훅
- 첫 번째 인수는 실행할 부수 효과가 포함된 함수
- 두 번째 인수는 의존성 배열: 의존성 배열은 길이를 가진 배열일 수도, 빈 배열일 수도 있고, 배열을 생략할 수도 있다.
- 의존성 배열이 변경되면 콜백이 실행된다.
useEffect의 실행 순서
- 최초 렌더링 직후에 콜백이 실행된다.
- state와 props가 변화로 리렌더링이 발생한다.
함수형 컴포넌트는 매번 함수를 실행해 렌더링을 수행한다.
- 리렌더링할 때마다 의존성에 있는 값을 보며, 값이 이전과 다른 게 있으면 부수 효과를 실행한다. 이때 클린업 함수가 존재한다면 클린업 함수를 실행한 뒤에 콜백을 실행한다.
클린업 함수는 이전 state를 참조해 실행된다.
- 컴포넌트가 DOM에서 제거되면 클린업 함수가 실행된다.
두 번째 인수
빈 배열
첫 렌더링 직후에만 실행
클린업 함수
클린업 함수의 목적
이벤트를 추가하기 전에 이전에 등록했던 이벤트 핸들러를 삭제할 때 사용한다. 이렇게 함으로써 특정 이벤트의 핸들러가 무한히 추가되는 것을 방지할 수 있습니다.
https://react.dev/reference/react/useEffect#examples-dependencies
Q. 왜 clearInterval을 return 문에서 호출하는가? 호출하지 않으면 어떤 일이 벌어지는가?
- 리렌더링이 발생할 때마다 interval 추가되므로, interval이 무한히 추가될 수 있다.
- 다른 페이지로 이동해도 리로드하지 않으면 interval이 여전히 남아 있다.
useEffect와 async
Q. useEffect 콜백 함수에 async를 사용할 수 없는 이유는?
- useEffect 인수로 비동기 함수가 사용 가능하다면 이전 state 기반의 응답이 이후 바뀐 state 기반의 응답보다 오래 걸리면, 이전 state 기반으로 결과가 나온다.
- clenup 함수의 실행 순서도 보장할 수 없다.
