[React] useEffect의 실행 순서

🗣️ useEffect의 실행 순서를 라이프 사이클에 관련지어 설명해주세요.

• 의도

  • 컴포넌트 라이프 사이클과 useEffect의 이해도를 가지고 있는지 확인하는 질문
  • 각 라이프 사이클에서 어떤 작업을 처리해야 하는지 설명할 수 있는지 확인하는 질문

• 나의 답안

  useEffect는 컴포넌트의 렌더링이 완료된 이후, 즉 실제 DOM이 업데이트된 다음에 실행되는 훅입니다.
  라이프 사이클은 크게 마운트, 업데이트, 언마운트 단계르 나눌 수 있습니다.

  마운트 단계에서는 컴포넌트가 처음 렌더링된 뒤, 브라우저가 실제 DOM을 업데이트하고 화면에 그린 이후에 useEffect가 실행됩니다.
  따라서 API 호출, DOM 접근 등 렌더 이후에 수행되어야 하는 작업을 처리하기에 적합합니다.

  업데이트 단계에서는 상태나 props가 변경되어 컴포넌트가 다시 렌더링될 때,
  먼저 이전 useEffect의 cleanup 함수가 실행되고, 그 다음 새로운 useEffect가 실행됩니다.
  즉, 렌더링 → cleanup → 새로운 effect의 순서로 동작합니다.

  언마운트 단계에서는 컴포넌트가 화면에서 사라지기 직전에 cleanup 함수가 실행되어, 이벤트 리스너나 타이머 등 등록된 리소스를 정리합니다.

• 주어진 답안 (모범 답안)

  컴포넌트 라이프 사이클을 간단하게 설명하자면 create-mount-update-unmount로 함축할 수 있습니다.

  create는 컴포넌트가 말 그대로 생성된 것입니다.
  중요한 것은 이 다음부터입니다.

  mount는 컴포넌트가 생성된 후에 실제 DOM에 렌더링되는 순간을 뜻합니다.
  mount의 한글 뜻인 "장착"에서 유추할 수 있습니다.
  그리고 이 순간이 바로 useEffect 내부의 코드가 실행되는 시기입니다.
  컴포넌트가 화면에 렌더링 되었기 때문에 이때 html 태그를 가져와 이벤트를 등록하거나, 데이터를 fetching 해오는 등의 작업을 처리하게 됩니다.

  update는 컴포넌트에 변화가 생겼을 때를 뜻합니다.
  useEffect의 의존성 배열을 사용하면 특정 값이 변경될 때마다 내부의 작업을 실행할 수 있도록 조절할 수 있습니다.

  unmount는 컴포넌트가 실제 DOM에서 사라지는 순간을 뜻합니다.
  mount의 반대라고 생각하시면 됩니다.
  useEffect에서는 내부의 return 값에 함수의 참조를 넘겨주어 unmount 시 특정 작업이 실행되게 하는데, 이를 클린업 함수라고 합니다.
  주로 mount 시에 등록했던 이벤트를 제거하는 등 메모리 누수를 막기 위한 작업을 실행합니다.

---

📝 개념 정리

React의 useEffect는 클래스 컴포넌트의 라이프사이클 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount를 통합한 기능을 제공한다.
이를 이해하려면 useEffect가 어떤 단계에서 실행되고, 어떤 순서로 동작하는지를 React 컴포넌트의 라이프사이클 관점에서 살펴봐야 한다.

🌟 React 컴포넌트의 라이프사이클

React 컴포넌트는 크게 3가지 단계로 나뉜다.

1. 마운트(Mount): 컴포넌트가 DOM에 추가되는 시점
2. 업데이트(Update): 상태(state) 또는 속성(props)이 변경되어 렌더링이 다시 실행되는 시점
3. 언마운트(Unmount): 컴포넌트가 DOM에서 제거되는 시점

useEffect는 이 모든 단계에서 특정 동작을 수행할 수 있도록 설계되었다.

---

🌟 useEffect의 실행 순서

1. 초기 마운트 단계
   1) 컴포넌트 렌더링
   • 컴포넌트 함수가 호출되어 JSX가 반환된다. React는 이 JSX를 가상 DOM에 렌더링한다.
   • 이 시점에서는 아직 실제 DOM에 반영되지 않았다.
   2) DOM 업데이트
   • React가 JSX를 실제 DOM에 반영한다.
   • 브라우저 화면에 컴포넌트가 나타난다.
   3) useEffect 실행
   • 모든 렌더링과 DOM 업데이트가 완료된 후, useEffect의 콜백 함수가 실행된다.
   • 이 시점은 React의 "commit phase"에 해당하며, DOM이 안정된 상태이다.
   • 이 동작은 클래스 컴포넌트의 componentDidMount와 동일하다.

2. 업데이트 단계
   1) 상태 또는 속성 변경
   • 상태(state)나 속성(props)이 변경되면 컴포넌트 함수가 다시 호출된다.
   • 이 과정에서 새로운 JSX가 반환된다.
   2) DOM 업데이트
   • React는 변경된 가상 DOM을 실제 DOM에 반영한다.
   • 브라우저 화면이 갱신된다.
   3) useEffect 실행
   • 업데이트가 완료된 후, useEffect의 콜백 함수가 실행된다.
   • 이 동작은 클래스 컴포넌트의 componentDidUpdate와 동일하다.
   4) 정리 함수 실행 (Optional)
   • 만약 useEffect에서 정리(clean-up) 함수가 반환되었다면, useEffect가 다시 실행되기 전에 이 정리 함수가 호출된다.
   • 예를 들어, 이전 구독을 취소하거나 타이머를 정리하는 데 사용된다.

3. 언마운트 단계
   1) DOM 제거
   • 컴포넌트가 DOM에서 제거된다.
   2) 정리 함수 실행
   • useEffect의 정리(clean-up) 함수가 호출된다.
   • 이 동작은 클래스 컴포넌트의 componentWillUnmount와 동일하다.

---

🌟 의존성 배열과 실행 흐름

useEffect의 실행 흐름은 의존성 배열에 따라 달라진다.

1. 의존성 배열이 없는 경우

   useEffect(() => {
     console.log("의존성 배열 없음");
   });

   • 모든 렌더링(마운트와 업데이트) 후에 실행된다.
   • 정리 함수가 있다면 업데이트와 언마운트 시 호출된다.

2. 빈 의존성 배열

   useEffect(() => {
     console.log("한 번만 실행됨");
   }, []);

   • 초기 마운트 시에만 실행된다.
   • 정리 함수가 있다면 언마운트 시 호출된다.

3. 특정 의존성을 가진 경우

   useEffect(() => {
     console.log("의존성 변경 감지");
   }, [count]);

   • count 값이 변경될 때만 실행된다.
   • 이전 값이 새로운 값으로 변경되기 전에 정리 함수가 호출된다.

---

🌟 useEffect의 실행 순서 요약

1. 초기 렌더링
   • DOM이 업데이트된 후 useEffect 실행

2. 업데이트
   • DOM 변경 후 새로운 useEffect 실행
   • 이전 useEffect의 정리(clean-up) 함수 호출

3. 언마운트
   • DOM에서 제거되기 직전에 useEffect의 정리 함수 호출