[React.js] useEffect는 언제 실행될까?

React에서 useEffect 훅의 적절한 이해와 사용은 효과적인 컴포넌트 생명주기 관리의 핵심입니다. 이 포스팅은 useEffect의 실행 시점, 컴포넌트의 마운트, 리렌더링, 그리고 마운트 해제 과정에서 useEffect가 어떻게 작동하는지에 대한 세밀한 이해를 제공합니다. 또한, React의 렌더링과 마운트 과정에 대한 기본적인 이해도 함께 다룹니다.

---

useEffect의 기본

useEffect는 함수형 컴포넌트에서 사이드 이펙트를 처리하기 위해 사용되는 React 훅입니다. 사이드 이펙트에는 데이터 fetching, 구독 설정 및 해제, 수동 DOM 조작 등이 포함됩니다. 이 훅은 컴포넌트 렌더링 결과가 DOM에 반영된 후에 실행되어, 컴포넌트 로직과 부수 효과 로직을 분리할 수 있게 해 줍니다.

useEffect의 기본 구조

useEffect(() => {
  // 부수 효과를 실행할 코드
}, [dependencies]); // 의존성 배열

useEffect는 React 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있도록 해주는 훅입니다. 첫 번째 인자로는 실행할 콜백 함수를, 두 번째 인자로는 의존성 배열(dependencies array)을 받습니다. 의존성 배열을 통해 특정 상태나 props가 변경될 때만 효과를 실행할 수 있습니다.

---

useEffect는 언제 실행될까?

1. 마운트(Mounting) 시점

• 렌더링: React 컴포넌트의 렌더링 과정은 컴포넌트 함수/클래스의 실행으로 시작됩니다. 이때, JSX 코드가 React 엘리먼트로 변환되고, 결과적으로 가상 DOM이 생성됩니다.
• 마운트: 마운트는 컴포넌트가 처음으로 DOM에 삽입되는 과정을 의미합니다. 이 과정에서 useEffect는 컴포넌트의 첫 렌더링이 완료되고 실제 DOM 업데이트가 이루어진 직후에 실행됩니다. 즉, 사용자에게 UI가 표시된 직후에 부수 효과를 수행합니다.

마운트 시점에서 useEffect의 실행

React 컴포넌트의 마운트는 크게 두 단계로 나눌 수 있습니다. 렌더링 단계와 커밋 단계입니다. 렌더링 단계에서는 React가 JSX를 평가하여 가상 DOM을 생성하고, 커밋 단계에서는 변경 사항을 실제 DOM에 반영합니다. useEffect는 이 과정의 맨 마지막에, 즉 커밋 단계가 완료된 후에 실행됩니다.

• 렌더링 단계: 컴포넌트의 JSX가 평가되어 가상 DOM이 생성됩니다. 이 단계에서는 아직 useEffect가 실행되지 않습니다.
• 커밋 단계: 변경 사항이 실제 DOM에 반영됩니다. 모든 DOM 업데이트가 완료되면, 마운트가 완료된 것으로 간주됩니다.
• useEffect 실행: 커밋 단계 이후, React는 등록된 모든 useEffect 함수를 비동기적으로 실행합니다.

2. 업데이트(Updating) 및 리렌더링

• 업데이트: 컴포넌트의 상태(state)나 속성(props)이 변경될 때 발생합니다. 이러한 변경은 컴포넌트의 재평가와 재렌더링을 유발합니다.
• 리렌더링: useEffect는 의존성 배열에 명시된 변수가 변경될 때마다 리렌더링 후에 다시 실행됩니다. 의존성 배열이 비어 있으면 컴포넌트가 리렌더링될 때마다 실행되지 않으며, 배열이 전혀 제공되지 않으면 매 렌더링 후에 실행됩니다.

3. 언마운트(Unmounting) 시점

• 언마운트: 컴포넌트가 DOM에서 제거되는 것을 말합니다. useEffect 내부에서 반환한 클린업 함수는 컴포넌트가 언마운트될 때 호출되어, 이벤트 리스너 제거나 타이머 해제 등의 정리 작업을 수행합니다.

---

