간단한 Todo List 만들기

React 실전 프로젝트: 간단한 Todo List 만들기 상세 가이드

소개

React를 처음 배우고 실제 프로젝트를 경험하고 싶으신가요? 간단한 Todo List를 만들면서 React의 핵심 개념을 익히고, 실전 감각을 키워보세요. 이 글에서는 Todo List를 만드는 과정을 단계별로 상세히 설명하며, 함께 코드를 작성해나갈 것입니다.

준비물

• Node.js 및 npm (또는 yarn) 설치
• 기본적인 HTML, CSS, JavaScript 지식
• 텍스트 편집기 (Visual Studio Code, Atom 등)

728x90

프로젝트 시작하기

1. 새로운 React 프로젝트 생성:위 명령어를 실행하면 todo-app이라는 이름의 새로운 React 프로젝트가 생성됩니다. 

   npx create-react-app todo-app
   

    
2. 프로젝트 디렉토리 이동:
    

   cd todo-app
   

    

Todo List 구성 요소

• 입력 필드: 새로운 할 일을 입력하는 곳
• 추가 버튼: 입력한 할 일을 리스트에 추가하는 버튼
• 할 일 목록: 추가된 할 일들이 리스트 형태로 표시되는 곳
• 완료 체크박스: 할 일 완료 여부를 표시하고, 클릭하면 상태 변경
• 삭제 버튼: 각 할 일을 삭제하는 버튼

컴포넌트 분리

Todo List를 구성하는 각 요소를 별도의 컴포넌트로 분리하면 코드 관리가 용이해집니다.

• TodoInput: 입력 필드와 추가 버튼을 담당
• TodoList: 할 일 목록을 담당
• TodoItem: 개별 할 일 항목을 담당

상태 관리

React에서 상태(state)는 컴포넌트 내부의 데이터를 관리하는 중요한 개념입니다. Todo List에서는 다음과 같은 상태를 관리해야 합니다.

• todos: 모든 할 일 목록을 저장하는 배열
• inputValue: 입력 필드에 입력된 값

코드 구현

TodoInput 컴포넌트:

import React, { useState } from 'react';

function TodoInput({ addTodo }) {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!inputValue.trim()) return;
    addTodo(inputValue);
    setInputValue('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button type="submit">추가</button>
    </form>
  );
}

export default TodoInput;

 

TodoList 컴포넌트:

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

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

export default TodoList;

 

TodoItem 컴포넌트:

import React from 'react';

function TodoItem({ todo, toggleComplete, removeTodo }) {
  return (
    <li>
      <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>
    </li>
  );
}

export default TodoItem;

 

App 컴포넌트:

import React, { useState } from 'react';
import TodoInput from './TodoInput';
import TodoList from './TodoList';
import './App.css';

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

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

  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 className="App">
      <h1>Todo List</h1>
      <TodoInput addTodo={addTodo} />
      <TodoList
        todos={todos}
        toggleComplete={toggleComplete}
        removeTodo={removeTodo}
      />
    </div>
  );
}

export default App;

 

추가 기능 구현

• localStorage에 저장: 사용자가 브라우저를 닫더라도 Todo List 데이터를 유지하기 위해 localStorage를 사용할 수 있습니다.
• 필터링 기능: 모든 할 일, 완료된 할 일, 미완료된 할 일 등으로 필터링 기능을 추가할 수 있습니다.
• 드래그앤드롭: 할 일 순서를 드래그앤드롭으로 변경할 수 있도록 구현할 수 있습니다.

마무리

이 글에서는 React를 이용하여 간단한 Todo List를 만드는 과정을 상세히 설명했습니다. 이를 바탕으로 더욱 복잡한 React 애플리케이션을 개발할 수 있는 기반을 다지시길 바랍니다.