React 동시성 렌더링: 최적의 성능을 위한 프레임 드롭 이해 및 완화

React의 동시성 렌더링은 웹 애플리케이션의 반응성과 체감 성능을 향상시키기 위해 설계된 강력한 기능입니다. 이를 통해 React는 메인 스레드를 차단하지 않고 여러 작업을 동시에 처리하여 더 부드러운 사용자 인터페이스를 구현할 수 있습니다. 그러나 동시성 렌더링을 사용하더라도 애플리케이션은 여전히 프레임 드롭을 경험할 수 있으며, 이는 버벅거리는 애니메이션, 지연된 상호 작용, 그리고 전반적으로 좋지 않은 사용자 경험으로 이어질 수 있습니다. 이 글에서는 React의 동시성 렌더링의 복잡성을 깊이 파고들고, 프레임 드롭의 원인을 탐구하며, 이러한 문제를 식별하고 완화하여 전 세계 사용자를 위한 최적의 성능을 보장하는 실용적인 전략을 제공합니다.

React 동시성 렌더링 이해하기

전통적인 React 렌더링은 동기적으로 작동합니다. 즉, 컴포넌트가 업데이트되어야 할 때 전체 렌더링 프로세스가 완료될 때까지 메인 스레드를 차단합니다. 이는 특히 복잡하고 큰 컴포넌트 트리를 가진 애플리케이션에서 지연과 무응답을 유발할 수 있습니다. React 18에 도입된 동시성 렌더링은 렌더링을 더 작고 중단 가능한 작업으로 분해함으로써 더 효율적인 접근 방식을 제공합니다.

주요 개념

• 타임 슬라이싱(Time Slicing): React는 렌더링 작업을 작은 덩어리로 나누어 각 덩어리 처리 후 브라우저에 제어권을 넘겨줄 수 있습니다. 이를 통해 브라우저는 사용자 입력 및 애니메이션 업데이트와 같은 다른 작업을 처리할 수 있어 UI가 멈추는 것을 방지합니다.
• 중단(Interruptions): React는 사용자 상호 작용과 같이 더 높은 우선순위의 작업을 처리해야 할 경우 진행 중인 렌더링 프로세스를 중단할 수 있습니다. 이는 애플리케이션이 사용자 작업에 계속 반응하도록 보장합니다.
• Suspense: Suspense는 컴포넌트가 데이터를 로드하는 동안 렌더링을 "일시 중단"할 수 있게 해줍니다. 그러면 React는 데이터가 사용 가능해질 때까지 로딩 표시기와 같은 대체 UI를 표시할 수 있습니다. 이는 데이터 대기 중 UI가 차단되는 것을 방지하여 체감 성능을 향상시킵니다.
• Transitions: Transitions는 개발자가 특정 업데이트를 덜 긴급한 것으로 표시할 수 있게 해줍니다. React는 (직접적인 사용자 상호 작용과 같은) 긴급한 업데이트를 transitions보다 우선시하여 앱의 반응성을 유지합니다.

이러한 기능들은 집합적으로 더 유연하고 반응성이 뛰어난 사용자 경험에 기여하며, 특히 업데이트가 잦고 복잡한 UI를 가진 애플리케이션에서 더욱 그렇습니다.

프레임 드롭이란 무엇인가?

프레임 드롭은 브라우저가 원하는 프레임 속도(일반적으로 초당 60프레임(FPS) 이상)로 프레임을 렌더링할 수 없을 때 발생합니다. 이는 눈에 보이는 끊김, 지연, 그리고 전반적으로 거슬리는 사용자 경험을 초래합니다. 각 프레임은 특정 시점의 UI 스냅샷을 나타냅니다. 브라우저가 화면을 충분히 빠르게 업데이트할 수 없으면 프레임을 건너뛰게 되어 이러한 시각적 불완전성이 발생합니다.

목표 프레임 속도 60 FPS는 프레임당 약 16.67밀리초의 렌더링 예산을 의미합니다. 브라우저가 프레임을 렌더링하는 데 이보다 오래 걸리면 프레임이 드롭됩니다.

React 애플리케이션에서 프레임 드롭의 원인

동시성 렌더링을 사용하더라도 React 애플리케이션에서 프레임 드롭에 기여할 수 있는 몇 가지 요인이 있습니다:

