[리액트] - [할 일 관리] 앱 만들기 - 1

기본적인 할 일 관리 앱은 다음과 같은 기능을 포함할 수 있습니다.

 

1. 할 일 추가

2. 할 일 삭제

3. 할 일 완료 상태 토글

4. 할 일 목록 표시

 

UI 요소를 컴포넌트 단위로 생각하는 게 중요하다고 생각합니다.

 

1. 프로젝트 설정

먼저 Create React App을 사용하여 새로운 리액트 프로젝트를 생성합니다.

npx create-react-app todo_app
cd todo-app
npm start

 

2. 기본 구조 설정

프로젝트 폴더 구조는 다음과 같이 구성할 수 있습니다:

public/
src/
  └── components/
        ├── TodoItem.js
        ├── TodoList.js
        └── TodoForm.js
  └── App.js
  └── index.js

 

3. 컴포넌트 작성

 

TodoItem.js

 

import React from 'react';

const TodoItem = ({ todo, toggleComplete, removeTodo }) => {
  return (
    <div>
      <input 
        type="checkbox" 
        checked={todo.completed} 
        onChange={() => toggleComplete(todo.id)} 
      />
      <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
        {todo.text}
      </span>
      <button onClick={() => removeTodo(todo.id)}>삭제</button>
    </div>
  );
};

export default TodoItem;

 

 

TodoList.js

 

import React from 'react';
import TodoItem from './TodoItem';

const TodoList = ({ todos, toggleComplete, removeTodo }) => {
  return (
    <div>
      {todos.map(todo => (
        <TodoItem 
          key={todo.id} 
          todo={todo} 
          toggleComplete={toggleComplete} 
          removeTodo={removeTodo} 
        />
      ))}
    </div>
  );
};

export default TodoList;

 

 

TodoForm.js

 

import React, { useState } from 'react';

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

  const handleSubmit = e => {
    e.preventDefault();
    if (text.trim()) {
      addTodo(text);
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={text} 
        onChange={e => setText(e.target.value)} 
      />
      <button type="submit">추가</button>
    </form>
  );
};

export default TodoForm;

 

4. 메인 컴포넌트 작성

 

App.js

 

import React, { useState } from 'react';
import TodoList from './components/TodoList';
import TodoForm from './components/TodoForm';

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

  const addTodo = text => {
    setTodos([...todos, { id: Date.now(), text, completed: false }]);
  };

  const toggleComplete = id => {
    setTodos(
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const removeTodo = id => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div>
      <h1>할 일 관리</h1>
      <TodoForm addTodo={addTodo} />
      <TodoList todos={todos} toggleComplete={toggleComplete} removeTodo={removeTodo} />
    </div>
  );
};

export default App;

 

5. 프로젝트 실행

이제 프로젝트를 실행하면 기본적인 할 일 관리 앱이 동작하는 것을 확인할 수 있습니다.

 

추가적인 스타일링이나 기능을 구현하여 더욱 완성도 높은 앱을 만들 수 있습니다.

 

npm start