리액트 라이프사이클

모든 React 웹 앱은 구성 요소로 구성되며 이러한 구성 요소는 몇 가지 수명 주기 방법을 거칩니다.



이것들은:

초기화: React 구성 요소 수명 주기의 첫 번째 단계입니다. 이 단계에서 기본 상태 및 속성이 초기화됩니다.

마운팅: 마운팅은 구성 요소의 인스턴스가 만들어지고 DOM에 삽입되는 경우입니다.

업데이트: 업데이트는 구성 요소의 상태가 업데이트되고 구성 요소가 다시 렌더링되는 단계입니다.

마운트 해제: 이름에서 알 수 있듯이 마운트 해제는 구성 요소가 페이지에서 제거되는 구성 요소 수명 주기의 마지막 단계입니다.

초기화

constructor() {
        super()
        this.state = {
            show: false
        }
        console.log("Constructor ran, State has been intialized");
    }

설치

React에는 구성 요소를 마운트할 때 이 순서대로 호출되는 네 가지 내장 메서드가 있습니다.

생성자()

getDerivedStateFromProps()

렌더링()

componentDidMount()

세우다
render() 메서드는 클래스 구성 요소에서 유일하게 필요한 메서드입니다.

    render() {
        console.log("render ran");
        return (
            <div>
                <h1>Show and Hide Counter</h1>
                <p>{this.state.text}</p>
                <button onClick={this.click}>{this.state.show ? "Hide counter" : "Show Counter"}</button>
                {this.state.show && <Counter/>}
            </div>
        )
    }

render() 함수는 순수해야 합니다. 즉, 구성 요소 상태를 수정하지 않고 호출될 때마다 동일한 결과를 반환하며 브라우저와 직접 상호 작용하지 않습니다.

componentDidMount() 함수
구성 요소가 트리에 삽입된 직후(마운팅) 실행됩니다. 여기에서 구성 요소가 이미 DOM에 배치되어 있어야 하는 명령문을 실행합니다.

    componentDidMount() {
        setTimeout(() => {
          this.setState({text: "Text was mounted first and then it was changed after 5 sec"})
        }, 5000)
        console.log("component was mounted");
      }

5초 후



카운터 구성 요소 장착:
카운터 표시 버튼을 클릭하면 상태가 변경되었기 때문에 렌더링이 다시 실행됩니다.

    click = () => {
        if (this.state.show === false) {
            this.setState({
                show: true
            })
        }
        else{
            this.setState({
                show:false
            })
        }
    }

그런 다음 카운터 구성 요소가 렌더링되고 마운트됩니다.

업데이트 중

구성 요소의 상태 또는 소품이 변경될 때마다 구성 요소가 업데이트됩니다.

componentDidUpdate
componentDidUpdate 메서드는 구성 요소가 DOM에서 업데이트된 후에 호출됩니다.

여기에서 구성 요소를 증가시키면 렌더링 및 업데이트됩니다.

shouldComponentUpdate
shouldComponentUpdate() 메서드에서 React가 렌더링을 계속할지 여부를 지정하는 부울 값을 반환할 수 있습니다.

기본값은 참입니다.



증가 및 감소 버튼을 클릭하더라도 shouldComponentUpdate() 메서드가 Flase를 반환하기 때문에 구성 요소가 업데이트되지 않습니다.shouldComponentUpdate() {
return false;
}
App.js

import React, { Component } from 'react'
import Counter from './counter'


export class App extends Component {
    constructor() {
        super()
        this.state = {
            show: false,
            text:"See how the text will change"
        }
        console.log("Constructor ran, State has been intialized");
    }

    // componentDidMount() {
    //     setTimeout(() => {
    //       this.setState({text: "Text was mounted first and then it was changed after 5 sec"})
    //     }, 5000)
    //     console.log("component was mounted");
    //   }
    click = () => {
        if (this.state.show === false) {
            this.setState({
                show: true
            })
        }
        else{
            this.setState({
                show:false
            })
        }
    }




    render() {
        console.log("render ran");
        return (
            <div>
                <h1>Show and Hide Counter</h1>
                <p>{this.state.text}</p>
                <button onClick={this.click}>{this.state.show ? "Hide counter" : "Show Counter"}</button>
                {this.state.show && <Counter/>}
            </div>
        )
    }
}

export default App 

counter.js

import React, { Component } from 'react';

class Counter extends Component {
    constructor(){
        super()
        this.state={
            counter:0
        }

    }
    componentDidMount(){

        console.log("mounted the counter");
    }
    increment=()=>{
        this.setState(prevVal=>({
            counter:prevVal.counter-1
        }))
        console.log("button was clicked");
    }

    decrement=()=>{
        this.setState(prevVal=>({
            counter:prevVal.counter+1
        }))
        console.log("button was clicked");
    }

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

    componentDidUpdate(){
        console.log("component was updated");
    }

    render() {
        console.log("render ran for counter");
        return (
            <div>
                <button onClick={this.decrement}>+</button>
                <h6>{this.state.counter}</h6>
                <button onClick={this.increment}>-</button>
            </div>
        );
    }
}

export default Counter;

참조

https://reactjs.org/docs/reactcomponent.html#componentdidmount

https://www.w3schools.com/react/react_lifecycle.asp

https://www.cuelogic.com/blog/reactjs-lifecycle