• 복잡한 컴포넌트 업데이트: 크고 복잡한 컴포넌트 트리는 렌더링하는 데 상당한 시간이 걸려 사용 가능한 프레임 예산을 초과할 수 있습니다.
• 비용이 큰 계산: 렌더링 프로세스 내에서 복잡한 데이터 변환이나 이미지 처리와 같은 계산 집약적인 작업을 수행하면 메인 스레드가 차단될 수 있습니다.
• 최적화되지 않은 DOM 조작: 잦거나 비효율적인 DOM 조작은 성능 병목 현상을 일으킬 수 있습니다. React의 렌더링 주기 외부에서 직접 DOM을 조작하는 것도 불일치와 성능 문제로 이어질 수 있습니다.
• 과도한 리렌더링: 불필요한 컴포넌트 리렌더링은 추가적인 렌더링 작업을 유발하여 프레임 드롭 가능성을 높입니다. 이는 종종 `React.memo`, `useMemo`, `useCallback`의 부적절한 사용이나 `useEffect` 훅의 잘못된 의존성 배열로 인해 발생합니다.
• 메인 스레드에서의 장기 실행 작업: 네트워크 요청이나 동기적 작업과 같이 장시간 메인 스레드를 차단하는 JavaScript 코드는 브라우저가 프레임을 놓치게 할 수 있습니다.
• 서드파티 라이브러리: 비효율적이거나 제대로 최적화되지 않은 서드파티 라이브러리는 성능 병목 현상을 유발하고 프레임 드롭에 기여할 수 있습니다.
• 브라우저 제한: 비효율적인 가비지 컬렉션이나 느린 CSS 계산과 같은 특정 브라우저 기능이나 제한도 렌더링 성능에 영향을 줄 수 있습니다. 이는 브라우저와 기기에 따라 다를 수 있습니다.
• 기기 제한: 애플리케이션이 고사양 기기에서는 완벽하게 작동하지만 구형 또는 저사양 기기에서는 프레임 드롭이 발생할 수 있습니다. 다양한 기기 성능에 맞춰 최적화하는 것을 고려해야 합니다.

프레임 드롭 식별하기: 도구와 기법

프레임 드롭을 해결하는 첫 번째 단계는 그 존재를 식별하고 근본 원인을 이해하는 것입니다. 이를 돕는 여러 도구와 기법이 있습니다:

React 프로파일러

React 개발자 도구에서 사용할 수 있는 React 프로파일러는 React 컴포넌트의 성능을 분석하는 강력한 도구입니다. 렌더링 성능을 기록하고 렌더링에 가장 오래 걸리는 컴포넌트를 식별할 수 있습니다.

React 프로파일러 사용하기:

1. 브라우저에서 React 개발자 도구를 엽니다.
2. "Profiler" 탭을 선택합니다.
3. "Record" 버튼을 클릭하여 프로파일링을 시작합니다.
4. 분석하려는 렌더링 프로세스를 트리거하기 위해 애플리케이션과 상호 작용합니다.
5. "Stop" 버튼을 클릭하여 프로파일링을 중지합니다.
6. 기록된 데이터를 분석하여 성능 병목 현상을 식별합니다. "ranked" 및 "flamegraph" 뷰에 주의를 기울이세요.

브라우저 개발자 도구

브라우저 개발자 도구는 웹 성능 분석을 위한 다양한 기능을 제공합니다. 여기에는 다음이 포함됩니다:

• Performance 탭: Performance 탭에서는 렌더링, 스크립팅, 네트워크 요청을 포함한 브라우저 활동의 타임라인을 기록할 수 있습니다. 이는 React 자체 외부에서 장기 실행 작업과 성능 병목 현상을 식별하는 데 도움이 됩니다.
• 초당 프레임 수(FPS) 미터: FPS 미터는 프레임 속도를 실시간으로 표시합니다. FPS의 하락은 잠재적인 프레임 드롭을 나타냅니다.
• Rendering 탭: Rendering 탭(Chrome 개발자 도구)에서는 다시 칠해지는 화면 영역을 강조 표시하고, 레이아웃 이동을 식별하며, 기타 렌더링 관련 성능 문제를 감지할 수 있습니다. "Paint flashing" 및 "Layout Shift Regions"와 같은 기능이 매우 유용할 수 있습니다.

성능 모니터링 도구

여러 서드파티 성능 모니터링 도구는 실제 시나리오에서 애플리케이션의 성능에 대한 통찰력을 제공할 수 있습니다. 이러한 도구는 종종 다음과 같은 기능을 제공합니다:

• 실제 사용자 모니터링(RUM): 실제 사용자로부터 성능 데이터를 수집하여 사용자 경험을 더 정확하게 나타냅니다.
• 오류 추적: 성능에 영향을 미칠 수 있는 JavaScript 오류를 식별하고 추적합니다.
• 성능 알림: 성능 지표가 미리 정의된 임계값을 초과할 때 알림을 받도록 설정합니다.

성능 모니터링 도구의 예로는 New Relic, Sentry, Datadog이 있습니다.

예시: React 프로파일러를 사용하여 병목 현상 식별하기

