a. 부수 효과를 발생 시키는 hook
useEffect(() => {
document.title = `업데이트 횟수: ${count}`
})
- 컴포넌트 렌더링 후에 useEffect에 등록된 매개변수 함수가 호출됨
- 렌더링 결과가 DOM에 반영된 후, 비동기로 호출
b. 의존성 배열
useEffect(() => {
getUserInfo(userId).then(data => setUser(data));
}, [userId, func1]);
- useEffect 두번째 매개변수로 의존성 배열을 넣을 수 있다.
- 의존성 배열의 역할은 해당 배열에 포함된 값이 변경됐을 때로 부수 효과 발생을 제한 할 수 있다.
- 일반적으로 의존성 배열에 들어가는 값들은 컴포넌트 내부의 상태값 또는 속성값, 지역변수, 지역 함수 등이 있다. 여기서 상태값 변경 함수(ex> setUser)는 예외적으로 없어도 된다.
- 컴포넌트 외부 함수 또한 의존성 배열에 기입할 필요는 없다.
- 의존성 배열에 빈 배열을 넣으면 컴포넌트 생성시에만 부수 효과가 호출되게 구현할 수 있다.
c. useEffect의 반환 함수
useEffect(() => {
const onResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', onResize);
return () => {
window.removeEventListener('resize', onResize);
}
}, []);
- useEffect 반환 함수 호출 시점은 다음과 같다
1. 다음 useEffect가 호출 되기 직전에 호출된다.
2. 컴포넌트가 사라지기 직전(unmount) 되기 직전에 마지막으로 호출된다.
