React 최적화
-
컴포넌트 최적화Programming/React 2020. 3. 23. 11:06
렌더링할 데이터가 많아지면, 그만큼 화면을 그리는데 시간이 많이 걸리게 된다. 리스트형 컴포넌트에서 100개이상의 컴포넌트를 렌더링 해야하고, 업데이트가 자주 발생한다면 꼭 필요한 작업이다. 개발자 도구로 소요되는 시간 확인하기 동작에 따른 걸리는 시간을 확인하기 위해서는, 크롬 개발자 도구 performance 탭에서 record Button 을 눌러 동작을 실행한 다음, 동작이 완료되었으면 Stop Button 을 눌러 기록된 화면에서 확인가능하다. 컴포넌트가 렌더링하는 상황 자신이 전달받은 props 가 변경될 때 자신의 state 가 바뀔때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수가 실행될 때 최적화 방법 1. 라이프사이클 함수 활용(shouldComponentUpdate) 함수형..