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()를 호출하면 안 됩니다. 컴포넌트 인스턴스가 마운트 해제되고 나면, 절대로 다시 마운트되지 않습니다.
'자기계발' 카테고리의 다른 글
SCSS 개념정리 (1) | 2024.09.20 |
---|---|
함수형 컴포넌트 생명주기 (0) | 2024.09.13 |
강아지정보 페이지 (0) | 2024.09.10 |
SPA & MPA 와 CSR & SSR 이란?? (0) | 2024.09.02 |
모던 자바스크립트 Deep Dive 13장 (0) | 2024.08.28 |