리액트 네이티브에서 리스트를 구현하는 방법은 무엇인가요?
_____A1: 보통 `FlatList`와 `SectionList`를 사용하며, 간단한 경우에는 `ScrollView`도 사용할 수 있습니다. 가장 일반적인 것은 `FlatList`입니다.
Q2: `FlatList` 사용법은 어떻게 되나요?
A2: `FlatList`는 배열 데이터를 받아 각 항목을 렌더링합니다. 주요 필수 props는 `data`와 `renderItem`이며, 고유 키를 위한 `keyExtractor`도 자주 사용됩니다. 예:
```jsx
keyExtractor={item => item.id}
renderItem={({item}) =>
/>
```
Q3: `FlatList`와 `ScrollView`는 어떤 차이가 있나요?
A3: `ScrollView`는 모든 자식을 한 번에 렌더링하여 소규모 리스트에 적합하지만, 대량 데이터에서는 성능 저하가 발생합니다. `FlatList`는 화면에 보이는 아이템만 렌더링하는 가상화(virtualized) 리스트로, 많은 데이터 처리에 적합합니다.
Q4: 리스트에 헤더나 푸터를 추가하려면 어떻게 하나요?
A4: `FlatList`는 `ListHeaderComponent`와 `ListFooterComponent` props를 제공하여 헤더와 푸터 컴포넌트를 지정할 수 있습니다.
예:
```jsx
renderItem={renderItem}
ListHeaderComponent={() =>
ListFooterComponent={() =>
/>
```
Q5: 리스트 항목을 섹션별로 나누려면 어떻게 하죠?
A5: `SectionList`를 사용합니다. 데이터는 섹션 배열 형식이며, 각각의 섹션에 `title`과 `data`가 있어야 합니다.
예:
```jsx
{title: 'Fruits', data: ['Apple', 'Banana']},
{title: 'Vegetables', data: ['Carrot', 'Broccoli']}
]}
renderItem={({item}) =>
renderSectionHeader={({section}) =>
/>
```
Q6: 리스트에서 각 아이템 클릭 이벤트를 처리하려면?
A6: `renderItem` 함수 내에서 터치 가능한 컴포넌트 (`TouchableOpacity`, `Pressable` 등)로 감싸고 클릭 콜백을 설정합니다.
예:
```jsx
renderItem={({item}) => (
)}
```
Q7: 리스트 성능 최적화를 위해 주의할 점이 있나요?
A7:
- `keyExtractor`는 고유하고 안정적인 키를 제공해야 한다.
- 필요하면 `getItemLayout`을 구현하여 리스트 항목 높이를 알려 비동기 스크롤 성능 향상.
- `initialNumToRender`와 `maxToRenderPerBatch`로 렌더링 배치 조절.
- 가능하면 `PureComponent`나 `React.memo`를 사용해 불필요한 재렌더링 방지.
Q8: 리스트 내 아이템을 편집(추가, 삭제, 수정)하려면 어떻게 하나요?
A8: 리스트 데이터는 보통 상태(state)로 관리하고, 아이템 추가/삭제 시 상태를 업데이트하면 자동으로 UI가 갱신됩니다. 예를 들어, `useState`를 사용해 배열 상태를 관리합니다.
---
요약하면, 리액트 네이티브에서 리스트를 구현할 때 `FlatList`가 가장 기본이며, 성능과 편의성을 고려해 데이터와 렌더링 방식을 적절히 설정하면 됩니다. `SectionList`는 섹션 단위의 리스트, `ScrollView`는 소규모 리스트용으로 사용합니다.
이 두 컴포넌트는 성능이 뛰어나고, 대량의 데이터를 효율적으로 렌더링할 수 있도록 설계되었습니다.
아래에서는 `FlatList`와 `SectionList`를 사용하는 방법에 대해 자세히 설명하겠습니다.
1. FlatList `FlatList`는 단일 섹션의 스크롤 가능한 리스트를 구현할 때 사용됩니다.
기본적인 사용법은 다음과 같습니다.
기본 사용법 ```javascript import React from 'react'; import { FlatList, Text, View, StyleSheet } from 'react-native'; const DATA = [ { id: '1', title: 'Item 1' }, { id: '2', title: 'Item 2' }, { id: '3', title: 'Item 3' }, // ... 더 많은 데이터 ]; const Item = ({ title }) => (
- `renderItem`: 각 항목을 렌더링하는 함수입니다.
- `keyExtractor`: 각 항목의 고유 키를 반환하는 함수입니다.
성능 최적화를 위해 필수입니다.
- `horizontal`: 리스트를 수평으로 스크롤할지 여부를 결정합니다.
- `onEndReached`: 리스트의 끝에 도달했을 때 호출되는 함수입니다.
무한 스크롤 구현에 유용합니다.
2. SectionList `SectionList`는 여러 섹션으로 나누어진 리스트를 구현할 때 사용됩니다.
각 섹션은 제목과 항목으로 구성됩니다.
기본 사용법 ```javascript import React from 'react'; import { SectionList, Text, View, StyleSheet } from 'react-native'; const DATA = [ { title: 'Section 1', data: ['Item 1-1', 'Item 1-2', 'Item 1-3'], }, { title: 'Section 2', data: ['Item 2-1', 'Item 2-2', 'Item 2-3'], }, // ... 더 많은 섹션 ]; const App = () => { const renderItem = ({ item }) => (
각 섹션은 제목과 데이터 배열을 포함합니다.
- `renderSectionHeader`: 각 섹션의 헤더를 렌더링하는 함수입니다.
- `stickySectionHeadersEnabled`: 섹션 헤더가 스크롤 시 상단에 고정될지 여부를 결정합니다.
3. 성능 최적화 리스트의 성능을 최적화하기 위해 다음과 같은 방법을 사용할 수 있습니다.
- getItemLayout : 항목의 크기가 일정할 경우, 이 함수를 사용하여 성능을 개선할 수 있습니다.
- initialNumToRender : 초기 렌더링 시 표시할 항목의 수를 설정합니다.
- windowSize : 스크롤 시 미리 렌더링할 항목의 수를 조정합니다.
- removeClippedSubviews : 화면에 보이지 않는 항목을 제거하여 메모리 사용량을 줄입니다.
4. 리액트 네이티브에서 리스트를 구현하는 것은 `FlatList`와 `SectionList`를 통해 간단하고 효율적으로 할 수 있습니다.
각 컴포넌트의 특성과 사용법을 이해하고, 성능 최적화 기법을 적용하면 대량의 데이터를 효과적으로 처리할 수 있습니다.
이러한 리스트 컴포넌트를 활용하여 사용자에게 매끄럽고 반응성이 뛰어난 경험을 제공할 수 있습니다.
