성능 향상을 위한 React Native 앱 최적화(2022)

우리 모두는 React Native, 성능 문제로 작업할 때 일반적인 문제 중 하나를 듣거나 접했습니다. 프로젝트가 점점 더 커짐에 따라 성능 문제가 훨씬 더 커질 수 있습니다. 운 좋게도 성능을 개선하고 React Native 앱을 최적화하기 위해 몇 가지 작업을 수행할 수 있습니다. 오늘 우리는 이러한 최적화 기술에 대해 논의할 것입니다.

이미지

일반적인 성능 문제 중 하나는 큰 이미지 파일 또는 앱 내부의 많은 이미지 때문일 수 있습니다. 멋진 라이브러리react-native-fast-image의 도움으로 이러한 이미지를 최적화할 수 있습니다.

React Native의 이미지 구성 요소는 대부분 브라우저와 같은 이미지 캐싱을 처리합니다. 서버가 이미지에 대한 적절한 캐시 제어 헤더를 반환하는 경우 일반적으로 브라우저에 있는 일종의 내장 캐싱 동작을 얻게 됩니다. 심지어 많은 사람들이 알아차렸습니다.

깜박임.

캐시 누락.

캐시에서 로드 성능이 낮습니다.

일반적으로 성능이 낮습니다.

FastImage는 이러한 문제를 해결하는 이미지 교체입니다. FastImage는 SDWebImage(iOS) 및 Glide(Android)의 래퍼입니다. 이점은 다음과 같습니다.

이미지를 적극적으로 캐시합니다.

인증 헤더를 추가합니다.

이미지에 우선 순위를 지정합니다.

이미지를 미리 로드합니다.

GIF 지원.

테두리 반경.

이미지를 사용할 때 고려해야 할 기타 사항,

1. 더 작은 크기의 이미지를 사용하십시오.

2. JPG 대신 PNG를 사용하십시오.

3. 이미지를 WebP 형식으로 변환합니다.

불필요한 재렌더링 방지

React 및 React Native 애플리케이션의 또 다른 일반적인 문제는 과도한/불필요한 다시 렌더링으로 인해 많은 성능이 저하될 수 있습니다. 이 문제를 해결하기 위해 memo과 함께 React Native의 react-fast-compare을 사용할 수 있습니다. 이 두 가지를 결합하면 최상의 성능을 얻을 수 있으며 구성 요소에 변경 사항이 없는 경우 다시 렌더링하지 않아도 됩니다.

React Fast Compare는 React에 대한 가장 빠른 심층 동등 비교를 제공합니다. 매우 빠른 범용 심층 비교도 가능합니다. React.memo 및 shouldComponentUpdate에 적합합니다.

예시:

import React, { memo } from 'react';
import equals from 'react-fast-compare';

const ExpensiveComponent = () => <></>

export default memo(ExpensiveComponent, equals);

콜백 기억하기

또 다른 중요한 최적화 기술은 인라인 함수를 피하고 React에서 useCallback으로 콜백 함수를 만드는 것입니다. 함수가 기억될 때 종속성이 변경되지 않으면 다시 생성되지 않습니다. 이 기술은 올바르게 사용하면 전체 응용 프로그램의 성능을 향상시키지만 필요하지 않은 곳에 과도하게 사용하지 마십시오.

예시:

import React, { useCallback } from 'react';

const App = () => {
  //Only recreated if a or b changes.
  const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);


  useEffect(() => {
    memoizedCallback();
  }, [memoizedCallback]);


  return <></>;
};

export default App;

플래시리스트

React Native의 Flatlist 팬이세요? 그러나 성능이 점차 떨어지는 큰 목록에 대해 최적화하는 데 문제가 있었습니다.

이제 Flashlist 에 적응할 때입니다. 이는 향상된 성능 및 기타 이점과 함께 Flatlist 위에 구축되었기 때문입니다.

그들의 문서가 말하는 것을 보십시오:

Similar props.

Instant performance.

Even with similar props as the React Native FlatList, FlashList recycles components under the hood to maximize performance.

그리고 솔직히 말씀드리자면 그들은 약속을 지켰습니다. 기본 Flatlist를 사용하는 것과 비교하여 성능이 크게 향상되었습니다.

시작 시간 개선

Hermes은 React Native에 최적화된 오픈 소스 JavaScript 엔진입니다. Hermes를 사용하면 메모리 사용량이 줄어들고 앱 크기가 작아지기 때문에 시작 시간을 향상시킬 수 있습니다. Hermes 이용 시 항상 최신 버전의 RN을 사용하시기 바랍니다.

모든 콘솔 문 제거

콘솔 문은 JavaScript 코드를 디버깅하는 데 필요하지만 개발 목적만을 위한 것입니다. 이러한 문을 번들링하기 전에 제거하지 않으면 React Native 애플리케이션에서 심각한 성능 문제가 발생할 수 있습니다.

결론:

React Native 앱 최적화는 모든 개발자가 프로덕션 등급 애플리케이션을 위해 따라야 하는 중요한 단계 중 하나입니다. 이 가이드는 프로젝트 최적화에 대한 더 나은 아이디어를 제공합니다.

끝까지 읽어주셔서 감사합니다.

이 게시물이 개발자 여정을 개선하는 데 도움이 되었기를 바랍니다.

원래 게시 날짜: https://blogs.appymango.com/blogs/62db7ccd1fb436d95d0149f8