[React] 컴포넌트 생명주기(Lifecycle)

1. 마운트 (Mount): 컴포넌트의 생성

마운트는 컴포넌트 인스턴스가 생성되어 실제 DOM(Document Object Model)에 삽입될 때의 과정이다. 즉, 컴포넌트가 '탄생'하는 순간이다. 이 단계에서는 주로 초기 데이터를 불러오거나, 이벤트 리스너를 등록하는 등의 초기화 작업을 수행한다.

클래스 컴포넌트 예시: componentDidMount

componentDidMount 메소드는 컴포넌트가 렌더링된 직후에 호출된다. API를 호출하여 서버로부터 데이터를 가져와 state를 업데이트하기에 가장 적합한 위치이다.

// javascript
componentDidMount() {
  // 컴포넌트가 마운트된 후 API 호출
  fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => this.setState({ data }));
}

함수형 컴포넌트 예시: useEffect

함수형 컴포넌트에서는 useEffect Hook을 사용하여 마운트 시점의 작업을 처리한다. 두 번째 인자로 빈 배열([])을 전달하면, 이 Hook은 컴포넌트가 처음 렌더링될 때 한 번만 실행되어 componentDidMount와 동일한 역할을 한다.

// jsx
useEffect(() => {
  // 컴포넌트가 생성되어 DOM에 삽입될 때 실행
  console.log("컴포넌트가 마운트 되었습니다.");

  // return 함수는 언마운트 시점에 실행된다 (아래 언마운트 섹션에서 설명)
  return () => {
    console.log("컴포넌트가 언마운트 됩니다.");
  };
}, []); // 의존성 배열이 비어있으므로 마운트 시에만 실행

---

2. 업데이트 (Update): 변화에 대한 반응

업데이트는 컴포넌트의 props나 state가 변경될 때 발생한다. 변경된 내용을 기반으로 컴포넌트는 다시 렌더링되어 화면을 최신 상태로 유지한다.

클래스 컴포넌트 예시: componentDidUpdate

componentDidUpdate 메소드는 컴포넌트가 업데이트된 직후에 호출된다. 이 메소드는 prevProps와 prevState를 인자로 받아, 업데이트 이전의 값과 현재 값을 비교하여 특정 조건에서만 API 호출과 같은 부수 효과(Side Effect)를 실행할 수 있다. 조건 없이 작업을 수행하면 무한 루프에 빠질 수 있으므로 주의해야 한다.

componentDidUpdate(prevProps, prevState) {
  // 이전 props.id와 현재 props.id가 다를 경우에만 데이터를 새로 가져온다.
  if (this.props.id !== prevProps.id) {
    this.fetchData(this.props.id);
  }
}

함수형 컴포넌트 예시: useEffect

useEffect의 두 번째 인자인 의존성 배열에 특정 props나 state를 전달하면, 해당 값이 변경될 때마다 첫 번째 인자인 콜백 함수가 다시 실행된다. 이는 componentDidUpdate와 유사한 역할을 한다.

useEffect(() => {
  // count state가 변경될 때마다 이 부분이 실행된다.
  console.log("count의 값이 변경되었습니다.", count);
}, [count]); // 의존성 배열에 'count'를 지정

---

3. 언마운트 (Unmount): 컴포넌트의 제거

언마운트는 컴포넌트가 DOM에서 제거될 때 발생한다. 컴포넌트가 '소멸'하는 마지막 단계로, 이 단계에서는 등록했던 이벤트 리스너를 제거하거나 setTimeout, setInterval 등을 정리하여 메모리 누수(Memory Leak)를 방지하는 중요한 작업을 수행한다.

클래스 컴포넌트 예시: componentWillUnmount

componentWillUnmount 메소드는 컴포넌트가 DOM에서 제거되기 직전에 호출된다. 여기서 모든 정리(Cleanup) 작업을 수행해야 한다.

componentWillUnmount() {
  // 컴포넌트가 사라지기 전에 타이머를 제거한다.
  clearTimeout(this.timer);
}

함수형 컴포넌트 예시: useEffect의 반환 함수(Cleanup)

useEffect는 함수를 반환할 수 있는데, 이 함수를 정리(Cleanup) 함수라고 부른다. 이 함수는 컴포넌트가 언마운트되기 직전에 호출된다. 또한, 의존성 배열에 값이 있어 업데이트가 발생할 경우, 다음 이펙트 함수가 실행되기 직전에 이전 이펙트를 정리하기 위해 호출되기도 한다.

useEffect(() => {
  // 1초 뒤에 작업을 실행하는 타이머 설정
  const timer = setTimeout(() => console.log('작업 실행'), 1000);

  // 컴포넌트가 언마운트될 때 반환된 함수가 실행되어 타이머를 제거한다.
  return () => clearTimeout(timer);
}, []); // 의존성 배열이 비어있으므로 언마운트 시에만 정리 함수가 실행

결론

컴포넌트 생명주기는 React 애플리케이션의 동작을 제어하는 핵심 개념이다.

마운트 시점에는 데이터를 초기화하고,
업데이트 시점에는 변화에 반응하며,
언마운트 시점에는 사용했던 리소스를 깨끗하게 정리한다.

즉 클래스형 컴포넌트와 useEffect Hook을 이용한 함수형 컴포넌트 모두에서 이 생명주기 개념을 잘 활용하면, 예측 가능하고 안정적인 애플리케이션을 만들 수 있다.