React | 렌더링 주기 - 생성 단계 (Mounting)

---

•  counstructor()
  • 컴포넌트 생성 시 가장 먼저 호출되는 첫번째 메서드
  • 초기 상태 설정 및 데이터 바인딩을 수행한다.
• state getDerivedStateFromProps()
  • props로부터 상태를 동기화 하고자 할 때 호출하는 메서드
• render()
  • 컴포넌트 UI 렌더링을 수행한다.
• componentDidMount()
  • 생명주기 메서드 중 하나.
  • 컴포넌트가 렌더링이 완료 되고 DOM에 마운트 되고난 이후에 실행되는 메서드
  • 초기 데이터 로딩 혹은 외부 데이터 요청 등의 비동기 작업을 실행한다.

---

 

import React, { Component } from 'React'

class MyComponent extends Component {
    constructor(props) {
        super(props);
     	// 초기 상태 설정
        this.state = { 
            count : 0,
        };
    }
    
    static getDerivedStateFromProps(nextProps, prevState) {
        // nextProps를 기반으로 상태를 업데이트
        if (nextProps.someValue !== prevState.someValue) {
            return {
            	someValue: nextProps.someValue,
            };
        }
        // 상태를 업데이트할 필요가 없다면 null을 반환
        return null;
    }
    
    render() {
        return (
            <div>
            	<p>{this.state.count}</p>
            </div>
        );
    }
    
    componentDidMount() {
        // 컴포넌트가 마운트된 후에 실행
        console.log("Component is mounted!"); 
    }
}

export default MyComponent;