useEffect 개념
1번째 인자: 실행될 함수
2번째 인자: 의존성 배열
cleanup 함수
역할: 해당 컴포넌트가 사라질 때, 컴포넌트 내에서 사용했던 인자들을 정리해주는 함수
사용: useEffect 내에 return 문에서 사용
마운트/언마운트 시에 하는 작업
마운트 시에 하는 작업들은
- props로 받은 값을 컴포넌트의 로컬 상태로 설정
- 외부 API 요청
- 라이브러리 사용
- setInterval을 통한 반복작업 or setTimeout를 통한 작업 예약
언마운트 시에 하는 작업들은
- setInterval, setTimeout을 사용하여 등록한 작업들 clear 하기. clearInterval, clearTimeout
- 라이브러리, 인스턴스 제거
useEffect의 의존성 배열에 특정 값을 넣게 되면, 다음과 같은 상황에서 호출된다.
- 컴포넌트가 처음 마운트(화면에 컴포넌트가 뜰 때) 될 때(componentDidMount)
- 특정 값의 상태가 변화될 때(componentDidUpdate)
- 언마운트(컴포넌트가 사라질 때) 할 때(componentWillUnmount)
useEffect 내에서 사용하는 상태 값, props가 있다면 의존성 배열에 넣어주는 것이 규칙!
넣지 않는다면, useEffect에 등록한 함수가 실행될 때 최신 상태와 props를 가리키지 않게 됨
리액트 컴포넌트는 기본적으로 부모 컴포넌트가 리렌더링 되면, 자식 컴포넌트도 리렌더링 된다.
실제 DOM에 변화가 반영되는 것은 바뀐 내용이 있는 컴포넌트에만 해당 됨
하지만 Virtual DOM에는 모든 것을 다 렌더링 하고있음
-> 컴포넌트 최적화를 통해 Virtual DOM에 렌더링 하는 리소스를 아낄 수 있음
function User({ user, onRemove, onToggle }) {
useEffect(() => {
console.log("마운트: 컴포넌트가 화면에 나타남");
return () => {
console.log("언마운트: 컴포넌트가 바뀌기 전");
};
}, [user]);
의존성 배열에 따른 useEffect 호출
1. 의존성 배열이 빈 배열([]) 일 경우
- 컴포넌트 마운트 시, useEffect 내의 함수가 한번 호출
- 컴포넌트가 언마운트 시, cleanup 함수가 호출
2. 의존성 배열에 값이 존재할 경우
- 컴포넌트 마운트 시, useEffect 내의 함수가 한번 호출
- 의존성 배열 내의 값의 상태가 변경됐을 시, useEffect 내의 함수 호출
- 컴포넌트가 언마운트 시, cleanup 함수가 호출
3. 의존성 배열 이 없을 때
- 리렌더링이 발생할 때마다 호출
참고
- 벨로퍼트님의 모던 리액트(https://react.vlpt.us/basic/16-useEffect.html)
