변경된 값만 렌더링 되도록 하기 shouldComponentUpdate()
react 강좌를 보며 예제를 따라해보고 하던 도중
라이프사이클이나 실행유무 어떤 메소드가 먼저 실행되는지
여기에 있는 this와 저기에 있는 this 가 무슨 차이가 있는지
알아보기 위해 여기저기 온갖곳에 console.log를 사용하여
개발자모드 화면에서 콘솔들을 보는 도중
특정값이 바뀌는데도 맵안에 들어가 있는 녀석들을 전부 하나씩
다시 렌더링 한다는걸 알게 되었다
역시나 그에 대한 해답도 강좌에 마지막 부분에 써있었는데
기록해놔야 겠다 싶어서 포스팅을 한다
1 2 3 4 | // 컴포넌트를 다시 렌더링 해야 할 지 말지 정의해준다 shouldComponentUpdate(nextProps, nextState){ return (JSON.stringify(nextProps) != JSON.stringify(this.props)); } | cs |
shouldComponentUpdate
요 함수가 다시 렌더링을 할지 말지 정의를 해주는데 리턴값을 보면
다음 props와 현재 props를 비교 해서 렌더링 할지 말지 정해주는 것 같다.
리턴이 true false로 가니 좀 더 다른 방법으로도 응용이 가능 할 것 같다.
ES6에는 생소한 문법들도 많고 평소 사용하던 방식과 너무나도 많이 달라
react를 공부하는데 어려움이 엄청나게 많다.
심지어 나는 bind나 this를 자주 사용하지 않았기 때문에 더 심한것 일수도...
현재 공부중인 리액트 예제들은
https://github.com/cheesu/react-tu
이곳에 올려놨으니 받아서 보는 것도 좋을 것이다.
왜냐하면 주석을 여기저기 엄청나게 달아놓고 console.log도 엄청나게 달아놨기 때문에
혹여나 관심있는 사람들은 받아보면 도움이 될 것 같다.
'Yame Programmer > react.js' 카테고리의 다른 글
| [react.js] react-router v4 browserHistory.push 오류 해결 방법 (0) | 2017.04.19 |
|---|---|
| [react.js] 함수형 컴포넌트 (0) | 2017.02.27 |
| [react.js] react Component Life Cycle API (0) | 2017.02.27 |
| [react.js] react.js 에서 Jquery 사용 하는 방법(unused import $ from jquery ) (1) | 2017.02.22 |
| [react.js] module not found error cannot resolve 'babel' in 해결 방법 (0) | 2017.02.22 |