Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon React Native에서 재렌더링을 최소화하는 기술


React Native에서 재렌더링을 최소화하는 기술


React Native에서 다시 렌더링을 최소화하려면 다음 기술을 따르십시오.

1. 메모:
- `useMemo`를 사용하여 재렌더링 사이의 계산을 캐시하여 props나 상태가 변경되지 않았을 때 불필요한 재렌더링을 방지합니다[1].

2. 가상화된 목록:
- `FlatList`, `SectionList` 또는 `VirtualList`를 활용하여 화면에 표시되는 항목만 효율적으로 렌더링하여 메모리 사용량과 렌더링 성능을 최적화합니다[1].

3. 이미지 최적화:
- 최적화된 이미지 로딩 및 캐싱을 위해 'react-native-fast-image' 또는 'expo-image'와 같은 라이브러리를 사용하여 보다 원활한 사용자 경험을 보장합니다[1].

4. 비용이 많이 드는 작업 디바운스:
- 기능을 실행하기 전에 지연 기간 또는 "디바운스 지연"을 도입하여 검색 및 네트워크 요청과 같은 기능에 대한 과도한 호출을 방지합니다[1].

5. React.memo 또는 React.PureComponent 사용:
- `React.memo` 또는 `React.PureComponent`[3]를 사용하여 props가 변경될 때만 구성 요소가 다시 렌더링되는지 확인하세요.

6. 불필요한 재렌더링 방지:
- `useMemo`를 사용하여 객체가 업데이트되는 시기를 제한하고 객체 리터럴이나 동적 계산으로 인해 발생하는 불필요한 재렌더링을 방지하세요[3].

7. 재렌더링을 방지하기 위해 키 사용:
- 목록의 항목이 변경될 때 키를 사용하여 다시 렌더링하지 않도록 하여 효율적인 렌더링 및 성능을 보장합니다[4].

8. 구성 요소 구성 최적화:
- 불필요한 재렌더링을 방지하고 'useMemo' 및 'useCallback'[4]과 같은 후크 사용을 최적화하여 구성 요소가 효율적으로 구성되도록 합니다.

이러한 기술은 React Native의 재렌더링을 최소화하여 보다 원활한 사용자 경험과 더 나은 성능을 보장합니다.

인용:
[1] https://thoughtbot.com/blog/optimizing-performance-in-react-native-tips-and-techniques
[2] https://www.reddit.com/r/reactnative/comments/uaaxyu/tips_on_how_to_reduce_rerenders/
[3] https://www.debugbear.com/blog/react-rerenders
[4] https://dev.to/femi_akinyemi/how-to-prevent-unnecessary-react-comComponent-re-rendering-3c08
[5] https://www.linkedin.com/pulse/avoid-unnecessary-re-renders-reactjs-christian-zanchetta