React component의 life cycle

생명 주기 개념은 useEffect hook을 학습하며 접하게 됐다. 따라서 useEffect의 동작과 연관지어 생명 주기 개념을 기록한다. 먼저 생명 주기의 단어에 대해.

생명 주기란?

• 생명 주기라는 표현은 컴포넌트를 한 생명의 탄생부터 소멸까지의 과정으로 비유한 것이라 이해된다.
• 리액트의 생명 주기는 컴포넌트의 생성(Mount, 렌더링) > 변화(Update, 리렌더링) > 제거(Unmount)의 단계가 하나의 생명 주기이다.

생명 주기의 중요성

• 컴포넌트 생명 주기의 흐름을 알고 단계에 맞게 적절하게 코드를 배치하여야 리소스 관리, 데이터 처리 등 성능 최적화를 할 수 있다.

생명 주기 관리

• 리액트에서 컴포넌트의 생명 주기를 관리하는 훅은 여러 가지가 있으며, 그중 useEffect는 컴포넌트의 마운트, 업데이트, 언마운트을 처리하는 데 주로 사용된다.

호이스팅을 이해할 때와 같이 코드의 흐름에 따른 동작 순서를 알고 의도적으로 코드를 작성 할 수 있어야 할 것 같다.
useEffect를 사용해 React 컴포넌트의 생명주기의 단계별로 관리할 수 있다. 다음은 각 생명주기 단계에 맞춘 useEffect 사용 예시이다.

useEffect로 생명 주기 관리하기

1. 마운트(Mount, 렌더링) 단계

useEffect(() => {
	console.log('mount');
}, [])

• 예시 코드와 같이 두 번째 인자(의존성 배열)로 빈 배열을 넣어주면 마운트 시 콜백 함수를 실행한다.
• 의존성 배열이 빈 배열이면 업데이트(리렌더링)가 발생해도 콜백 함수는 실행되지 않는다.
• 따라서 이 코드는 마운트 단계에서만 동작하는 콜백 함수를 구현한 것이다.

2. 업데이트(리렌더링) 단계

useEffect(() => {
	console.log('update');
})

• 두 번째 인자에 아무것도 입력하지 않으면 업데이트 될 때 콜백 함수가 실행된다.
• 참고) 해당 코드는 마운트 시에도 실행된다.
• 만약 마운트 시에는 실행을 원하지 않고 업데이트 시에만 실행하길 원하는 경우 useRef를 사용하여 구현할 수 있다.
• useRef는 생명 주기와 무관하게 지속되는 값을 설정할 수 있다.
• 초기 렌더링 시에 이 값을 업데이트하고 return을 통해 조기 종료하고
• 이후 업데이트 시점에는 초기 렌더링 때 업데이트된 값이 조건 검사를 통과하게 하여 콜백이 실행되도록 설정할 수 있다.
• 코드는 다음과 같다.

const isMount = useRef(false);

useEffect(() => {
	if (!isMount.current) {
		isMount.current = true;
		return; //마운트 단계에서는 true로 변경하고 여기서 종료
	}
	console.log('update');
})

3. 언마운트 단계

useEffect(() => {
	return () => {
		console.log('unmount');
	};
}, [])

• useEffect의 콜백함수에서 return으로 실행되는 함수는 클린업, 정리함수라고 부르며 언마운트 단계에서 실행된다.
• 콜백함수에서 addEventListener를 등록했다면 return의 클린업 함수에서 removeEventListener로 이벤트 리스너를 제거하여 이벤트 리스너가 누적되어 발생하는 메모리 누수를 방지할 수 있다.

이 포스팅의 내용은 리액트 컴포넌트의 생명 주기를 이해하고 이를 관리하는 방법으로 useEffect 훅을 사용하는 방법에 대한 기록이다.

참고 자료: 이정환님의 한 입 크기로 잘라 먹는 리액트 강의