React 컴포넌트 라이프사이클 메서드 정리

문제 상황

대시보드 페이지에서 실시간 데이터를 폴링하는 기능을 구현했는데, 페이지를 벗어나도 setInterval이 계속 실행되는 문제가 있었다. 브라우저 콘솔에 에러가 계속 쌓이고 메모리 사용량도 증가했다.

원인

componentDidMount에서 setInterval을 시작했지만, componentWillUnmount에서 정리하지 않았다.

class Dashboard extends React.Component {
  componentDidMount() {
    this.interval = setInterval(() => {
      this.fetchData();
    }, 5000);
  }

  componentWillUnmount() {
    // 이 부분이 빠져있었다
    clearInterval(this.interval);
  }

  render() {
    return <div>{/* ... */}</div>;
  }
}

라이프사이클 메서드 정리

componentDidMount: 컴포넌트가 마운트된 직후. API 호출, 이벤트 리스너 등록

componentWillUnmount: 컴포넌트가 언마운트되기 직전. 타이머 정리, 이벤트 리스너 해제, API 요청 취소

componentDidUpdate(prevProps, prevState): props나 state 변경 후. 이전 값과 비교해 조건부 실행 필요

shouldComponentUpdate(nextProps, nextState): 리렌더링 최적화. 불필요한 렌더링 방지

결론

외부 리소스를 사용할 때는 항상 정리 로직을 함께 작성해야 한다. 특히 setInterval, addEventListener, fetch 등은 componentWillUnmount에서 반드시 정리했다.