React 생명주기 / React 클래스 컴포넌트 생명주기2 (Update & Unmount)

※ Update : 컴포넌트가 업데이트될 때 실행되는 함수들.

- 컴포넌트가 업데이트되는 경우

  1. pops값 변경

  2. state값 변경

  3. 부모 컴포넌트가 리렌더링될 때

  4. this.forceUpdate로 강제로 리렌더링 시킬 때

 

이 때 호출되는 함수 순서는 아래와 같습니다.

- getDerivedStateFromProps : 마운트 과정 시에도 호출되었던 함수입니다. 업데이트될 때에도 호출됩니다.

- shouldComponentUpdate : 컴포넌트의 리렌더링 진행 여부를 결정하는 함수입니다.

• true를 반환하면, 아래 함수들을 호출하여 업데이트에 따른 리렌더링을 진행합니다.
• false를 반환하면, 리렌더링을 하지 않고, 아래 함수도 실행되지 않습니다.

- render : 업데이트된 값을 사용하여 UI를 리렌더링합니다.

- getSnapshotBeforeUpdate : DOM객체에 변경된 요소를 반영하기 직전에 호출됩니다.

- componentDidUpdate : 업데이트 작업이 끝나고, 리렌더링된 후 호출되는 함수입니다.

 

* 업데이트 방법은 이전 게시물 참고(https://tadaiswhatever.tistory.com/17)

class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name : 'HyePark'
        }
        //console.log('constructor 호출');
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        console.log("getDerivedStateFromProps 호출");
        return null;
    }

    shouldComponentUpdate(nextprops, nextState) {
        console.log("sholudComponetUpdate 호출")
        console.log(nextprops, nextState);
        return nextprops != nextState;
    }

    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log("getSnapshotBeforeUpdate 호출")
        return null;
    }

    componentDidUpdate() {
        console.log("componentDidUpdate 호출");
    }

    render() {
        console.log("render 호출");
        return <div>Hello, {this.state.name}</div>;
    }
}

* getSnapshotBeforeUpdate(DOM객체에 변경된 요소를 반영하기 직전)여기서 componentDidUpdate(업데이트 작업이 끝나고, 리렌더링된 후)여기로 넘어갈 때 변경된 값 적용됩니다. 아래 이미지와 함께 확인 가능합니다.

*** shouldComponentUpdate 사용법은 추후 업데이트 예정

 

---

※ Unmount : 컴포넌트가 DOM에서 제거되는 것을 의미합니다.

- componentWillUnmount : Link 또는 Route를 통해 페이지 전환이 이루어지며 컴포넌트가 삭제될 때 실행.(현재 글 작성 시점 추측입니다. 개발할 때 확인 후 업데이트하도록 하겠습니다.

 

이전 글 : 2021.11.05 - [UI/React] - React 생명주기 / React 클래스 컴포넌트 생명주기1 (Mount)

React 생명주기 / React 클래스 컴포넌트 생명주기1 (Mount)

다음 글 : 2021.11.07 - [UI/React] - React Event 처리하기 / React 이벤트 처리하기

React Event 처리하기 / React 이벤트 처리하기