Component , PureComponent

Component은 프로퍼티와 , state , 생명주기 함수가 들어가 있는 컴포넌트입니다. 

 

Component같은 경우에는 데이터가 변경된 경우에 항상 render()를 호출을 합니다.

하지만 PureComponent같은 경우에서는 shouldComponentUpdate() 함수에서 얕은 비교를 통해서 데이터가 변경된 경우에 render() 함수를 호출합니다.

 

PureComponent를 통해서 불변 변수를 활용해서 숙서 정보가 바뀔 때마다 새 배열을 할당하는 방식으로 비교 속도를 최적화를 통해서 성능을 높일수가 있습니다.

 

간단하게 아래와 같이 테스트를 해볼수가 있습니다.

import React from 'react'
class MyComponent extends React.Component {
    
    componentDidUpdate() {
        console.log("ChildComponent componentDidUpdate")
    }

    render() {
        return (
            <></>
        )
    }
}

class MyPureComponent extends React.PureComponent {
    
    componentDidUpdate() {
        console.log("ChildPureComponent componentDidUpdate")
    }

    render() {
        return (
            <></>
        )
    }
}

class MainComponent extends React.PureComponent {
    constructor(props) {
        super(props)
        
        this.state = {
            message : ""
        }
    }

    clickEvent() {
        this.setState(prevState => ({
            message : `${new Date().getTime()}`
        }))
    }


    render() {
        return (
            <div className="main">
                <input type="button" onClick={this.clickEvent.bind(this)}/>
                <MyComponent />
                <MyPureComponent/>
            </div>
        )
    }
}

export default MainComponent

클릭을 했을때 결과값은 ChildComponent componentDidUpdate만 노출이 되는것을 알수가 있습니다.