React Native Performance Optimization: 실전 가이드

모바일 앱 개발에서 사용자 경험(UX)은 앱의 성공을 좌우하는 핵심 요소입니다. 특히 앱의 반응성과 부드러움은 사용자 만족도에 큰 영향을 미치며, 이는 곧 앱의 성능과 직결됩니다. React Native는 크로스플랫폼 개발의 효율성을 제공하지만, 네이티브 앱만큼의 성능을 달성하기 위해서는 세심한 최적화 노력이 필요합니다. 이 글에서는 React Native 앱의 성능을 iOS와 Android 모두에서 극대화하기 위한 실전 가이드와 구체적인 팁, 코드 예제를 상세하게 다루겠습니다.

JavaScript Thread 최적화

React Native 앱의 핵심은 JavaScript 스레드에서 실행되는 로직입니다. 이 스레드가 과부하되면 UI가 버벅거리고 앱이 느려지는 현상이 발생합니다. JavaScript 스레드의 효율성을 높이는 것이 React Native 성능 최적화의 첫걸음입니다.

1. Hermes 엔진 활용

Hermes는 React Native를 위해 Facebook(현재 Meta)에서 개발한 오픈소스 JavaScript 엔진입니다. 기존 JavaScriptCore(JSC) 엔진에 비해 시작 시간 단축, 메모리 사용량 감소, 앱 크기 축소 등의 이점을 제공합니다. 특히 저사양 Android 기기에서 두드러진 성능 향상을 기대할 수 있습니다.

Hermes를 활성화하는 방법은 간단합니다. android/app/build.gradle 파일에서 enableHermes를 true로 설정하고, iOS의 경우 ios/Podfile에서 use_hermes!를 주석 해제한 후 pod install을 실행하면 됩니다.

// android/app/build.gradle
project.ext.react = [
    enableHermes: true,  // Hermes 활성화
    // ...
]

# ios/Podfile
use_react_native!(
    :path => "../node_modules/react-native",
    # ...
    :hermes_enabled => true # Hermes 활성화
)

# ...
post_install do |installer|
  react_native_post_install(installer)
  __apply_mac_catalyst_patches
end

2. 무거운 작업은 백그라운드 스레드로 분리

네트워크 요청, 대용량 데이터 처리, 복잡한 계산 등 시간이 오래 걸리는 작업은 JavaScript 스레드를 블로킹하여 UI 렌더링 지연을 유발할 수 있습니다. 이러한 작업은 웹 워커(Web Workers)와 유사한 개념인 react-native-background-task나 네이티브 모듈을 통해 백그라운드 스레드에서 처리하도록 분리하는 것이 좋습니다.

// 무거운 계산을 백그라운드에서 처리하는 예시 (Worker 스레드 라이브러리 사용 가정)
import { Worker } from '@koale/react-native-worker';

const myWorker = new Worker('path/to/myWorker.js');

myWorker.postMessage({ data: largeDataSet });

myWorker.onmessage = (event) => {
  console.log('Result from worker:', event.data);
};

// myWorker.js 파일 내용
// onmessage = (event) => {
//   const result = performHeavyCalculation(event.data.data);
//   postMessage(result);
// };

3. 메모리 누수 방지

메모리 누수는 앱의 성능 저하와 크래시로 이어질 수 있습니다. 특히 리스너(listener)나 구독(subscription)을 사용하는 경우, 컴포넌트가 언마운트될 때 반드시 해제해야 합니다. useEffect 훅의 반환 함수를 활용하여 클린업 로직을 구현하는 것이 모범 사례입니다.

import React, { useEffect, useState } from 'react';
import { AppState } from 'react-native';

function MyComponent() {
  const [appState, setAppState] = useState(AppState.currentState);

  useEffect(() => {
    const handleAppStateChange = (nextAppState) => {
      setAppState(nextAppState);
    };

    const subscription = AppState.addEventListener('change', handleAppStateChange);

    return () => {
      // 컴포넌트 언마운트 시 리스너 해제
      subscription.remove();
    };
  }, []);

  return (
    // ... UI
  );
}

