매우 빠른 React Native 앱을 빌드하는 것은 퍼즐을 맞추는 것과 같습니다. 적절한 위치에 적절한 조각이 있어야 합니다. 이 블로그 게시물에서는 React Native 앱이 정말 잘 작동하도록 만드는 데 유용한 몇 가지 팁과 요령을 공유하겠습니다. 코딩 전문가든 이제 막 코딩을 시작한 초보자이든 이러한 아이디어는 앱 개발의 여정을 훨씬 더 원활하게 만들어 줄 것입니다. 멋진 React Native 앱을 만드는 방법을 알아보겠습니다!
1. 렌더링 최적화
-
클래스 컴포넌트의 경우
Component대신PureComponent를 사용하여 프로퍼티와 상태를 얕게 비교하는 shouldComponentUpdate 메서드를 자동으로 구현하세요. -
함수 컴포넌트의 경우
React.memo고차 컴포넌트를 사용하여 비슷한 효과를 얻을 수 있습니다.
// Class Component
class MyComponent extends React.PureComponent {
// ...
}
// Functional Component
const MyFunctionalComponent = React.memo((props) => {
// ...
});- 컴포넌트가 불필요하게 리렌더링되지 않는지 확인하세요. 이는 프로퍼티나 상태가 변경되지 않은 경우에도 부모 컴포넌트가 리렌더링되고 자식 컴포넌트가 강제로 리렌더링될 때 발생할 수 있습니다.
2. 리스트에서 FlatList 또는 SectionList를 사용하기
- React Native는 뷰포트의 항목만 렌더링하는 virtualized list(예: FlatList)을 제공하여 대규모 데이터 세트의 성능을 향상시킵니다. 긴 리스트의 경우, 현재 화면에 표시되는 항목만 효율적으로 렌더링하려면
ScrollView대신FlatList또는SectionList를 사용하세요.
3. 이미지 최적화
-
이미지를 압축하고 최적화하여 크기를 줄입니다. ImageOptim 또는 TinyPNG와 같은 도구를 사용할 수 있습니다.
-
Image컴포넌트의resizeMode속성을 사용하여 이미지 크기 조정 방법을 제어하는 것을 고려해 보세요. -
FastImage와 같은 이미지 로딩 라이브러리를 사용하면 로딩 성능을 개선하고 이미지를 더욱 효율적으로 캐싱할 수 있습니다. 또한 lazy loading 기능을 사용할 수도 있습니다. FastImage는 이미지 로딩
priority뿐만 아니라 이미지 사전 로드, 로딩 중 이벤트 등과 같은 추가 기능도 지원합니다. 더 고급 사용법은 공식 문서를 참조하세요: react-native-fast-image
import React from 'react';
import { View } from 'react-native';
import FastImage from 'react-native-fast-image';
const YourComponent = () => {
return (
<View>
{/* Regular Image Component */}
<Image source={{ uri: 'https://example.com/image.jpg' }} style={{ width: 200, height: 200 }} />
{/* FastImage Component */}
<FastImage
source={{
uri: 'https://example.com/image.jpg',
priority: FastImage.priority.high,
}}
style={{ width: 200, height: 200 }}
resizeMode={FastImage.resizeMode.contain}
/>
</View>
);
};
export default YourComponent;4. Redux를 모든 것에 사용하지 않기
Redux는 React에서 큰 작업을 처리하기 위한 강력한 toolbox 같지만 모든 상황에 가장 적합한 것은 아닙니다. 서버 상태를 관리하는 동안에도 모든 작업에 Redux를 사용하면 필요 이상으로 복잡해질 수 있습니다. Redux는 코드와 규칙을 추가하여 개발 속도를 늦춥니다. 대신, 간단한 작업의 경우 React 자체의 useState 및 Context API와 같은 기본 도구나 Tanstack Query와 같은 서버 상태 관리를 위한 더 간단한 대안을 사용하는 것이 좋습니다. 프로젝트의 규모와 사용하는 도구 간에 적절한 균형을 찾으면 작업이 간단하고 효율적으로 유지됩니다.
5. Hermes JavaScript 엔진 선호하기
Hermes는 안드로이드에서 React Native 앱을 실행하는 데 최적화된 JavaScript 엔진입니다. 이는 React Native와 함께 제공되는 기본 JavaScriptCore 엔진의 대안입니다. Hermes는 이러한 이점을 제공하지만 앱의 세부 사항과 타겟 고객에 따라 그 영향력이 달라질 수 있다는 점에 유의해야 합니다. 호환성을 확인하고 특정 사용 사례에 대한 성능 이점을 평가하려면 Hermes를 활성화한 상태에서 앱을 철저히 테스트하는 것이 좋습니다. 다음은 React Native 프로젝트에서 Hermes를 사용하면 얻을 수 있는 몇 가지 장점입니다.
-
시작 성능 개선: Hermes는 더 빠른 앱 시작 시간을 제공하도록 설계되었습니다. 빌드 프로세스 중에 JavaScript 코드를 최적화하여 파싱 및 초기화 시간을 단축함으로써 이를 달성합니다.
-
더 작은 앱 크기: Hermes는 불필요한 런타임 기능을 제거하고 보다 효율적인 바이트코드 형식을 사용하여 JavaScript 번들을 최적화합니다. 이를 통해 앱 크기를 줄일 수 있으며, 이는 대역폭이나 저장 공간이 제한된 사용자에게 매우 중요합니다.
-
메모리 사용량 감소: Hermes는 효율적인 메모리 사용으로 유명합니다. React Native 앱의 전체 메모리 사용량을 줄일 수 있어 RAM이 제한된 기기에 특히 유용합니다.
-
배터리 수명 개선: Hermes는 JavaScript 실행을 최적화하여 모바일 기기의 배터리 수명을 개선할 수 있습니다. 처리 시간과 메모리 사용량이 줄어들면 디바이스 리소스에 대한 부담이 줄어듭니다.
-
가비지 컬렉션 최적화: Hermes는 앱 실행 중 중단을 최소화하도록 특별히 설계된 가비지 컬렉터를 사용합니다. 이를 통해 React Native 앱의 애니메이션과 인터랙션이 더 부드러워질 수 있습니다.
-
저사양 기기와의 호환성 향상: Hermes는 하드웨어 성능이 떨어지는 저사양 Android 디바이스에서의 성능에 최적화되어 있습니다. 이를 통해 더 다양한 기기에서 앱이 더 원활한 경험을 제공할 수 있습니다.
-
커뮤니티 지원: Hermes는 React Native 커뮤니티에서 인기를 얻고 있으며, Facebook에서 적극적으로 유지 관리하고 있습니다. 이를 통해 지속적인 업데이트, 버그 수정 및 React Native의 최신 기능에 대한 지원을 보장합니다.
-
React Native 디버깅 도구와 호환: 디버깅은 JavaScriptCore를 사용할 때와 약간 다를 수 있지만, Hermes는 표준 디버깅 도구를 지원합니다. 여전히 Chrome 개발자 도구 또는 React Native 디버거와 같은 도구를 사용하여 React Native 앱을 디버깅할 수 있습니다.
