useEffect 생명주기 이벤트 처리 (componentDidMount, DidUpdate, WillUnmount)

생명주기 이벤트 처리란, 컴포넌트의 생성부터 소멸까지 일어나는 여러 단계에서 특정 코드를 실행하는 것을 말합니다. 이는 컴포넌트가 사용자의 인터페이스에 나타나고, 업데이트되며, 마지막으로 제거될 때까지의 과정을 포함합니다. React에서는 이러한 과정을 생명주기(Lifecycle)라고 부르며, 클래스 컴포넌트에서는 여러 생명주기 메서드를 통해 이를 관리할 수 있습니다.

예를 들어, 클래스 컴포넌트에서는 다음과 같은 생명주기 메서드를 사용할 수 있습니다.

• componentDidMount: 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출됩니다. 여기서는 DOM 노드를 초기화하거나 네트워크 요청을 보내는 등의 작업을 수행할 수 있습니다.

• componentDidUpdate: 컴포넌트가 리렌더링된 후에 호출됩니다. 이전과 새로운 props 또는 state를 비교할 때 사용할 수 있습니다.

• componentWillUnmount: 컴포넌트가 마운트 해제되기 직전에 호출됩니다. 여기서는 이벤트 리스너 제거, 타이머 취소 등의 정리 작업을 수행할 수 있습니다.

React Hooks를 사용하는 함수형 컴포넌트에서는 useEffect 훅을 이용하여 이러한 생명주기 이벤트를 처리합니다. useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있도록 해주며, 클래스 컴포넌트의 생명주기 메서드와 유사한 기능을 제공합니다. 예를 들어, useEffect 내에서 반환하는 함수는 componentWillUnmount와 유사한 방식으로 정리(clean-up) 작업에 사용될 수 있습니다.

 

useEffect 훅은 React 함수형 컴포넌트에서 부수 효과(side effects)를 처리하기 위해 도입되었습니다. 이 훅을 사용하여 데이터 fetching, 구독 설정, 수동 DOM 조작 등의 작업을 수행할 수 있으며, 클래스 컴포넌트의 생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)에 대응하는 기능을 제공합니다.

 

useEffect 작동 원리

useEffect는 두 개의 인자를 받습니다: 부수 효과를 수행하는 함수와 의존성 배열입니다.

• 부수 효과 함수: 이 함수는 컴포넌트가 렌더링될 때마다 실행됩니다. 부수 효과 함수에서 반환할 수 있는 또 다른 함수는 컴포넌트가 언마운트될 때, 또는 다음 부수 효과가 실행되기 전에 호출되어 정리(clean-up) 작업을 수행합니다.

• 의존성 배열: 이 배열에 포함된 값들이 변경될 때만 부수 효과 함수가 실행됩니다. 배열이 비어있으면, 부수 효과 함수는 컴포넌트가 처음 렌더링될 때 한 번만 실행되고, 컴포넌트가 언마운트될 때 정리 함수가 호출됩니다.

 

componentDidMount, componentDidUpdate, componentWillUnmount와의 대응

1. componentDidMount:

   • useEffect 내의 부수 효과 함수는 컴포넌트가 마운트된 후(즉, 처음 렌더링된 후)에 실행됩니다.

   • 의존성 배열이 비어 있으면, 이 효과는 컴포넌트가 처음 렌더링될 때 한 번만 실행됩니다.

2. componentDidUpdate:

   • 의존성 배열에 변수를 포함시키면, 해당 변수가 변경될 때마다 부수 효과 함수가 실행됩니다. 이는 componentDidUpdate와 유사한 패턴을 구현합니다.

   • 컴포넌트가 업데이트될 때마다 특정 작업을 수행하려면, 의존성 배열을 생략하거나 컴포넌트 상태 또는 props에 의존하는 값을 배열에 포함시킵니다.

3. componentWillUnmount:

   • useEffect 내의 부수 효과 함수에서 반환하는 정리 함수는 컴포넌트가 언마운트될 때 호출됩니다. 이는 componentWillUnmount와 유사한 기능을 수행합니다.

   • 정리 함수는 또한 의존성 배열에 있는 값이 변경되기 전에 호출되어 이전 효과를 정리합니다.

 

작동 순서 및 방법

1. 렌더링 후 실행: 컴포넌트가 렌더링된 후(즉, 사용자에게 UI가 보여진 후), useEffect 내부의 부수 효과 함수가 호출됩니다. 이는 렌더링과 부수 효과 사이의 동기화를 방지하여 성능 저하를 막고, 불필요한 렌더링을 방지합니다.

2. 의존성 배열에 따른 조건부 실행: 의존성 배열이 제공되면, 배열 내의 값이 변경될 때만 부수 효과 함수가 실행됩니다. 비어 있는 배열은 컴포넌트의 마운트와 언마운트 시점에만 효과가 실행되도록 합니다.

3. 정리 함수의 호출: 부수 효과 함수에서 반환된 정리 함수는 컴포넌트가 언마운트될 때 호출됩니다. 또한, 의존성 배열에 있는 값이 변경되어 부수 효과 함수가 다시 실행될 때도 이전 효과를 정리하기 위해 호출됩니다.

useEffect를 사용함으로써, 함수형 컴포넌트에서도 클래스 컴포넌트의 생명주기 메서드를 효과적으로 모방하고, 복잡한 부수 효과 관리를 더 간단하고 선언적으로 처리할 수 있게 됩니다.