UI 렌더링 성능 향상

부드러운 UI 렌더링은 사용자 경험에 직접적인 영향을 줍니다. 불필요한 리렌더링을 줄이고, 효율적인 리스트 렌더링을 통해 UI 성능을 향상시킬 수 있습니다.

1. 불필요한 리렌더링 방지

React 컴포넌트는 부모 컴포넌트가 리렌더링되거나 자신의 props 또는 state가 변경될 때 리렌더링됩니다. 불필요한 리렌더링은 성능 저하의 주범이므로, 이를 최소화해야 합니다.

• React.memo: 함수형 컴포넌트에서 props가 변경되지 않았다면 리렌더링을 건너뛰도록 합니다.
• useCallback: 특정 함수가 리렌더링 시 재생성되지 않도록 메모이제이션하여 자식 컴포넌트의 불필요한 리렌더링을 방지합니다.
• useMemo: 계산 비용이 높은 값을 메모이제이션하여 불필요한 재계산을 방지합니다.

// MyListItem.js
import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';

const MyListItem = React.memo(({ item, onPress }) => {
  console.log('Rendering MyListItem:', item.id);
  return (
    <TouchableOpacity onPress={() => onPress(item.id)}>
      <View style={{ padding: 10, borderBottomWidth: 1, borderColor: '#ccc' }}>
        <Text>{item.title}</Text>
      </View>
    </TouchableOpacity>
  );
});

export default MyListItem;

// MyListScreen.js
import React, { useState, useCallback } from 'react';
import { FlatList } from 'react-native';
import MyListItem from './MyListItem';

function MyListScreen() {
  const [data, setData] = useState(Array.from({ length: 100 }, (_, i) => ({ id: i, title: `Item ${i}` })));

  // useCallback을 사용하여 onPress 핸들러가 재생성되지 않도록 함
  const handlePress = useCallback((id) => {
    console.log('Item pressed:', id);
    // 상태 업데이트 로직 (예: 특정 아이템 상태 변경)
  }, []); // 의존성 배열이 비어있으면 컴포넌트 마운트 시 한 번만 생성됨

  const renderItem = useCallback(({ item }) => (
    <MyListItem item={item} onPress={handlePress} />
  ), [handlePress]); // handlePress가 변경될 때만 renderItem 재생성

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
    />
  );
}

2. FlatList 및 VirtualizedList 활용

대량의 데이터를 스크롤해야 하는 리스트를 렌더링할 때는 ScrollView 대신 FlatList나 VirtualizedList를 사용하는 것이 필수적입니다. 이 컴포넌트들은 화면에 보이는 아이템만 렌더링하고, 스크롤에 따라 동적으로 아이템을 로드 및 언로드하여 메모리 사용량과 렌더링 성능을 최적화합니다.

FlatList의 성능을 더욱 향상시키려면 다음과 같은 속성을 적절히 사용해야 합니다.

• getItemLayout: 아이템의 크기를 미리 알 수 있다면 이 속성을 사용하여 렌더링 성능을 크게 향상시킬 수 있습니다.
• initialNumToRender: 처음 로드할 아이템의 개수를 지정합니다.
• windowSize: 렌더링할 뷰포트 바깥 영역의 아이템 개수를 조절합니다.
• removeClippedSubviews: 화면 밖으로 벗어난 뷰를 제거하여 메모리를 절약합니다 (주의: 버그를 유발할 수 있으므로 신중하게 사용).
• keyExtractor: 각 아이템을 고유하게 식별하는 키를 제공하여 리렌더링 시 효율적으로 아이템을 추적하도록 합니다.

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={(item) => item.id.toString()}
  initialNumToRender={10} // 처음 10개만 렌더링
  maxToRenderPerBatch={5} // 스크롤 시 한 번에 5개씩 추가 렌더링
  windowSize={21} // 현재 뷰포트 위아래로 10개씩 더 렌더링 (총 21개)
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT, // 아이템의 고정된 높이
    offset: ITEM_HEIGHT * index,
    index,
  })}
/>

애니메이션 및 제스처 처리

