갓난애기도 배울 수 있는 React Native 가이드 ⑥ – FlatList와 상세 화면 연결하기 (실전 To-Do 앱 연동)

갓난애기도 배울 수 있는 React Native 가이드 ⑥ – FlatList와 상세 화면 연결하기 (실전 To-Do 앱 연동)

앞서 우리는 FlatList로 할 일 목록을 만들고,
React Navigation을 이용해 화면 전환 구조도 구현했습니다.

이번 글에서는 이 둘을 연결해서,
할 일 목록을 클릭하면 해당 상세 화면으로 이동하는 실전 To-Do 앱 기능을 완성해 봅니다.
지금까지 배운 모든 내용을 실전에 적용하는 “통합 실습편”입니다! 🚀

---

✅ 1. 준비: 프로젝트 디렉토리 구조

/screens
  ├── HomeScreen.js
  └── DetailScreen.js
App.js

---

✅ 2. App.js – 네비게이션 설정

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: '할 일 목록' }} />
        <Stack.Screen name="Detail" component={DetailScreen} options={{ title: '할 일 상세' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

---

✅ 3. HomeScreen.js – FlatList + 네비게이션 연동

반응형

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

const HomeScreen = ({ navigation }) => {
  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 }) => (
          <TouchableOpacity
            style={styles.todoItem}
            onPress={() => navigation.navigate('Detail', { todo: item })}
          >
            <Text style={styles.todoText}>📝 {item.title}</Text>
          </TouchableOpacity>
        )}
        ListEmptyComponent={<Text style={{ marginTop: 20 }}>할 일이 없습니다.</Text>}
        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,
  },
});

export default HomeScreen;

---

✅ 4. DetailScreen.js – 전달된 데이터 표시

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

const DetailScreen = ({ route }) => {
  const { todo } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.label}>할 일 번호</Text>
      <Text style={styles.content}>{todo.id}</Text>

      <Text style={styles.label}>제목</Text>
      <Text style={styles.content}>{todo.title}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  label: { fontSize: 18, color: '#888', marginTop: 16 },
  content: { fontSize: 20, fontWeight: 'bold' },
});

export default DetailScreen;

---

✅ 5. 흐름 요약

1. HomeScreen에서 FlatList로 할 일 목록 표시
2. 항목 클릭 → navigation.navigate('Detail', { todo })
3. DetailScreen에서 route.params.todo로 데이터 접근
4. 상세 정보를 화면에 출력

---

✅ 6. 추가 팁 (선택 구현)

기능 구현 방식

완료 체크/삭제	Swipeable, Checkbox, IconButton 활용
중요 표시	todo.important 필드 추가 후 스타일 분기
날짜 표시	createdAt 값 저장 후 출력 (toLocaleDateString())

---

✅ 7. 이번 글에서 배운 것

• FlatList 아이템 클릭 이벤트 처리
• navigation.navigate()로 파라미터 전달
• route.params로 상세 화면 데이터 표시
• 실전 To-Do 앱 구조의 기초 완성

---

📘 다음 글 예고

갓난애기도 배울 수 있는 React Native 가이드 ⑦ – 앱 완성 후 빌드 및 배포 전략 (Android & iOS)

앱을 잘 만들었으니 이제 세상에 공개해야겠죠?
다음 편에서는 APK 빌드, iOS 시뮬레이터 실행, 실제 기기 테스트 및 배포 흐름을 정리합니다!

---

 

React Native FlatList 상세화면,React Native 리스트 화면전환,React Native navigation with params,React Native ToDo 상세 보기,React Native route.params 사용법,React Native 화면 이동 데이터 전달,React Native 리스트 클릭 이벤트,React Native 화면 전환 예제,React Native 앱 구조 연동,React Native 실전 앱 개발

---