14장: 리액트 앱 성능 최적화
리액트 성능 최적화의 본질과 실전 전략
리액트로 어느 정도 웹 앱을 만들다 보면, 갑자기 화면이 느려지거나 쓸데없는 렌더링이 반복될 때가 있습니다. 사용자에게 더욱 쾌적한 경험을 제공하고, 확장성 있는 애플리케이션을 구축하려면 “성능 최적화”를 반드시 고민해야 합니다.
왜 리액트에서 성능을 신경 써야 할까?
리액트 자체는 가상 돔과 효율적인 재조정(reconciliation) 덕분에 기본적으로 빠릅니다. 그러나 앱의 규모가 커지고 상태와 컴포넌트가 많아질수록, 불필요한 렌더링이나 데이터 처리 지연이 누적되어 전체 UX를 해칠 수 있습니다. 사용자들은 즉각 반응하는 UI를 기대하고, 잠깐의 지체로도 서비스에 대한 신뢰가 떨어질 수 있습니다.
불필요한 렌더링: 진짜 문제를 파악하라
리액트의 화면 갱신 흐름은 크게 트리거(상태나 props 변화), 렌더 단계(가상 돔 생성 및 비교), 커밋 단계(실제 돔 반영)로 이어집니다. 이 과정에서 상태 변화와 관계없는 컴포넌트까지 의미 없이 다시 그려진다면 성능 저하가 발생합니다. 특히 리스트 항목이 많은 화면, 복잡한 부모-자식 구조에서는 이런 비효율이 체감될 수 있습니다.
성능 최적화, 꼭 기억해야 할 실전 테크닉
React.memo 활용: 함수형 컴포넌트를 React.memo로 감싸면, 입력(props)이 바뀌지 않는 한 다시 그려지지 않습니다. 단, 무조건 적용하기보다는, 실제 재렌더가 많이 발생하는 곳 위주로 사용해야 최적의 효과를 볼 수 있습니다.
useMemo와 useCallback: 값 계산이나 함수 정의가 비용이 크거나 자주 재생성될 때는 useMemo와 useCallback이 유용합니다. useMemo는 연산 결과를 기억하고, useCallback은 함수를 재사용해 불필요한 연산과 불필요한 하위 컴포넌트 렌더링을 방지합니다. 하지만 데이터가 자주 바뀌지 않고 정말 비용이 클 때만 사용하는 것이 바람직합니다.
불필요한 상태 최소화: props만으로 표현 가능한 값까지 state로 두면 오히려 관리가 복잡해지고 리렌더링 트리거가 늘어납니다. 꼭 변화가 필요한 데이터만 state로 관리하세요.
리스트 key 속성 신중하게 사용: 리스트를 렌더할 때 고유한 key 값을 부여해야 리액트의 변화 감지가 더 효율적으로 동작합니다. 불안정한 인덱스 대신 자료의 고유 ID를 활용하세요.
코드 스플리팅(Code Splitting): 앱이 커질수록 진입 시 불러오는 JS의 크기가 증가합니다. React.lazy, Suspense 같은 기능을 사용해, 한 번에 모든 코드를 로드하지 않고 실제 필요한 컴포넌트만 분할해서 불러올 수 있습니다.
이미지 최적화, 불변성 패턴: 자주 갱신되는 이미지나 대용량 자원의 경우, 압축 이미지 사용 및 필요할 때만 불러오기(lazy loading)를 도입하면 체감 속도가 크게 향상됩니다. 또한 상태 및 객체 데이터를 불변성 패턴(immutable)으로 다루면 변경 감지와 최적화 모두 수월해집니다.
실제 프로젝트에서의 응용
실제 현장에서는 브라우저 개발자 도구와 React DevTools를 활용해 렌더 횟수를 추적하고 병목 지점을 시각적으로 파악할 수 있습니다. 필요하다면 컴포넌트 단위로 구조를 분리하고, 값이 잘 바뀌지 않는 부분엔 최적화 테크닉을 집중적으로 도입하세요. 그리고 언제나, 지나치게 조급한 최적화보다 일단 동작하는 코드에서 점진적으로 불편함을 개선하는 것이 유지보수에도 훨씬 유리합니다.
성능 최적화는 리액트 실전에서 “선택이 아닌 필수”입니다. 작은 개선이 모이면, 서비스의 완성도와 사용자 만족도까지 한 층 끌어올릴 수 있습니다.