부드러운 애니메이션과 즉각적인 제스처 반응은 앱의 사용자 경험을 크게 향상시킵니다. React Native의 기본 Animated API는 JavaScript 스레드에서 실행되므로 복잡하거나 동시성 높은 애니메이션에서 성능 저하가 발생할 수 있습니다.

1. react-native-reanimated 활용

react-native-reanimated는 애니메이션을 JavaScript 스레드가 아닌 UI 스레드에서 직접 실행하도록 하여 훨씬 부드러운 애니메이션을 구현할 수 있게 합니다. 이는 JavaScript 스레드가 바빠지더라도 애니메이션이 끊기지 않고 자연스럽게 작동하도록 합니다.

import React from 'react';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withRepeat,
} from 'react-native-reanimated';
import { Button, View } from 'react-native';

function AnimatedBox() {
  const offset = useSharedValue(0);

  const animatedStyles = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: offset.value * 255 }],
    };
  });

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Animated.View style={[{ width: 100, height: 100, backgroundColor: 'blue' }, animatedStyles]} />
      <Button onPress={() => {
        offset.value = withRepeat(withSpring(1), -1, true); // 무한 반복 애니메이션
      }} title="Start Animation" />
    </View>
  );
}

2. react-native-gesture-handler 활용

복잡한 제스처(스와이프, 핀치 줌 등)를 처리할 때 react-native-gesture-handler 라이브러리를 사용하면 네이티브 UI 스레드에서 직접 제스처 이벤트를 처리하므로, JavaScript 브릿지 통신 오버헤드를 줄이고 더 빠르고 반응적인 제스처를 구현할 수 있습니다.

네이티브 모듈 및 브릿지 최적화

React Native는 JavaScript와 네이티브 코드 간의 브릿지 통신을 통해 작동합니다. 이 브릿지 통신은 비용이 드는 작업이므로, 이를 최소화하고 필요한 경우에만 네이티브 모듈을 활용해야 합니다.

1. 비용이 큰 작업은 네이티브 모듈로 구현

이미지 처리, 비디오 인코딩/디코딩, 암호화, 파일 시스템 접근 등 CPU 집약적이거나 실시간 처리가 필요한 작업은 네이티브 모듈로 직접 구현하는 것이 성능상 유리합니다. 네이티브 모듈은 JavaScript 스레드를 블로킹하지 않고 네이티브 환경의 모든 성능 이점을 활용할 수 있습니다.

2. 브릿지 통신 최소화

• 직렬화/역직렬화 오버헤드: JavaScript와 네이티브 간 데이터 전송 시 JSON 직렬화/역직렬화 과정이 발생합니다. 큰 객체나 배열을 자주 주고받는 것은 피해야 합니다.
• 콜백 최소화: 네이티브 모듈에서 JavaScript로 너무 많은 콜백을 보내면 브릿지 통신 오버헤드가 증가합니다. 가능한 한 적은 수의 콜백으로 정보를 전달하도록 설계합니다.
• UI 스레드에서 작업 피하기: 네이티브 모듈을 만들 때, UI 스레드에서 시간이 오래 걸리는 작업을 수행하지 않도록 주의해야 합니다. 필요한 경우 별도의 백그라운드 스레드를 생성하여 작업을 처리해야 합니다.

번들 사이즈 최적화

앱의 번들 사이즈가 커지면 초기 로딩 시간이 길어지고, 메모리 사용량이 증가하며, 다운로드 속도에 영향을 미칩니다. 번들 사이즈를 최적화하는 것은 사용자 경험 향상에 중요합니다.

1. 불필요한 라이브러리 제거 및 대체

사용하지 않는 라이브러리는 제거하고, 더 작고 가벼운 대안이 있다면 교체하는 것을 고려합니다. 예를 들어, 특정 기능만을 위해 거대한 UI 라이브러리 전체를 포함하는 대신, 필요한 컴포넌트만 가져오거나 직접 구현하는 것이 좋습니다.

2. 이미지 및 미디어 최적화

