갓난애기도 배울 수 있는 React Native 가이드 ④ – FlatList로 리스트 뿌리기 (ToDo 앱 준비하기)

갓난애기도 배울 수 있는 React Native 가이드 ④ – FlatList로 리스트 뿌리기 (ToDo 앱 준비하기)

앱에서 가장 자주 쓰이는 UI 중 하나는 바로 "리스트" 입니다.
뉴스 앱, 쇼핑 앱, 메모 앱, 채팅 앱… 전부 리스트가 기본이죠!
이번 글에서는 React Native에서 리스트를 표현하는 FlatList 컴포넌트를 실습을 통해 완전히 이해해보겠습니다.
그리고 이것은 우리가 만들 To-Do 앱의 핵심 뼈대이기도 합니다 💪

---

✅ 1. FlatList란?

React Native에서 배열 형태의 데이터를 반복 렌더링해주는 기본 컴포넌트입니다.
스크롤 가능한 성능 최적화된 리스트를 쉽게 만들 수 있어요.

---

✅ 2. FlatList 기본 사용법

import { FlatList, Text, View } from 'react-native';

const data = [
  { id: '1', title: '할 일 1' },
  { id: '2', title: '할 일 2' },
  { id: '3', title: '할 일 3' },
];

<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <View>
      <Text>{item.title}</Text>
    </View>
  )}
/>

• data: 보여줄 배열 데이터
• keyExtractor: 각 아이템의 고유 key (필수!)
• renderItem: 아이템 하나를 렌더링하는 방법

---

✅ 3. 스타일 추가 예제

<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <View style={{ padding: 12, borderBottomWidth: 1, borderColor: '#eee' }}>
      <Text style={{ fontSize: 18 }}>{item.title}</Text>
    </View>
  )}
/>

---

✅ 4. 실습: 동적으로 리스트 추가하기

반응형

📄 App.js

import React, { useState } from 'react';
import { View, TextInput, Button, FlatList, Text, StyleSheet } from 'react-native';

export default function App() {
  const [todo, setTodo] = useState('');
  const [todoList, setTodoList] = useState([]);

  const addTodo = () => {
    if (todo.trim() === '') return;

    const newTodo = {
      id: Date.now().toString(),
      title: todo,
    };

    setTodoList([newTodo, ...todoList]);
    setTodo('');
  };

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="할 일을 입력하세요"
        value={todo}
        onChangeText={setTodo}
        style={styles.input}
      />
      <Button title="추가하기" onPress={addTodo} />

      <FlatList
        data={todoList}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.todoItem}>
            <Text style={styles.todoText}>📝 {item.title}</Text>
          </View>
        )}
        style={{ marginTop: 20 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, paddingTop: 60 },
  input: {
    borderWidth: 1,
    borderColor: '#bbb',
    padding: 10,
    borderRadius: 6,
    marginBottom: 10,
  },
  todoItem: {
    padding: 12,
    borderBottomWidth: 1,
    borderColor: '#eee',
  },
  todoText: {
    fontSize: 18,
  },
});

---

✅ 5. FlatList의 장점

특징 설명

성능 최적화	많은 데이터도 렌더링 효율적으로 처리
무한 스크롤	onEndReached로 무한 로딩 구현 가능
헤더/푸터/빈칸 커스터마이징	ListHeaderComponent, ListFooterComponent, ListEmptyComponent 지원

---

✅ 6. 추가 꿀팁

🔄 리스트 역순으로 추가하기

setTodoList([newTodo, ...todoList]); // 최신 항목이 위로

❌ 빈 값 막기

if (todo.trim() === '') return;

---

✅ 7. 이번 글에서 배운 것

• FlatList의 구조와 사용법
• 아이템 렌더링 방식 이해 (renderItem)
• keyExtractor의 중요성
• 동적 리스트 데이터 추가 및 상태 업데이트
• To-Do 앱의 뼈대 구현 시작

---

📘 다음 글 예고

갓난애기도 배울 수 있는 React Native 가이드 ⑤ – 화면 전환과 Stack Navigator 도입하기

To-Do 앱을 하나의 페이지에서만 구현하기는 아쉽죠!
다음 글에서는 React Navigation을 도입해서
"할 일 작성 → 목록 보기 → 상세 화면"으로 이어지는 화면 전환 흐름을 만들어봅니다!

---

 

React Native FlatList 예제,React Native 리스트 렌더링,React Native ToDo 앱,React Native 입력값 리스트화,React Native 동적 리스트,React Native 앱 구조,React Native 실습 프로젝트,React Native keyExtractor,React Native 상태관리 리스트,React Native 할 일 앱