React | 생명 주기 메서드(Lifecyle Methods)

---

생명 주기 메서드는 컴포넌트가 특정 상태에 도달했을 때 자동으로 호출된다.

ex) 컴포넌트 생성, 업데이트, 제거 등등...

React의 주요 생명 주기 메서드는 다음과 같다.

1. componentDidMount()

• 컴포넌트가 렌더린 된 직후에 호출되는 메서드이다.
• 주로 초기 데이터 로딩, 외부 라이브러리 초기화 등에 사용된다.

import React, { Component } from 'react';

class MyComponent extends Component {
    constructor(props) {
        super(props);
    }
    
    componentDidMount() {
    	// 초기 데이터 로딩
    }
    
    render() {
    	return (<h1>MyComponent</h1>);
    }
}

export default MyComponent;

---

2. shouldComponentUpdate(nextProps, nextState)

• 컴포넌트가 업데이트 되기 전에 호출되는 메서드이다.
• 리렌더링(re-rendering) 여부를 결정한다.
  • true 반환 : 리렌더링 실행
  • false 반환 : 리렌더링 실행 X
• state가 변경됨에 따라 컴포넌트가 렌더링되는데, 특정 조건에 일치할때만 렌더링 되도록 제어 할 수 있다.

import React, { Component } from 'react';

class MyComponent extends Component {
    constructor(props) {
        super(props);
    }
    
    shouldComponentUpdate(nextProps, nextState) {
    	if (this.props.someValue !== nextProps.someValue) {
        	return true; // 리렌더링 실행
        }
        if (nextState.count % 2 === 0 ) {
        	return true; // 리렌더링 실행
        }
        return false; // 리렌더링 실행 X
    }
    
    render() {
    	return (<h1>MyComponent</h1>);
    }
}

export default MyComponent;

---

3. componentDidUpdate(prevProps, prevState)

• 컴포넌트가 업데이트 된 후에 호출되는 메서드이다.
• 이전 속성(prevProps)과 이전 상태(prevState)에 접근할 수 있다.

import React, { Component } from 'react';

class MyComponent extends Component {
    constructor(props) {
        super(props);
    }
    
    componentDidUpdate(prevProps) {
    	// 이전 속성과 현재 속성 비교를 통해 추가 동작 실행 여부를 결정 가능
    	if (prevProsp.someValue !== this.props.someValue) {
        	// 추가 동작 실행
        }
    }
    
    render() {
    	return (<h1>MyComponent</h1>);
    }
}

export default MyComponent;

---

4.componentWillUnmount()

• 컴포넌트가 제거되기 전에 호출되는 메서드이다.
• 주로 리소스 해제, 이벤트 리스너 제거 등의 정리 작업을 수행할 때 사용된다.

import React, { Component } from 'react';

class MyComponent extends Component {
    constructor(props) {
        super(props);
    }
    
    componentDidMount() {
    	window.addEventListener('resize', this.handleResize); // 컴포넌트 마운트된 후 이벤트 리스너 등록
  	}

  	componentWillUnmount() {
    	window.removeEventListener('resize', this.handleResize); // 컴포넌트 제거 전에 이벤트 리스너 제거
  	}

  	handleResize() {
    	console.log('Window resized!'); // 창 크기가 변경될 때 호출되는 이벤트 핸들러
  	}
    
    render() {
    	return (<h1>MyComponent</h1>);
    }
}

export default MyComponent;