React 생명주기 이해하기 | 렌더링 흐름 기준

1. 리액트 생명주기 (Lifecycle)

• 리액트 컴포넌트는 화면에 생성(Mount) ➡ 업데이트(Update) ➡ 제거(Unmount) 되는 과정을 거친다.

  이 과정을 생명주기(Lifecycle) 라고 한다.

• 예전에는 여러 개의 생명주기 메서드를 사용했지만,
  지금은 useEffect 하나로 컴포넌트의 등장 ➡ 변화 ➡ 사라짐을 모두 제어할 수 있다.

---

1-1. 생성 단계 (constructor)

• 컴포넌트의 기본 세팅을 담당하는 초기 준비 단계이다.

  이 메서드에서는 초기 state를 정의하고 이벤트 핸들러를 바인딩할 수 있다.
  아직 화면에 아무것도 렌더링되지 않았기 때문에 DOM 조작은 불가능하다.

---

1-2. 렌더 단계 (render)

• 이 컴포넌트를 어떻게 보여줄지 정의하는 핵심 단계이다.
• render()는 컴포넌트가 실제로 화면에 무엇을 그릴지 결정하며,
  JSX 형태로 UI 구조를 반환하고 리액트가 이를 기반으로 가상 DOM(Virtual DOM) 을 생성한다.
• 렌더링은 여러 번 일어날 수 있지만, 상태 변경이나 DOM 조작은 하면 안 된다.

---

1-3. 마운트 완료 단계 (componentDidMount)

• 컴포넌트가 화면에 나타난 직후 실행되는 메서드이다.
• DOM이 완전히 준비된 시점이므로 API 호출, 이벤트 등록, 외부 라이브러리 연동 등을 처리한다.
• 한 번만 실행되며, 이후에는 업데이트 단계로 넘어간다.

---

1-4. 업데이트 단계 (shouldComponentUpdate)

• 불필요한 리렌더링을 막는 렌더링 필터 역할을 한다.
• props나 state가 변경될 때 실행되며, 렌더링 여부를 결정한다.
• 기본값은 true이며, false를 반환하면 렌더링을 막아 성능을 최적화할 수 있다.

---

1-5. 업데이트 완료 단계 (componentDidUpdate)

• 업데이트가 끝난 뒤 실행되는 후처리 공간이다.
• 새로운 props나 state 값에 따라 DOM 조작이나 데이터 재요청 등을 수행할 수 있다.
• 이미 화면이 갱신된 이후이므로, 렌더링 결과를 활용한 작업에 적합하다.

---

1-6. 제거 단계 (componentWillUnmount)

• 컴포넌트가 완전히 사라지기 전 마지막으로 실행되는 메서드이다.
• 더 이상 렌더링되지 않기 때문에 정리(clean-up) 작업을 수행하는 데 사용된다.
• 예를 들어, 이벤트 리스너 해제, 타이머 제거, API 연결 종료 등의 작업을 이곳에서 처리한다.

💡 정리

생성 (Mount) : 초기 세팅 및 렌더 준비
업데이트 (Update) : 변화 감지 및 렌더링 판단
제거 (Unmount) : 자원 정리 및 이벤트 해제