[React Native] 최적화 / 앱 성능 향상 방법 (작성중)

 

 

 

 

 

1. IOS에서 대응하는 프레임을 고려하자

IOS 기기는 초당 60프레임을 표시하여 사용자와 UI 시스템에 16.67ms가 주어지고 그 시간 내에 프레임을 생성하는데 필요한 작업을 수행할 수 없다면 프레임이 삭제되고 UI가 응답하지 않는 것처럼 보인다.

 

 

2. 상용에서 console.log를 제거하자

병목현상이 일어날 수 있다.

// .babelrc
{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

npm i babel-plugin-transform-remove-console --save-dev

 

 

3. FlatList 또는 SectionList를 사용하자

FlatList를 사용하면 행 수에 관계없이 거의 일정한 메모리양을 사용한다. 만약 FlatList가 느리다면 getItemLayout를 사용하여 렌더링된 항목의 측정을 건너뛰어 렌더링 속도를 최적화 할 수 있다. getItemLayout은 크기가 고정된 항목이 있는 경우 효율적이다.

  getItemLayout={(data, index) => (
    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
  )}

 

 

4. TouchableXXX를 사용하는 경우도 대응하자

해당 컴포넌트는 onPress 될 때 Opacity나 하이라이트를 적용할 수 있는데, 만약 몇개의 프레임이 삭제되는 결과를 가져오는 onPress 작업을 수행하는 경우에는 느린 문제가 발생할 수 있다. 이런 경우 requestAnimationFrame를 래핑한다.

handleOnPress() {
  requestAnimationFrame(() => {
    this.doExpensiveAction();
  });
}

 

 

5. 이미지 크기를 애니메이션화 하자

IOS에서 Image 구성 요소의 너비나 높이를 조정할 때 마다 원본 이미지에서 다시 자르고 크기를 조정한다. 이는 특히 큰 이미지의 경우 비용이 들 수 있다. transform: [{scale}] 속성을 사용하여 크기를 애니메이션화 하자.

 

 

6. React.memo()와 PureComponent를 사용하자

- memo(): 함수형 컴포넌트를 래핑하여 제공된 props가 변경된 경우에만 다시 렌더링하자. (얕은 비교)

import React from ‘react’;

const MyComponent = React.memo((props) => {
  // Your component logic and JSX here
});

export default MyComponent;

 

- PureComponent: class형 컴포넌트에 사용하며 memo()와 동일하다.

import React, { PureComponent } from ‘react’;

class MyComponent extends PureComponent {
  // Your component logic and JSX here
}

export default MyComponent;

 

 

 

 

---

 

 

 

출처

https://talent500.co/blog/boosting-react-native-app/

https://reactnative.dev/docs/performance