성능 최적화

성능 최적화를 고민하기전 일단 편하게 코딩 먼저 하자! 성능 이슈가 생기면 그때 고민해도 늦지 않는다!

리액트에서 가장많은 cpu를 사용하는 것은 렌더링이며, 렌더링을 효율적으로 하는 것은 성능 최적화에 큰 영향을 준다. 렌더링 될 때 = state, props가 변경되었을 때 인데, 결국 state를 어떻게 관리하느냐와 연관이 있다.

1. state 불변 객체로 관리

2. render()에서 새로운 객체 만들지 않기: 매번 렌더 될 때마다 객체 생성됨

   • props에 값 직접 전달. (예:<Compo options={['a','b','c']} /> 따로 선언후 지정하기 추천)
   • 이벤트 함수 직접구현. (예: <Compo onClick={()=>{이벤트로직}} /> 이벤트함수는 따로 로직구현하고 호출걸기)

3. 메모이제이션(memoizaition) 사용

   • 컴퓨터 프로그램이 같은 계산을 반복할 때, 이전 계산값을 메모리에 저장하여 반복수행 제거, 실행속도를 빠르게 하는 기술
   • React.memo()사용. (ToastUI - React.memo() 현명하게 사용하기)
   • Lodash 패키지 사용import memoize from 'lodash/memoize'

4. 성능 최적화 도구 사용하기(react-user-timing-api)

   • 브라우저 확장도구 : 리액트 개발자 도구 > highlight-updates 옵션 사용 : 렌더링되는 구역에 불들어온다
   • 크롬 브라우저 확장도구 : performance 메뉴 : 렌더링시 많은 계산량 차지하는 컴포넌트 체크

React.PureComponent 또는 React.memo 함수로 컴포넌트를 만들면 props/state가 변경되었을 때만 렌더링된다. (shouldComponentUpdate() life-cycle 사용)