React 네이티브 최적화 Part-I

React 네이티브 최적화 Part-I

반응형

Akamai의 보고서에 따르면 모바일 로딩 시간의 단 1초 지연은 변환 속도를 최대 20%까지 낮출 수 있다.

먼저, 다음 파트에서 반응-토착 최적화의 몇 가지 주제에 대해 논의합니다. 기본 측면, CI, OTA 등을 사용하여 최적화 및 배치를 개선할 수 있는 방법에 대해 논의합니다.

잘못된 상태 업데이트로 인해 외부 렌더링 사이클이 발생하거나 장치가 너무 느림

React Native는 응용 프로그램을 렌더링하는 작업을 수행합니다. 여러분의 일은 여러분이 필요로 하는 모든 구성요소를 정의하고 이 작은 빌딩 블록에서 최종 인터페이스를 구성하는 것입니다. 이러한 접근 방식에서는 애플리케이션 렌더링 라이프사이클을 제어할 수 없습니다.

대부분의 성능 문제는 글로벌 또는 로컬 상태 업데이트가 잘못되거나 불필요하여 발생합니다. 성능에 부정적인 영향, UI 플리커 및 FPS 감소.

UseState Hook의 잘못된 사용

const [data,setData] = useState(processData());

저는 이런 코드 조각들을 보았습니다. 개발자들은 몇몇 init 데이터를 전달하는 대신 복잡성에 따라 밀리초 또는 초가 걸리는 일부 데이터를 처리하는 방법을 전달합니다. 이것은 좋은 생각이 아닙니다. 이것은 화면이 열리는 것을 지연시킵니다.

수명 주기 "사용 효과"를 사용하는 것이 좋습니다.

느린 장치의 문제

위의 코드는 대부분 잘 작동하지만 RN 비동기 특성으로 인해 입력 속도가 너무 빠를 때 느린 장치에서 문제를 발생시킨다. 왜냐하면 이것은 정보를 처리하고 그에 따라 setState를 호출하여 상태를 업데이트하는 양방향 작업이기 때문이다. 다음으로, 일반적으로 제어되는 구성 요소는 해당 자바스크립트 값을 기본 구성 요소 값과 동기화합니다.

이 접근 방식은 나쁘지는 않지만 장치가 제한된 리소스를 가지고 있고 메모리가 부족하기 때문에 깜박이기 시작했다. 동기화 문제의 해결 방법 중 하나는 TextInput에서 값 프로펠트를 완전히 제거하는 것입니다. 결과적으로 데이터는 네이티브에서 자바스크립트 측으로 한 방향으로만 흐릅니다.

하지만, @nparashuram이 그의 YouTube 비디오에서 지적했듯이, 이 해결책만으로는 어떤 경우에는 충분하지 않습니다. RN팀도 이 문제에 대해 연구하고 있다.

특정 레이아웃에 전용 구성 요소 사용

기본 구성 요소 외에도 React Native는 특정 목적에 맞게 설계되고 최적화된 일련의 고차 구성 요소를 제공합니다.

특히 실제 프로덕션 데이터로 상태를 채울 때 이러한 데이터를 인식하지 못하거나 모든 위치에서 사용하지 않으면 애플리케이션 성능에 영향을 미칠 수 있습니다.

일부 Dev에서는 스크롤 보기를 사용한 다음 어레이 크기에 따라 보기를 매핑합니다. 그러나 전용 구성 요소가 있는 경우 이 보기를 만들려고 하는 이유는 좋지 않습니다.

항목 크기가 다른 데이터가 많을 경우 플랫 리스트에도 속도가 느릴 수 있습니다. 이 경우 고정 높이를 반환해야 합니다. 아래의 코드 조각을 참조하십시오.

외부 라이브러리를 선택하기 전에 주의하십시오.

문제는 대부분의 개발자들이 그 안에 무엇이 있는지 확인하지 않고 도서관을 고르는 것이다! 단지 큰 도서관 전체를 고르는 한 가지 방법만을 위해.

개발자는 동일한 사용 사례를 지원하는 여러 라이브러리에서 선택하기가 어려울 수 있습니다. 올바른 자바스크립트 라이브러리로 작업하면 앱의 속도와 성능을 향상시킬 수 있습니다. 다음 프로젝트에서 사용할 지표를 선택할 때, 그들은 종종 Github 스타, 이슈의 수, 기여자 및 홍보와 같이 도서관이 건강하고 잘 유지되고 있는지를 알려주는 지표를 조사한다.

모바일 개발 기본이 다르기 때문에 위치, 라이브러리 크기 및 지원되는 기능의 수, 장치 지원 등 자산의 크기를 찾아야 합니다.

import moment from ‘moment’ const date = moment(“12-25-1995”, “MM-DD-YYYY”);

동일한 유형의 작업 개발 모멘트가 67kb 크기의 파일로 사용되는 것을 여러 프로젝트에서 볼 수 있습니다.

훨씬 작고 원하는 기능만 제공하는 day.js(단 2Kb)를 사용할 수 있습니다.

import dayjs from ‘dayjs’ const date = dayjs(“12-25-1995”, “MM-DD-YYYY”);

대안이 없는 경우, 라이브러리의 더 작은 부분을 가져올 수 있는지 확인하는 것이 좋습니다.

이점은 "앱이 더 빨리 로드되어 차이를 만들 수 있다"는 것입니다.

모바일 플랫폼 전용 라이브러리를 사용해야 한다는 점을 항상 기억하십시오.

문제는 모바일에 최적화되지 않은 웹 라이브러리를 사용한다는 것입니다. 최적화된 라이브러리가 없으면 배터리가 방전되고 앱 속도가 느려집니다. OS가 애플리케이션 기능을 제한할 수 있습니다.

웹, 안드로이드, IOS용 SDK를 제공하는 파이어베이스의 예를 들어보자. 웹 버전을 큰 문제 없이 실행할 수 있습니다.

import database from ‘firebase/database’; database() .ref(‘/users/123’) .on(‘value’, snapshot => { console.log(‘User data: ‘, snapshot.val()); });

위의 예제는 모바일과 동일한 성능을 제공하지 않습니다.

이 예에서는 전용 네이티브 SDK 위에 씬 레이어를 제공하고 다른 네이티브 애플리케이션과 동일한 성능과 안정성을 제공하는 전용 파이어베이스 라이브러리를 사용하는 것이 좋습니다.

리액션 네이티브 최적화의 첫 부분을 읽어주셔서 감사합니다. 대부분의 개발자들이 어떤 이유로든 이러한 유형의 실수를 저지르지만 성능이나 깜박임 문제로 이어집니다.

다음 파트에서는 커버

지느러미로 디버그하다

헴을 사용하여 안드로이드 최적화를 수행합니다.

최적화 안드로이드를 위한 Gradle 설정입니다.

OTA와 CI/CD.

from http://it-ground.tistory.com/173 by ccl(A) rewrite - 2021-09-14 04:27:45