useEffect의 자세한 실행 시점 - 렌더링, 커밋, 마운트 과정과 관련하여

React에서의 렌더링, 커밋, 마운트 과정과 관련하여 `useEffect`의 실행 시점을 좀더 자세하게 알아보겠습니다. 이 과정들은 React가 UI를 생성하고 업데이트하는 방식을 이해하는 데 중요합니다.

렌더링(Rendering)

• 정의: 렌더링은 React가 JSX나 컴포넌트로부터 가상 DOM을 생성하는 과정입니다. 이 과정에서 React는 컴포넌트의 상태(state)와 속성(props)을 바탕으로 UI를 어떻게 표시할지 결정합니다. 이를 "버츄얼 렌더링"이라고 할 수 있습니다.
• 비교: 렌더링은 실제 DOM에 아직 반영되지 않았기 때문에, 사용자는 이 단계에서의 변화를 볼 수 없습니다. 이는 마치 화면에 그려질 그림을 스케치하는 단계와 비슷합니다.

커밋(Commit)

• 정의: 커밋 단계는 React가 렌더링 과정에서 생성한 가상 DOM의 변경 사항을 실제 DOM에 반영하는 과정입니다. 이 단계에서 변경 사항이 실제로 적용되어 사용자가 UI의 변화를 볼 수 있게 됩니다.
• 비교: 커밋은 버츄얼 렌더링된 결과를 실제 화면에 그리는 단계입니다. 가상 DOM과 실제 DOM의 차이를 비교하고, 필요한 최소한의 DOM 업데이트를 수행하여 성능을 최적화합니다.

마운트(Mounting)

• 정의: 마운트는 컴포넌트가 처음으로 DOM에 삽입되는 과정을 의미합니다. 이는 컴포넌트가 처음으로 화면에 그려지는 순간입니다.
• 비교: 마운트는 컴포넌트의 생명주기에서 초기 렌더링 단계에 해당합니다. 컴포넌트가 처음으로 사용자에게 보여지는 순간이며, 이 때 useEffect의 코드가 실행됩니다(의존성 배열이 없거나 지정된 경우).

useEffect의 실행 시점은?

• 실행 시점: useEffect는 커밋 단계가 완료된 후에 실행됩니다. 즉, 변경 사항이 실제 DOM에 반영되고 나서, 그리고 사용자가 최신의 UI를 볼 수 있게 된 후에 useEffect 내의 코드가 실행됩니다.
• 비교: useEffect는 React가 UI를 실제 화면에 그린 직후에 부수 효과를 처리하기 위해 설계되었습니다. 이는 데이터 fetching, 이벤트 리스너 설정, 그리고 기타 필요한 사이드 이펙트를 안전하게 수행할 수 있는 시점입니다.

이러한 과정을 통해 React는 효율적인 UI 업데이트와 성능 최적화를 달성합니다. 렌더링에서 커밋, 그리고 마운트에 이르기까지 각 단계는 React 애플리케이션의 생명주기를 구성하며, `useEffect`는 이 생명주기에 맞춰 부수 효과를 관리하는 데 핵심적인 역할을 합니다.

---

서로 다른 useEffect의 실행 순서

React는 useEffect 호출을 등록한 순서대로 실행합니다. 즉, 한 컴포넌트 내에서 여러 useEffect가 있을 경우, useEffect는 컴포넌트 내에서 정의된 순서대로 실행됩니다. 소스코드 상으로는 위에서부터 아래로 실행된다는 것을 의미합니다. 이는 개발자가 코드를 통해 실행 순서를 예측하고 제어할 수 있게 해 줍니다. 다만, 서로 다른 컴포넌트 간의 useEffect 실행 순서는 동일한 순서로 보장되지 않습니다.

---

이러한 실행 시점과 순서의 이해는 useEffect를 통해 다양한 부수 효과를 효과적으로 관리하고, React 애플리케이션의 성능을 최적화하는 데 중요합니다. useEffect의 적절한 사용은 컴포넌트의 생명주기를 명확하게 관리하고, 예측 가능한 UI 업데이트를 보장하는 데 필수적입니다.