[React] 3-11 PureComponent와 React.memo

인프런에 제로초님의 강의를 보고 정리한 내용입니다. 
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

 

렌더링 되는 것을 막는 두번째 방법

PureComponent

import React, {PureComponent} from 'react';

class Test extends PureComponent {
    state = {
        counter:0,
    };

    onClick = () => {
        this.setState({});
    };

    render(){
        console.log('렌더링', this.state);
        return (
            <div>
                <button onClick={this.onClick}>클릭</button>
            </div>
            )
    }
}

export default Test;

 

shouldComponentUpdate에서 return을 true로할지 false로 할지 자동으로 정해줌

state가 있으면 바뀌었는지 안바뀌었는지를 자동으로 판단함

단점이라면 객체나 배열같은 참조관계가이쓴 복잡한 구조의 경우에는 제대로 작동하지 않을 수 있다.

 

새로운 array가 나오면 아래처럼 배열을 복사해서 사용해주면 된다 

array: [...this.state.array, 1]
        // 기존array , 새로운 값

값을 바꾼것을 PureComponent가 알아채야함

 

state에 객체 구조를 안쓰는게 좋다!!

 

 

React.memo

 

훅스에서는 퓨어컴포넌트도 슈드컴포넌틍업데이트도 없다. 

그래서 존재하는것이 React.memo !