[react.js] 변경된 값만 렌더링 되도록 하기 shouldComponentUpdate()

변경된 값만 렌더링 되도록 하기 shouldComponentUpdate()

react 강좌를 보며 예제를 따라해보고 하던 도중

라이프사이클이나 실행유무 어떤 메소드가 먼저 실행되는지

여기에 있는 this와 저기에 있는 this 가 무슨 차이가 있는지

알아보기 위해 여기저기 온갖곳에 console.log를 사용하여

개발자모드 화면에서 콘솔들을 보는 도중

특정값이 바뀌는데도 맵안에 들어가 있는 녀석들을 전부 하나씩

다시 렌더링 한다는걸 알게 되었다

역시나 그에 대한 해답도 강좌에 마지막 부분에 써있었는데

기록해놔야 겠다 싶어서 포스팅을 한다

// 컴포넌트를 다시 렌더링 해야 할 지 말지 정의해준다
    shouldComponentUpdate(nextProps, nextState){
        return (JSON.stringify(nextProps) != JSON.stringify(this.props));
    }

shouldComponentUpdate

요 함수가 다시 렌더링을 할지 말지 정의를 해주는데 리턴값을 보면

다음 props와 현재 props를 비교 해서 렌더링 할지 말지 정해주는 것 같다.

리턴이 true false로 가니 좀 더 다른 방법으로도 응용이 가능 할 것 같다.

ES6에는 생소한 문법들도 많고 평소 사용하던 방식과 너무나도 많이 달라 

react를 공부하는데 어려움이 엄청나게 많다. 

심지어 나는 bind나 this를 자주 사용하지 않았기 때문에 더 심한것 일수도...

현재 공부중인 리액트 예제들은

https://github.com/cheesu/react-tu

이곳에 올려놨으니 받아서 보는 것도 좋을 것이다.

왜냐하면 주석을 여기저기 엄청나게 달아놓고 console.log도 엄청나게 달아놨기 때문에 

혹여나 관심있는 사람들은 받아보면 도움이 될 것 같다.