• 압축: PNG, JPEG 등의 이미지 파일을 최적의 품질로 압축하여 파일 크기를 줄입니다.
• 웹 최적화 포맷: WebP와 같은 웹 최적화 이미지 포맷은 JPEG나 PNG보다 더 나은 압축률을 제공할 수 있습니다. react-native-fast-image와 같은 라이브러리는 이미지 로딩 성능을 향상시키는 데 도움이 됩니다.
• 해상도: 각 기기의 화면 해상도에 맞는 적절한 크기의 이미지를 제공하여 불필요하게 큰 이미지를 로드하지 않도록 합니다.
• SVG 사용: 아이콘 등 벡터 이미지는 SVG로 사용하는 것이 좋습니다.

3. 코드 스플리팅 및 지연 로딩 (Lazy Loading)

React Native는 기본적으로 앱의 모든 JavaScript 코드를 하나의 번들 파일로 묶습니다. react-native-bundle-splitter와 같은 라이브러리를 사용하여 앱의 특정 부분을 필요할 때만 로드하도록 코드 스플리팅을 구현하면 초기 로딩 시간을 단축할 수 있습니다.

// 코드 스플리팅 예시 (react-native-bundle-splitter 사용 가정)
import React, { Suspense } from 'react';
import { Text } from 'react-native';

const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function MyScreen() {
  return (
    <Suspense fallback={<Text>Loading...</Text>}>
      <LazyLoadedComponent />
    </Suspense>
  );
}

디버깅 및 프로파일링 도구 활용

성능 문제를 해결하기 위해서는 정확한 진단이 선행되어야 합니다. React Native 생태계는 다양한 디버깅 및 프로파일링 도구를 제공합니다.

1. Flipper

Flipper는 React Native 앱을 위한 강력한 디버깅 플랫폼입니다. 네트워크 요청, AsyncStorage, React DevTools, 네이티브 로그 등 다양한 정보를 한곳에서 확인할 수 있으며, 플러그인을 통해 기능을 확장할 수 있습니다. 특히 React Native 앱의 UI 계층 구조를 시각적으로 분석하고, 컴포넌트의 렌더링 시간 및 props/state 변화를 추적하는 데 유용합니다.

2. React Native Debugger

React Native Debugger는 Chrome DevTools, React DevTools, Redux DevTools를 통합한 독립형 데스크톱 앱입니다. JavaScript 코드 디버깅, 컴포넌트 계층 분석, Redux 상태 관리 디버깅 등 광범위한 기능을 제공합니다.

3. 네이티브 프로파일링 도구

• Xcode Instruments (iOS): iOS 앱의 CPU, 메모리, 네트워크, GPU 사용량 등을 상세하게 분석할 수 있는 강력한 도구입니다. JavaScript 스레드와 UI 스레드 간의 상호작용을 파악하고 네이티브 코드의 병목 현상을 진단하는 데 유용합니다.
• Android Studio Profiler (Android): Android 앱의 CPU, 메모리, 네트워크, 에너지 사용량을 실시간으로 모니터링하고 분석할 수 있습니다. 특히 JavaScript 스레드와 메인 스레드 간의 통신 부하를 측정하는 데 도움이 됩니다.

이러한 도구들을 사용하여 앱의 병목 현상을 정확히 파악하고, 최적화 노력을 집중할 수 있습니다.

마무리

React Native는 크로스플랫폼 개발의 생산성을 높여주는 강력한 프레임워크입니다. 하지만 네이티브 앱에 필적하는 성능과 부드러운 사용자 경험을 제공하기 위해서는 JavaScript 스레드, UI 렌더링, 애니메이션, 번들 사이즈 등 다양한 측면에서 지속적인 성능 최적화 노력이 필요합니다. Hermes 엔진, React.memo, FlatList, Reanimated와 같은 도구와 기술을 적극적으로 활용하고, Flipper와 같은 프로파일링 도구를 통해 앱의 성능 병목을 정확히 진단하는 것이 중요합니다. 이 가이드에서 제시된 실전 팁들을 통해 여러분의 React Native 앱이 더욱 빠르고 반응성 높은 경험을 사용자에게 제공할 수 있기를 바랍니다.