[React] 리액트 생명주기(Lifecycle)

React 컴포넌트는 사람이 태어나고 죽는 것처럼, 화면에 생성되어 나타났다가 사라질 때까지의 과정을 거치며 이를 생명주기(Lifecycle)라고 부른다.

생명주기는 크게 마운트(생성), 업데이트(갱신), 언마운트(소멸) 세 가지 단계로 나뉜다. 과거에는 클래스형 컴포넌트의 전용 메서드를 사용했지만, 현재는 함수형 컴포넌트와 useEffect Hook을 사용하여 생명주기를 관리하는 것이 표준이다.

1. 마운트 (Mount) : 컴포넌트가 화면에 나타날 때

컴포넌트가 처음으로 호출되어 가상 DOM을 생성하고, 실제 브라우저 DOM에 삽입되는 과정을 뜻한다.

• 주요 작업: 초기 데이터 로딩을 위한 API 호출, 타이머 설정, 전역 이벤트 리스너 등록 등.
• 함수형 적용 (useEffect): 의존성 배열을 빈 배열 []로 설정하여 구현한다. (처음 한 번만 실행됨)

useEffect(() => {
  console.log("컴포넌트가 마운트됨!");
  // API 호출 등을 여기서 수행한다.
}, []);

2. 업데이트 (Update) : 컴포넌트가 다시 렌더링될 때

컴포넌트는 다음과 같은 상황에서 변화를 감지하고 업데이트(리렌더링)된다.
1. 부모로부터 받는 props가 변경될 때
2. 자신의 state가 변경될 때
3. 부모 컴포넌트가 렌더링될 때

• 주요 작업: 변경된 데이터에 맞춰 UI를 업데이트하거나, 특정 상태 변화에 따른 추가 로직(예: 검색어 변경 시 자동 검색 등) 실행.
• 함수형 적용 (useEffect): 의존성 배열에 변화를 감지하고자 하는 상태(state)나 속성(props)을 넣는다.

useEffect(() => {
  console.log("count 상태가 변경되어 업데이트됨!");
}, [count]); // count 값이 바뀔 때마다 내부 로직이 실행된다.

(참고: 의존성 배열을 아예 생략하면, 컴포넌트가 렌더링될 때마다 매번 실행된다.)

3. 언마운트 (Unmount) : 컴포넌트가 화면에서 사라질 때

컴포넌트가 더 이상 사용되지 않아 실제 DOM에서 완전히 제거되는 과정을 뜻한다. (예: 다른 페이지로 이동하거나, 조건부 렌더링으로 컴포넌트가 숨겨질 때)

• 주요 작업: 메모리 누수를 막기 위한 정리(Cleanup) 작업. 마운트 시 설정했던 타이머를 제거하거나 이벤트 리스너를 해제한다.
• 함수형 적용 (useEffect): useEffect 내부에서 정리(Cleanup) 함수를 반환(return)하여 구현한다.

useEffect(() => {
  const timer = setInterval(() => console.log("타이머 동작 중..."), 1000);

  // 언마운트 시점 (또는 다음 useEffect가 실행되기 직전)에 실행될 함수
  return () => {
    clearInterval(timer);
    console.log("컴포넌트 언마운트, 타이머 제거됨!");
  };
}, []);