큰 항목 목록을 렌더링하는 복잡한 컴포넌트가 있다고 상상해 보세요. 사용자들이 이 목록을 스크롤할 때 버벅거리고 반응이 없다고 보고합니다.

1. React 프로파일러를 사용하여 목록을 스크롤하는 동안 세션을 기록합니다.
2. 프로파일러의 순위 차트(ranked chart)를 분석합니다. 특정 컴포넌트인 `ListItem`이 목록의 각 항목에 대해 렌더링하는 데 지속적으로 오랜 시간이 걸리는 것을 발견합니다.
3. `ListItem` 컴포넌트의 코드를 검사합니다. 데이터가 변경되지 않았음에도 불구하고 각 렌더링마다 계산 비용이 큰 계산을 수행한다는 것을 발견합니다.

이 분석은 최적화가 필요한 코드의 특정 영역을 가리킵니다. 이 경우 `useMemo`를 사용하여 비용이 큰 계산을 메모이제이션하여 불필요하게 재실행되는 것을 방지할 수 있습니다.

프레임 드롭 완화 전략

프레임 드롭의 원인을 식별한 후에는 이러한 문제를 완화하고 성능을 향상시키기 위해 다양한 전략을 구현할 수 있습니다:

1. 컴포넌트 업데이트 최적화

• 메모이제이션(Memoization): `React.memo`, `useMemo`, `useCallback`을 사용하여 컴포넌트의 불필요한 리렌더링과 비용이 큰 계산을 방지합니다. 예기치 않은 동작을 피하기 위해 의존성 배열을 올바르게 지정해야 합니다.
• 가상화(Virtualization): 큰 목록이나 테이블의 경우 `react-window`나 `react-virtualized`와 같은 가상화 라이브러리를 사용하여 보이는 항목만 렌더링합니다. 이는 필요한 DOM 조작의 양을 크게 줄입니다.
• 코드 스플리팅(Code Splitting): 애플리케이션을 필요에 따라 로드할 수 있는 더 작은 청크로 나눕니다. 이는 초기 로드 시간을 줄이고 애플리케이션의 반응성을 향상시킵니다. 컴포넌트 수준 코드 스플리팅에는 React.lazy와 Suspense를 사용하고, 라우트 기반 코드 스플리팅에는 Webpack이나 Parcel과 같은 도구를 사용합니다.
• 불변성(Immutability): 불필요한 리렌더링을 유발할 수 있는 우발적인 데이터 변경을 피하기 위해 불변 데이터 구조를 사용합니다. Immer와 같은 라이브러리는 불변 데이터 작업을 단순화하는 데 도움이 될 수 있습니다.

2. 비용이 큰 계산 줄이기

• 디바운싱(Debouncing) 및 스로틀링(Throttling): 디바운싱과 스로틀링을 사용하여 이벤트 핸들러나 API 호출과 같은 비용이 큰 작업의 빈도를 제한합니다. 이는 애플리케이션이 잦은 업데이트로 인해 과부하되는 것을 방지합니다.
• 웹 워커(Web Workers): 계산 집약적인 작업을 별도의 스레드에서 실행되고 메인 스레드를 차단하지 않는 웹 워커로 옮깁니다. 이를 통해 백그라운드 작업이 수행되는 동안 UI가 반응성을 유지할 수 있습니다.
• 캐싱(Caching): 자주 액세스하는 데이터를 캐시하여 모든 렌더링에서 다시 계산하는 것을 피합니다. 자주 변경되지 않는 데이터를 저장하기 위해 인메모리 캐시나 로컬 스토리지를 사용합니다.

3. DOM 조작 최적화

• 직접적인 DOM 조작 최소화: React의 렌더링 주기 외부에서 직접 DOM을 조작하는 것을 피합니다. 일관성과 효율성을 보장하기 위해 가능하면 React가 DOM 업데이트를 처리하도록 합니다.
• 업데이트 일괄 처리(Batch Updates): `ReactDOM.flushSync`(드물게 신중하게 사용!)를 사용하여 여러 업데이트를 단일 렌더링으로 일괄 처리합니다. 이는 여러 DOM을 동시에 변경할 때 성능을 향상시킬 수 있습니다.

4. 장기 실행 작업 관리

• 비동기 작업: `async/await` 및 Promises와 같은 비동기 작업을 사용하여 메인 스레드를 차단하는 것을 피합니다. 네트워크 요청 및 기타 I/O 작업이 비동기적으로 수행되도록 합니다.
• RequestAnimationFrame: `requestAnimationFrame`을 사용하여 애니메이션 및 기타 시각적 업데이트를 예약합니다. 이는 업데이트가 브라우저의 새로고침 빈도와 동기화되어 더 부드러운 애니메이션을 만듭니다.

