[React] 리액트 입문 - 생명주기 함수 사용하기 (변경 과정)

생명주기 함수 2번째 시간 ~ 

 

[React] 리액트 입문 - 생명주기 함수 사용하기 (생성 과정)

앞서 우리는 생명주기 함수 중 '생성'하는 함수들을 살펴보고 왔다 

 

이번 포스팅에서는 생명주기 함수 중 '변경'하는 함수인 shouldComponentUpdate()함수에 대해서 알아보겠다 ! 

이 때 '변경'이란 props나 state의 변경을 말한다. 

---

App.js 

...
import LifecycleEx from './R008_LifecycleEx';
...

늘 그래왔듯 App.js에서 함수를 갈아끼워주자 ! 

 

R008_LifecycleEx.js

import React,{Component} from "react";

class R008_LifecycleEx extends Component{
    static getDerivedStateFromProps(props,state){
        console.log('2.getDerivedStateFromProps :'+props.prop_value);
        return {tmp_state : props.prop_value};
    }
    constructor(props){
        super(props);
        this.state = {};
        console.log('1. constructor Call');
    }
    
    componentDidMount(){
        console.log('4. componentDidMount Call');
        console.log('5. tmp_state: '+this.state.tmp_state);
        this.setState({tmp_state2: true})
        //setState() -> 변수의 선언과 초기화를 동시에 실행 
    }

    shouldComponentUpdate(props,state){
        console.log('6. shouldComponentUpdate Call / tmp_state2='
        + state.tmp_state2);
        return state.tmp_state2
    }

    render(){
        console.log('3. render Call');
        return (
            <h2>[THIS IS shouldComponentUpdate FUNCTION]</h2>
        )
    }


}

export default R008_LifecycleEx;

코드가 복잡해진다 .. 

 

우선 결과물은 다음과 같다 .

콘솔에서 함수가 나오는 순서를 살펴봐주세요 ~ ~ !

 

 

tmp_state2라는 state변수에는 불리언 타입의 true변수를 넣는다

setState()함수는 변수의 선언과 초기화를 동시에 실행한다. 

    componentDidMount(){
        console.log('4. componentDidMount Call');
        console.log('5. tmp_state: '+this.state.tmp_state);
        this.setState({tmp_state2: true})
        //요기 !
    }

componentDidMount()함수 안의 this.setState({tmp_state2: true})에서 state변경이 발생했다 ! 

변경이 발생한 곳에서 '변경'단계의 생명주기 함수인 shouldComponentUpdate()는 불리언 타입의 데이터를 반환한다. 이 때 return 값이 true인 경우 render()함수를 한번 더 호출한다. 

 

shouldComponentUpdate()함수의 반환 값에 따라 render() 함수를 재실행할 수 있다 ! 

이를 통해 props나 state변수가 변경될 때 화면을 리랜더링할 수 있다 ~ ! 

 

'소멸'단계 함수에는 컴포넌트가 DOM에서 제거될 때 호출한다. 

componentWillUnmount() 함수가 사용되며 더 자세히 알아보기 위해서는 공식문서 링크를 참고하도록 하자 

---

[요약]

 

지금까지 생명주기 함수들에 대해서 살펴보았다 ! 

리액트 생명주기 '변경'단계는 state나 props가 변경되는 상황을 말한다. 

변경단계의 생명주기 함수인 shouldComponentUpdate()는 함수의 반환 값에 따라 render()함수를 재실행할 수 있다. 

 

 

[출처 및 참고]

이정열 , 「초보자를 위한 리액트 200제」, 2021 

https://ko.reactjs.org/docs/react-component.html

https://adjh54.tistory.com/43

https://velog.io/@pier101/React-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0%ED%95%A8%EC%88%98%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4Life-cycle