React (4) PureComponent

■ PureComponent란?

- class형 컴포넌트는 Component와 PureComponent가 있다.

- 두 함수 모두 props와 state의 변경에 따라 render() 함수를 호출하는데 호출하는 기준이 약간 다르다.

Component	PureComponent
setState함수 호출 시 내부적으로 변경하고자 하는 state의 값이 같더라도 항상 render() 함수를 호출한다.	바꿀 값 자체를 실제로 비교해서 값이 동일할 경우 변경되지 않았다고 간주하고 render() 함수를 호출하지 않는다.

- Component와 비교해봤을 때 불필요한 화면변환이 발생하지 않으므로 약간이지만 페이지 성능을 향상시킬 수 있다.

 

● PureComponent

class Pure extends PureComponent{

    constructor(props){
        super(props);
        this.state = {
            StateString : 'react',
            StateArray : ['react'],
            StateObject : {react : 'react'}
        }
    }

    stateChange = (flag) => {
        if(flag == 'string') {
            this.setState({StateString : 'react2 '}); // render 호출 x
        } else if(flag == 'array') {
            this.setState({StateArray : ['react']}); // render 호출 o
        } else {
            this.setState({StateObject : {react : 'react'}}) // render 호출 o
        }
    }

    /*
        객체의 경우 변수값이 아니라 객체의 주소값을 통해 비교를 수행하기 때문에 기존 state에 담겨있던
        StateObject나 StateArray는 서로 완전 다른 값이라고 판단하고 render메서드가 호출된다.
    */

    render(){
        console.log("render 호출됨");
        return(
            <div style={{padding:"0px"}}>
                <button onClick={ () => this.stateChange('string')}>클릭</button> 
                <button onClick={ () => this.stateChange('array')}>클릭</button> 
                <button onClick={ () => this.stateChange('object')}>클릭</button> <br></br>
                state :: StateString : {this.state.StateString} <br></br>
                state :: StateArray : {this.state.StateArray.toString()} <br></br>
                state :: StateObject : {JSON.stringify(this.state.StateObject)} <br></br>
            </div>
        )
    }
 
}

 

● shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState){
        // return !shallowEqualArrays(this.state.StateArray, nextState.StateArray)
        return !shallowEqualObjects(this.state.StateObject, nextState.StateObject)
    }

- shallow-equal패키지 안에는 PureComponent에서 state값의 변경을 비교하는 것과 동일한 기능을 수행하는 함수를 제공해준다.

1. shallowEqualArray() : 배열은 "값"만을 가지고 비교를 수행한다. 
                                       내부의 값이 모두 일치하면 true, 일치하지 않으면 false를 반환한다.
2. shallowEqualObject() : 객체를 비교할 때 동일한 키의 '값'만을 가지고 비교를 수행한다.