목차
개발 도구(Profiler)
리액트 개발 도구에 내장된 프로파일러(Profiler) 탭이 있다. 프로파일러는 리액트 앱의 실제 렌더링 성능을 측정하고 어떤 컴포넌트가 얼마나 자주, 왜 렌더링되는지 시각적으로 분석할 수 있게 도와준다.
- Flame Chart: 컴포넌트 계층 구조와 각 컴포넌트의 렌더링 시간을 시각적으로 보여준다. 상위 컴포넌트에서 하위 컴포넌트로 내려가는 구조다.
- Rank Chart: 렌더링에 가장 많은 시간이 걸린 컴포넌트를 순서대로 보여준다. 선능 병목 지점 파알에 유용하다.
- Timeline: 앱의 렌더링 이벤트를 시간 순으로 보여준다. 각 이벤트의 상세 정보(시작, 끝, 소요 시간 등)를 확인할 수 있다.
- 렌더링 원인 분석: 각 커밋(렌더링)의 원인과 실제로 어떤 값이 바뀌었는지까지 추적할 수 있다.
- 성능 시뮬레이션: 개발 도구 성능(performance) 탭에서 CPU 쓰로틀링 등 느린 기기 환경을 에뮬레이션하여 테스트할 수 있다.
- 커밋 필터링: 특정 시간 이하의 커밋을 숨겨서 느린 렌더링만 집중적으로 분석할 수 있다.
컴포넌트 메모이제이션
리액트 컴포넌트는 상태 또는 속성이 변경될 때 다시 렌더링된다. 상위 컴포넌트가 변경되어 다시 렌더링될 때 자식 컴포넌트도 불필요하게 렌더링된다. 작은 컴포넌트는 큰 문제가 발생하지 않지만, 복잡한 하위 컴포넌트가 많을 때는 성능 저하 문제가 발생한다.
이럴 때 사용할 수 있는 것이 컴포넌트 메모화(memoization)다. React.memo 고차 함수를 사용하면 속성이 변경되지 않을 때에 한해 컴포넌트 리렌더링을 막을 수 있다. 이 고차 함수는 전달된 컴포넌트의 속성을 얕은 비교로 변경 여부를 감지한다. 필요하다면 두 번째 인수로 커스텀 비교 함수를 전달해 더 정교하게 비교할 수도 있다.
import { memo } from 'react'
function Component(props) {
return (...)
}
export default memo(Component)
대용량 데이터 렌더링
10,000개 이상의 대용량 데이터가 포함된 목록을 렌더링하거나 검색을 위해 타이핑할 때를 생각해 보자. 심각한 지연이 발생할 것이다. 타이핑할 때 지연이 발생하는 이유는 상태를 변경할 때마다 전체 목록을 다시 렌더링하기 때문이다.
렌더링 지연 속도를 개선하기 위한 방법은 다음과 같다.
| 방법 | 설명 | 장점 | 단점 |
| 메모이제이션 | 가장 기본적이면서도 효과적인 최적화 방법이다. | 간단한 구현으로 타이핑 지연 문제를 해결한다. | 초기 로딩할 때 모든 데이터를 DOM 요소로 렌더링해야 하기 때문에 느리다. |
| 페이지네이션 | 사용자 친화적인 방식으로, 데이터를 나누어 표시한다. | 사용자 경험이 좋고, 성능이 우수하다. | 전체 데이터를 한 번에 볼 수 없다. |
| 인피니트 스크롤 | 소셜 미디어처럼 스크롤하면서 점진적으로 데이터를 로드한다. | 점진적 로딩 방법으로 자연스러운 사용자 경험을 이끌어낸다. | 끝까지 스크롤하면 결국 모든 DOM 요소가 존재하게 되어 성능 문제가 발생할 수 있다. |
위와 같은 방법 외에 버추얼라이제이션(가상화)을 적용할 수 있다. 화면에 보이는 항목만 렌더링하는 가장 효율적인 방법이다. 화면에 보이는 항목만 실제로 렌더링하여 성능을 극적으로 개선할 수 있다. TanStackVirtual은 가벼우면서도 강력한 버추얼라이제이션 라이브러리다. @tanstack/react-virtual 패키지를 프로젝트에 설치하여 useVirtualizer 훅을 사용해 버추얼라이제이션 목록을 렌더링할 수 있다.
오늘 하루를 돌아보며
프로파일러 도구로 성능을 분석할 때 유용한 팁이다.
- 플레임 그래프의 가장 깊은 곳부터 원인을 찾는다.
- 불필요한 리렌더링이 많이 발생한다고 반드시 최적화가 필요한 것은 아니다! 리액트 앱의 리렌더링은 무시해도 될 정도로 빠르기 때문이다. 실제 느려지는 부분에만 집중한다.
- 초기 화면 로딩, 대량 데이터 처리, 복잡한 UI 등에서 프로파일러를 활용해 병목 구간을 찾는다.
- 느린 컴퓨터나 기기 환경도 꼭 시뮬레이션한다. 실제 사용자 경험과 개발 환경은 다를 수 있기 떄문이다.
대용량 데이터 렌더링 성능 최적화는 단계적 접근이 중요하다. 먼제 메모이제이션으로 불필요한 리렌더링을 방지하고, 더 나은 사용자 경험을 위해 페이지네이션을 적용한다. 정말 필요한 경우에만 가상화 적용을 교려해야 한다.
