수명주기 방법에 반응

react의 각 구성 요소는 출생에서 사망까지 생명을 삽니다.
구성 요소 수명 주기의 주요 세 단계는 다음과 같습니다.

Mounting : 컴포넌트의 탄생

Updating : 성분의 성장

Unmounting : 구성 요소의 사망

이러한 수명 주기에는 많은 방법이 있지만 주로 사용되는 네 가지 방법에 대해 이야기하고 있습니다. 이러한 메서드는 클래스 구성 요소에서만 사용할 수 있습니다.

세우다()

render() {
    console.log('rendering')
    return (
        <div>
          <div>Parent Component</div>
        </div>);

         }

다른 방법을 사용할 수 있지만 이 방법은 선언해야 합니다. 이 단계에서 구성 요소가 생성되어 DOM에 추가됩니다. 컴포넌트를 DOM으로 렌더링

componentDidMount()

componentDidMount()는 컴포넌트가 렌더링된 후에 호출됩니다.

class... {
constructor(props) {
    super();

    this.state = {
        color : ''
    }
}

    componentDidMount() {
        this.setState({
            color: 'red'
        })
    }

    render() {
        <h1>I, a header element, is born! My color is {this.state.color}</h1>
    }

}

componentdidupdate()

업데이트가 완료되면 이 메서드가 호출됩니다. 이전 소품, 이전 상태를 입력으로 받아들입니다. 이것은 부작용을 일으키고 업데이트된 소품에 대한 네트워크 요청을 만들기에 이상적인 위치입니다.

 componentDidUpdate(prevProps) {
        if(this.props.color !== prevProps.color) {
            console.log('component updating')
        }
    }

shouldComponentUpdate()

상태나 소품이 변경되면 구성 요소를 다시 렌더링해야 합니다. 그러나 이 동작을 제어할 수 있습니다.
이 수명 주기 메서드 내에서 부울(true 또는 false)을 반환하여 구성 요소가 다시 렌더링되는지 여부를 제어할 수 있습니다.

shouldComponentUpdate(){
    console.log('shouldComponentUpdate')
    return true
}

참조 링크

react js

log Rocket