컴포넌트도 생명주기가 있다.
컴포넌트는 마운트(생성), 리렌더링(업데이트), 언마운트 생명주기를 거치며, 이 과정에서 특정 작업을 수행할 수 있다.
useEffect 구조와 원리
useEffect는 컴포넌트의 생명주기 동안 특정 작업을 수행하기 위해 사용하는 훅이다. 이 훅은 컴포넌트가 마운트되거나 업데이트될 때 실행되는 함수를 정의할 수 있다.
useEffect(() => {
// 컴포넌트가 마운트되거나 업데이트될 때 실행되는 코드
return () => {
// 컴포넌트가 언마운트될 때 실행되는 코드
};
}, [dependencies]);
📌 인자 목록
| 인자 | 설명 |
|---|---|
| effect | 컴포넌트가 마운트되거나 업데이트될 때 실행되는 함수. |
| cleanup | effect에서 반환하는 함수로, 컴포넌트가 언마운트될 때 실행됨. |
| dependencies | 배열 형태로, 이 배열에 포함된 값이 변경될 때만 effect가 실행됨. 빈 배열([])이면 최초 마운트 시만 실행. |
useEffect는 컴포넌트가 마운트될 때와 업데이트될 때 실행되는 함수를 정의할 수 있다. 이 함수는 컴포넌트가 언마운트될 때 실행되는 cleanup 함수를 반환할 수 있다.
** 참고 **
컴포넌트 언마운트 시점 언마운트(unmount)는 컴포넌트가 DOM에서 제거되는 시점을 말합니다. 다음과 같은 상황에서 컴포넌트가 언마운트된다
- 조건부 렌더링에서 제거될 때
{
isVisible && <MyComponent />;
} // isVisible이 false가 되면 언마운트
- 부모 컴포넌트에서 더 이상 렌더링하지 않을 때
- 부모 컴포넌트의 상태 변경으로 자식 컴포넌트가 제거될 때
- 부모 컴포넌트 자체가 언마운트될 때
- 라우팅 변경으로 다른 페이지로 이동할 때
- 현재 페이지 컴포넌트가 다른 페이지로 대체되면 언마운트됨
- 동적 리스트에서 항목이 제거될 때
- 배열에서 항목을 제거하면 해당 컴포넌트도 언마운트됨
useEffect의 클린업 함수는 이러한 언마운트 시점에 실행되어 이벤트 리스너 제거, 타이머 클리어, 구독 취소 등의 정리 작업을 수행.
