[리액트를 다루는 기술] 11. 컴포넌트 리랜더링 최적화

1. 크롬 개발자 도구

- HighLight updaet 활성화

- 리랜더링 빈도에 따라 하늘색 -> 초록색 -> 노란색 -> 빨간색

2. 리랜더링

- shouldComponentUpdate()

3. 확인 예문

- const initialTodos = new Array(500).fill(0).map(

(foo,index) => ({ id:index, text: '일정${index}', done:false   })

)

4. 크롬 개발자 도구 Performance 탭 사용

- localhost:3000/?react_pref  

5. shouldComponentUpdate

==================================

shoudComponentUpdate( nextProps, nextState){

return this.props.done !== next.props.done

}

==================================

1) 컴포넌트 배열이 랜더링 되는 리스트 컴포넌트 일때

2) 리스트 컴포넌트 내부에 있는 아이템 컴포넌트 일떄

3) 하위 컴포넌트 개수가 많으며, 리랜더링 되지 말아야 할 상황에서도 리랜더링이 진행될때

"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"