리액트 네이티브로 TodoApp 구현하기 - 1

리액트 네이티브로 간단한 Todo 리스트 앱 만들기 (기본 구조)

1. 프로젝트 생성:

npx @react-native-community/cli init TodoApp
cd TodoApp

2. 기본 컴포넌트 생성:

* `App.js`: 앱의 최상위 컴포넌트
* `TodoItem.js`: 각 Todo 항목을 나타내는 컴포넌트
* `TodoList.js`: Todo 목록을 관리하는 컴포넌트
* `InputTodo.js`: 새로운 Todo를 입력하는 컴포넌트

3. App.js:

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import InputTodo from './InputTodo';
import TodoList from './TodoList';

const App = () => {
  const [todos, setTodos] = useState([]);

  // Todo 추가, 삭제, 완료 기능 구현 (아래에서 설명)
  const addTodo = () => { console.log('addTodo') }
  const deleteTodo = () => { console.log('deleteTodo') }
  const markComplete = () => { console.log('markComplete') }

  return (
    <View style={styles.container}>
      <InputTodo addTodo={addTodo} />
      <TodoList todos={todos} deleteTodo={deleteTodo} markComplete={markComplete} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});

export default App;

4. TodoList.js:

import React from 'react';
import { FlatList, View } from 'react-native';
import TodoItem from './TodoItem';

const TodoList = ({ todos, deleteTodo, markComplete }) => {
  return (
    <View>
      <FlatList
        data={todos}
        renderItem={({ item }) => (
          <TodoItem item={item} deleteTodo={deleteTodo} markComplete={markComplete} />
        )}
      />
    </View>
  );
};

export default TodoList;

5. TodoItem.js:

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

const TodoItem = ({ item, deleteTodo, markComplete }) => {
  return (
    <TouchableOpacity onPress={() => markComplete(item.id)}>
      <View>
        <Text style={item.completed ? styles.completed : styles.item}>{item.text}</Text>
      </View>
    </TouchableOpacity>
  );
};

// 스타일 정의

export default TodoItem;

6. InputTodo.js:

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

const InputTodo = ({ addTodo }) => {
  const [text, setText] = useState('');

  const onChange = (textValue) => setText(textValue);

  const handleSubmit = () => {
    // Todo 추가 로직 구현 (App.js에서 addTodo 함수 호출)
  };

  return (
    <View>
      <TextInput placeholder="할 일 입력" onChangeText={onChange} />
      <Button title="추가" onPress={handleSubmit} />
    </View>
  );
};

export default InputTodo;

7. 기능 구현:

* Todo 추가: `addTodo` 함수에서 `todos` 상태를 업데이트하고 새로운 Todo를 추가합니다.
* Todo 삭제: `deleteTodo` 함수에서 해당 Todo의 id를 이용하여 `todos` 상태에서 삭제합니다.
* Todo 완료: `markComplete` 함수에서 해당 Todo의 `completed` 속성을 변경하여 완료 상태를 토글합니다.

 

8. 실행

npm run android

 

TodoApp

주의:

* 위 코드는 기본적인 Todo 리스트 앱의 구조를 보여주는 예시입니다. 실제 앱 개발에서는 더 많은 기능과 디자인 요소를 추가해야 합니다.
* 상태 관리 라이브러리 (Redux, MobX 등)를 사용하여 더 복잡한 앱을 관리할 수 있습니다.
* 스타일링은 `StyleSheet`을 사용하여 직접 정의하거나, 스타일 시트 파일을 별도로 만들어 관리할 수 있습니다.

다음 단계:

* 디자인: 스타일을 추가하여 앱의 디자인을 개선합니다.
* 기능 추가: Todo 편집, 검색, 필터링 등 다양한 기능을 추가합니다.
* 지속적인 개선: 사용자 피드백을 반영하여 앱을 지속적으로 개선합니다.