클래스 컴포넌트 생명주기

React 클래스형 컴포넌트에서는 컴포넌트가 특정 시점에 어떤 작업을 해야 할지 제어할 수 있는 생명주기 메서드가 제공됩니다. 이번 글에서는 componentDidMount, componentDidUpdate, componentWillUnmount 메서드가 각각 언제 실행되며, 어떤 용도로 사용되는지 알아보겠습니다.

---

componentDidMount이 실행되는 시점

componentDidMount() {
  // 초기 데이터 로드
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => this.setState({ data }));

  // 이벤트 리스너 등록
  window.addEventListener('resize', this.handleResize);
}

componentDidMount() 메서드는 컴포넌트가 마운트된 직후, 즉 DOM에 추가된 직후에 실행됩니다. 이 메서드는 컴포넌트가 처음 화면에 나타날 때 딱 한 번 호출되며, 초기 설정 작업을 수행하기에 적합합니다.

 

 

<사용 사례>

데이터 페칭: 컴포넌트가 마운트된 직후에 서버로부터 데이터를 가져와야 하는 경우, 네트워크 요청을 보내기에 적절한 위치입니다.

 

DOM 조작: 컴포넌트가 렌더링된 이후 DOM 노드를 조작해야 하는 초기화 작업도 이 메서드에서 수행할 수 있습니다.

 

이벤트 리스너 및 데이터 구독: 외부 서비스와의 데이터 구독을 설정하기에 적합하며, 필요한 경우 componentWillUnmount에서 구독 해제를 꼭 처리해야 합니다.

 

 <주의사항>

componentDidMount에서 setState()를 호출할 수 있지만, 이는 추가적인 렌더링을 유발합니다. 브라우저가 화면을 갱신하기 전에 이 작업이 이루어지기 때문에 사용자가 중간 과정을 볼 수는 없지만, 불필요한 성능 문제를 초래할 수 있어 주의가 필요합니다.

 

constructor()에서 초기 상태를 할당할 수 있는 경우 componentDidMount 대신 이를 활용하는 것이 좋습니다. 그러나 모달, 툴팁처럼 DOM 노드의 크기나 위치를 먼저 측정해야 하는 경우에는 componentDidMount에서 작업하는 것이 필요합니다.

 

---

componentDidUpdate이 실행되는 시점

componentDidUpdate(prevProps, prevState) {
  // 이전 props와 현재 props를 비교하여 특정 조건일 때만 실행
  if (prevProps.data !== this.props.data) {
    console.log('데이터가 업데이트되었습니다.');
  }
}

componentDidUpdate()는 갱신이 일어난 직후에 호출됩니다. 이 메서드는 최초 렌더링에서는 호출되지 않습니다.

컴포넌트가 갱신되었을 때 DOM을 조작하기 위하여 이 메서드를 활용하면 좋습니다. 또한, 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업도 이 메서드에서 이루어지면 됩니다 (가령, props가 변하지 않았다면 네트워크 요청을 보낼 필요가 없습니다).

componentDidUpdate() 메서드는 컴포넌트가 업데이트된 직후, 즉 상태(state)나 props가 변경되어 리렌더링이 완료된 후 호출됩니다. 하지만 컴포넌트가 처음 렌더링될 때는 실행되지 않습니다.

 

<사용 사례>

DOM 업데이트: 컴포넌트가 업데이트된 이후 DOM 조작이 필요할 때 사용할 수 있습니다.

네트워크 요청: 이전의 props와 현재의 props를 비교하여 필요할 때만 네트워크 요청을 보내도록 할 수 있습니다. 이렇게 하면 불필요한 네트워크 요청을 방지할 수 있습니다.

<주의사항>

componentDidUpdate에서 상태를 업데이트하려면 이전 상태와 비교하여 조건문을 사용해야

무한 루프를 방지할 수 있습니다.

---

componentWillUnMount이 실행되는 시점

componentWillUnmount() {
  // 이벤트 리스너 제거
  window.removeEventListener('resize', this.handleResize);

  // 타이머 제거
  clearTimeout(this.timer);
  
  // 데이터 구독 해제
  this.subscription.unsubscribe();
}

componentWillUnmount() 메서드는 컴포넌트가 DOM에서 제거되기 직전에 호출됩니다. 이 메서드는 컴포넌트가 사라지기 전에 꼭 필요한 정리 작업을 수행할 수 있는 곳입니다.

이 메서드 내에서 타이머 제거, 네트워크 요청 취소, componentDidMount() 내에서 생성된 구독 해제 등 필요한 모든 정리 작업을 수행해야 합니다.

이제 컴포넌트는 다시 렌더링되지 않으므로, componentWillUnmount() 내에서 setState()를 호출하면 안 됩니다. 컴포넌트 인스턴스가 마운트 해제되고 나면, 절대로 다시 마운트되지 않습니다.

 

 

참고문헌: https://ko.legacy.reactjs.org/docs/react-component.html#:~:text=componentDidMount()%20%EB%8A%94%20%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EA%B0%80,%EC%9D%84%20%EB%B3%B4%EB%82%B4%EA%B8%B0%20%EC%A0%81%EC%A0%88%ED%95%9C%20%EC%9C%84%EC%B9%98%EC%9E%85%EB%8B%88%EB%8B%A4.