[React JS] 리액트를 다루는 기술 - 컴포넌트 성능 최적화

 

리액트 프로젝트를 만들다보면, 수많은 데이터를 렌더링할 때 어플리케이션이 느려지는 경험을 할 수 있을 것이다.

우리는 성능이 단순히 느려졌다는 느낌 뿐만 아닌 정확히 몇 초가 걸리는지 확인하여 성능을 측정할 수 있다.

 

1. 크롬 개발자 도구를 통한 성능 모니터링

React DevTools를 이용해 정확히 몇 초가 걸리는지 확인하여 성능을 측정할 수 있다.

리액트 v17부터 리액트 전용 개발자 도구인 React Dev Tools를 사용해 성능 분석을 자세히 할 수 있다.

 

 

1) 해당 프로젝트의 개발자 도구를 열어 성능(Profile) 탭에 들어간다.

 

2) 성능 탭을 열면 좌측 상단에 녹화 버튼이 보일 것이다. 이 버튼을 누르고 프로젝트의 기능을 수행한 후, 다시 녹화 버튼을 눌러 기록을 중지한다.

 

3) 녹화 버튼을 두 번째 눌러 녹화가 중지되면 성능 분석 결과가 나올 것이다.

이 결과를 보면 총 시간으로 리렌더링에 소요된 시간을 알 수 있다.

 

또한 랭크 차트 아이콘을 눌러보면, 리렌더링된 컴포넌트를 오래 걸린 순으로 정렬하여 나열된 것을 볼 수 있다.

 

이렇게 개발자 도구를 통해 성능을 측정하여 얼마나 시간이 걸리는지, 관계없는 컴포넌트들이 리렌더링 된 것 등을 확인할 수 있다.

 

 

2. 느려지는 원인 분석

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

컴포넌트는 위와 같은 상황에서 리렌더링이 발생한다.

리렌더링이 되는 상황을 분석해 불필요한 리렌더링을 방지하여 성능을 최적화 시켜줘야 한다.

 

 

3. 컴포넌트 성능 최적화 방법 예시

 

< shouldComponentUpdate 라이프 사이클 이용 / React.memo 함수 사용 >

클래스형 컴포넌트의 경우, shouldComponentUpdate 라이프 사이클을 사용하거나, 함수 컴포넌트에서는 React.memo 함수를 사용해 성능을 최적화해 줄 수 있다.

구체적으로, React.memo 함수를 사용해 컴포넌트의 props가 바뀌지 않으면 리렌더링하지 않도록 설정하여 컴포넌트의 성능을 최적화시킨다.

 

export default React.memo(TodoListItem);

React.memo는 컴포넌트를 만들고 위와 같이 감싸주기만 하면 된다.

 

 

< useState의 함수형 업데이트 기능 사용 >

onToggle, onRemove와 같이 함수가 계속 만들어지는 상황을 방지하기 위한 방법이다.

useState를 호출할 때 반환하는 setter 함수를 사용할 때, 새로운 상태를 파라미터로 넣는 대신 상태 업데이트를 어떻게 할지 정의해주는 업데이트 함수를 넣을 수 있다.

 

이 과정을 함수형 업데이트라 한다.

 

 

< useReducer 사용 >

onToggle, onRemove와 같이 함수가 계속 만들어지는 상황을 방지하기 위한 방법이다.

useState의 함수형 업데이트 대신 useReducer를 사용해도 된다.

 

useReducer를 사용할 때는 원래 두번째 파라미터에 초기 상태를 넣어줘야 한다.

이 대신 두 번째 파라미터에 undefined를 넣고, 세 번째 파라미터에 초기 상태를 만들어주는 함수를 넣어준다.

그러면 컴포넌트가 맨 처음 렌더링될 때만 초기 상태를 만들어주는 함수를 호출하게 될 것이다.

 

 

 

4. react-virtualized를 사용한 렌더링 최적화

react-virtualized를 사용하면 여러 데이터를 보여주는 컴포넌트에서 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하도록 할 수 있다.

이때 스크롤이 되면, 해당 스크롤 위치에서 보여 주어야 할 컴포넌트를 자동으로 렌더링하게 된다.

react-virtualized를 사용하면 보이는 부분만 렌더링하여 낭비되는 자원을 아낄 수 있다.

 

react-virtualized를 설치하여 각 데이터의 크기를 알아내 props를 설정하고 필요한 함수들을 만들면서 최적화 과정을 수행할 수 있다.

npm install react-virtualized