Touchable 구성 요소
React Native의 Touchable 구성 요소는 사용자가 터치 이벤트를 발생시킬 수 있는 여러 가지 컴포넌트를 제공한다.
- TouchableHighlight: 버튼 또는 링크와 같은 일반적인 터치 기반 컴포넌트에 적합하다.
- TouchableOpacity: 불투명도를 줄이는 것 외에도 TouchableHighlight와 거의 동일하지만, 터치 이벤트가 활성화되는 시기가 다르다.
- TouchableNativeFeedback: Android에서만 사용 가능하며, 하드웨어 버튼 클릭과 유사한 효과를 제공한다.
- TouchableWithoutFeedback: 터치 이벤트에 대한 시각적 피드백을 제공하지 않는 가장 간단한 터치 기반 컴포넌트이다.
각 Touchable 구성 요소는 다양한 터치 이벤트를 처리할 수 있으며, onPress, onLongPress 등의 콜백 함수를 사용하여 터치 이벤트를 활용할 수 있다.
성능 문제의 주요 원인
- 불필요한 리렌더링: React Native는 Virtual DOM을 사용하여 UI를 렌더링한다. 때로는 리렌더링을 방지하기 위해 적절한 라이프사이클 메서드나 shouldComponentUpdate를 구현해야 한다.
- 느린 네트워크: React Native 애플리케이션은 대개 서버와의 통신을 필요로 하는데, 네트워크 연결이 느리거나 불안정한 경우에 애플리케이션의 성능에 부정적인 영향을 미칠 수 있다.
- 큰 이미지 처리: 큰 이미지 파일을 로드하고 표시하는 것은 성능에 좋지 않은 영향을 미칠 수 있다. React Native에서는 이미지 컴포넌트를 사용하여 이미지를 효율적으로 처리할 수 있다.
- 너무 많은 컴포넌트: 화면에 렌더링하는 컴포넌트의 수가 많을수록 성능이 저하될 가능성이 높다. 필요하지 않은 컴포넌트를 제거하고 필요한 데이터만 렌더링하는 것이 중요하다.
- 스크롤 성능: React Native에서 스크롤링은 많은 자원을 소비할 수 있다. 리스트와 같은 컴포넌트를 사용하여 성능을 최적화할 수 있습니다.
- 메모리 누수: 메모리 누수는 React Native 애플리케이션에서 일반적인 문제이다. 메모리 누수를 방지하기 위해 적절한 라이프사이클 메서드를 구현하고, 사용하지 않는 자원을 적시에 해제해야 한다.
- 쓰레기 수집: React Native는 자바스크립트 엔진에서 쓰레기 수집을 처리한다. 그러나 큰 객체나 배열을 생성하거나 자주 생성 및 삭제되는 객체는 쓰레기 수집에 부정적인 영향을 미칠 수 있다. 이를 방지하기 위해 객체를 재활용하는것이 좋다.
ListView, FlatList, ScrollView
- ListView: 이전 버전의 React Native에서 사용되었으며 데이터 소스를 통해 리스트를 렌더링한다. ListView는 데이터 소스가 변경될 때마다 리스트를 다시 렌더링하여 성능 문제를 야기할 수 있다.
- FlatList: ListView와 달리 React Native에서 추천하는 리스트 컴포넌트이다. 데이터가 많아져도 높은 성능을 유지할 수 있다. FlatList는 데이터를 나타내는 배열을 입력으로 받고 renderItem 속성을 사용하여 각 데이터 항목의 모양을 정의한다.
- ScrollView: ListView나 FlatList와 달리 모든 요소를 렌더링한다. 그렇기 때문에 많은 수의 요소를 포함하거나 렌더링 속도가 중요한 경우에는 권장되지 않는다. 대신 일반적인 스크롤 뷰의 목적으로 사용된다.
즉, ListView는 성능 이슈가 있고 데이터 소스를 사용한다. FlatList는 성능이 우수하고 대량의 데이터에 대한 처리를 위해 만들어졌다. ScrollView는 일반 스크롤 뷰 용도로 사용된다.