React 구성 요소의 수명 주기

구성 요소는 반응 앱의 기본 구성 요소라는 사실을 모두 잘 알고 있으므로 반응 앱 과정에서 구성 요소의 수명 주기를 이해하는 것이 중요해집니다.

React 라이프 사이클의 단계

구성 요소의 수명 주기는 구성 요소의 여러 단계에서 호출되는 네 단계로 나뉩니다. 이러한 단계는 다음과 같습니다.

초기화

마운팅

업데이트

마운트 해제

초기화부터 시작하여 이러한 각 단계에 대해 자세히 살펴보겠습니다.

초기화

구성 요소가 탄생하는 단계입니다. 이 단계에서는 개발자가 생성자에서 수행되는 구성 요소의 소품 및 초기 상태를 정의해야 합니다.

constructor(props) {
        // Calling parent class constructor
        super(props);

        // Setting initial state
        this.state = {
            clickCount: 0
        };
    }

설치

이 단계에서 구성 요소의 인스턴스가 생성되어 DOM에 삽입됩니다. 다음과 같은 방법으로 구성됩니다.

componentDidMount(): 이 메소드는 구성 요소가 DOM으로 렌더링된 직후에 호출됩니다. 이 메서드는 렌더링 함수가 처음 실행된 직후에 호출됩니다.

render(): 이 메서드는 모든 구성 요소에 정의되어 있습니다. 단일 루트 HTML 노드 요소를 반환하는 역할을 합니다. 아무 것도 렌더링하지 않으려면 null 또는 false 값을 반환할 수 있습니다.

업데이트

일부 사용자 이벤트에 의해 필요한 경우 구성 요소의 상태 및 속성이 변경되는 단계입니다. 이 단계의 주요 목표는 구성 요소가 최신 버전을 표시하는지 확인하는 것입니다. 다음은 이 단계에서 사용되는 방법입니다.

shouldComponentUpdate(): 구성 요소가 DOM에 대한 변경/업데이트를 결정할 때 호출됩니다. 구성 요소의 자체 업데이트 동작을 제어할 수 있습니다. 이 메서드가 true를 반환하면 구성 요소가 업데이트됩니다. 그렇지 않으면 구성 요소가 업데이트를 건너뜁니다.

componentDidUpdate(): 이 메서드는 구성 요소가 다시 렌더링된 후 호출됩니다. 즉, 이 메서드는 업데이트 후 렌더링 함수가 실행된 후 한 번 호출됩니다. 이 메서드는 초기 렌더링에 대해 호출되지 않습니다.

마운트 해제

반응 구성 요소 수명 주기의 마지막 단계입니다. 구성 요소 인스턴스가 소멸되고 DOM에서 마운트 해제될 때 호출됩니다. 이 단계에는 하나의 방법만 포함되며 아래에 제공됩니다.

componentWillUnmount(): 이 메서드는 구성 요소가 페이지에서 완전히 제거될 때 호출되며 수명 주기의 끝을 보여줍니다.

예시

다음은 반응 구성 요소의 수명 주기를 이해하기 위한 코드 예제입니다.

export default class App extends Component {
    constructor(props) {
        // Calling parent class constructor
        super(props);

        // Settings initial state
        this.state = {
            clickCount: 0
        };

        console.log('Constructor called'); 
    }

    componentDidUpdate(){
        console.log("componentDidUpdate called"); 
    }

    componentDidMount(){
        console.log("componentDidMount called"); 
    }

    shouldComponentUpdate(){
        console.log("shouldComponentUpdate called"); 
        return false; 
    }

    handleClick = () => {
        let {clickCount} = this.state; 

        this.setState({clickCount: clickCount + 1}); 
    }

    render() {
        console.log("render called"); 

        return (
            <>
                <Header brandName="Xorg"/> 
                <Button handleClick={this.handleClick} displayCount={this.state.clickCount}/> 
            </>
        );
    }
}

함수가 처음에 호출되는 순서입니다.



구성 요소의 상태 업데이트 후 함수가 호출되는 순서입니다.