5. 서드파티 라이브러리 최적화

• 신중한 라이브러리 선택: 잘 최적화되고 성능으로 알려진 서드파티 라이브러리를 선택합니다. 용량이 크거나 성능 문제가 있는 라이브러리는 피합니다.
• 라이브러리 지연 로딩(Lazy Load): 서드파티 라이브러리를 한 번에 모두 로드하는 대신 필요할 때 로드합니다. 이는 초기 로드 시간을 줄이고 애플리케이션의 전반적인 성능을 향상시킵니다.
• 정기적인 라이브러리 업데이트: 성능 개선 및 버그 수정을 활용하기 위해 서드파티 라이브러리를 최신 상태로 유지합니다.

6. 기기 성능 및 네트워크 조건 고려

• 적응형 렌더링(Adaptive Rendering): 기기의 성능과 네트워크 조건에 따라 UI의 복잡성을 조정하는 적응형 렌더링 기술을 구현합니다. 예를 들어, 저사양 기기에서는 이미지 해상도를 낮추거나 애니메이션을 단순화할 수 있습니다.
• 네트워크 최적화: 대기 시간을 줄이고 로딩 시간을 개선하기 위해 애플리케이션의 네트워크 요청을 최적화합니다. 콘텐츠 전송 네트워크(CDN), 이미지 최적화, HTTP 캐싱과 같은 기술을 사용합니다.
• 점진적 향상(Progressive Enhancement): 점진적 향상을 염두에 두고 애플리케이션을 구축하여 구형 또는 성능이 낮은 기기에서도 기본적인 수준의 기능을 제공하도록 합니다.

예시: 느린 목록 컴포넌트 최적화하기

느린 목록 컴포넌트 예시로 돌아가 봅시다. `ListItem` 컴포넌트를 병목 현상으로 식별한 후 다음과 같은 최적화를 적용할 수 있습니다:

1. `ListItem` 컴포넌트 메모이제이션: `React.memo`를 사용하여 항목 데이터가 변경되지 않았을 때 리렌더링을 방지합니다.
2. 비용이 큰 계산 메모이제이션: `useMemo`를 사용하여 비용이 큰 계산 결과를 캐시합니다.
3. 목록 가상화: `react-window` 또는 `react-virtualized`를 사용하여 보이는 항목만 렌더링합니다.

이러한 최적화를 구현함으로써 목록 컴포넌트의 성능을 크게 향상시키고 프레임 드롭을 줄일 수 있습니다.

전 세계 사용자를 위한 고려사항

전 세계 사용자를 위해 React 애플리케이션을 최적화할 때는 네트워크 대기 시간, 기기 성능, 언어 현지화와 같은 요소를 고려하는 것이 중요합니다.

• 네트워크 대기 시간: 세계 각지의 사용자는 다른 네트워크 대기 시간을 경험할 수 있습니다. CDN을 사용하여 애플리케이션의 자산을 전 세계에 배포하고 대기 시간을 줄입니다.
• 기기 성능: 사용자는 처리 능력이 제한된 구형 스마트폰 및 태블릿을 포함한 다양한 기기에서 애플리케이션에 액세스할 수 있습니다. 다양한 기기 성능에 맞게 애플리케이션을 최적화합니다.
• 언어 현지화: 애플리케이션이 다른 언어 및 지역에 맞게 적절히 현지화되었는지 확인합니다. 여기에는 텍스트 번역, 날짜 및 숫자 서식 지정, 다른 쓰기 방향을 수용하기 위한 UI 조정이 포함됩니다.

결론

프레임 드롭은 React 애플리케이션의 사용자 경험에 상당한 영향을 미칠 수 있습니다. 프레임 드롭의 원인을 이해하고 이 글에서 설명한 전략을 구현함으로써, 동시성 렌더링을 사용하더라도 부드럽고 반응성 있는 성능을 위해 애플리케이션을 최적화할 수 있습니다. 애플리케이션을 정기적으로 프로파일링하고, 성능 지표를 모니터링하며, 실제 데이터를 기반으로 최적화 전략을 조정하는 것은 시간이 지나도 최적의 성능을 유지하는 데 중요합니다. 전 세계 사용자를 고려하고 다양한 네트워크 조건과 기기 성능에 맞게 최적화하는 것을 잊지 마세요.

컴포넌트 업데이트 최적화, 비용이 큰 계산 줄이기, DOM 조작 최적화, 장기 실행 작업 관리, 서드파티 라이브러리 최적화, 그리고 기기 성능과 네트워크 조건을 고려하는 데 집중함으로써 전 세계 사용자에게 우수한 사용자 경험을 제공할 수 있습니다. 최적화에 행운을 빕니다!