컴포넌트 최적화

렌더링할 데이터가 많아지면, 그만큼 화면을 그리는데 시간이 많이 걸리게 된다.

리스트형 컴포넌트에서 100개이상의 컴포넌트를 렌더링 해야하고, 업데이트가 자주 발생한다면 꼭 필요한 작업이다.

 

 

개발자 도구로 소요되는 시간 확인하기

동작에 따른 걸리는 시간을 확인하기 위해서는, 크롬 개발자 도구 performance 탭에서 record Button 을 눌러 동작을 실행한 다음,

동작이 완료되었으면 Stop Button 을 눌러 기록된 화면에서 확인가능하다.

 

 

컴포넌트가 렌더링하는 상황

• 자신이 전달받은 props 가 변경될 때
• 자신의 state 가 바뀔때
• 부모 컴포넌트가 리렌더링될 때
• forceUpdate 함수가 실행될 때

 

 

최적화 방법

1. 라이프사이클 함수 활용(shouldComponentUpdate)

함수형 컴포넌트는 라이프사이클 함수를 사용할 수 없으므로  React.memo로 컴포넌트를 감싸준다.

 

 

2. useCallback 함수 활용

이벤트 핸들러 함수를 필요할때만 생성할 수 있도록 한다.

useCallback(생성하고 싶은 함수, 배열) 형태로 사용되는데, 2번째 인자에 [] 빈배열을 넣으면 

컴포넌트가 처음 렌더링 될때만 함수를 생성한다.

생성하고싶은 함수 내부에서 상태값에 의존하고 있는 경우, 2번째 인자에 포함해 줘야만 한다.

 

 

3. useState의 함수형 업데이트

이벤트 핸들러 함수안에서 상태를 갱신해야 할때,

새로운 상태를 파라미터로 넣는 대신, 상태 업데이트를 어떻게 할지 정의해주는 업데이트 함수를 넣는다.

 

 

4. useReducer 사용

상태 업데이트에 관한 로직을 컴포넌트 밖으로 분리할 수 있다.

 

 

5. react-virtualized

예를들어 리스트형태의 컴포넌트에서, 현재 보이지 않는 컴포넌트들은 렌더링 되지 않고 크기만 차지하게 해주는 라이브러리.