30분만에 만드는 Todo App 완성 가이드

이 30분만에 만드는 Todo App 완성 가이드는 초보 개발자도 쉽게 따라할 수 있도록 설계되었습니다. React와 LocalStorage를 활용하여 실용적인 할 일 관리 애플리케이션을 빠르게 구축하는 방법을 단계별로 안내합니다. 이 가이드를 통해 프론트엔드 개발의 핵심 개념을 익히고, 포트폴리오에 추가할 수 있는 완성도 높은 프로젝트를 만들어보세요.

1. 프로젝트 소개 및 목표

Todo App은 개발 학습의 고전적인 예제이지만, 실제로 사용 가능한 수준으로 만들면 상태 관리, 이벤트 처리, 데이터 영속성 등 다양한 개념을 배울 수 있습니다. 이 프로젝트의 목표는 다음과 같습니다:

• 할 일 추가, 수정, 삭제 기능 구현
• 완료/미완료 상태 토글 기능
• LocalStorage를 통한 데이터 저장
• 필터링 기능 (전체/활성/완료)
• 반응형 디자인 적용

30분 안에 기본 기능을 모두 구현하고, 즉시 사용 가능한 애플리케이션을 완성하는 것이 핵심입니다.

2. 필요한 기술 스택

이 프로젝트를 완성하기 위해 필요한 기술 스택은 다음과 같습니다:

• React 18+: UI 컴포넌트 구축
• Vite: 빠른 개발 환경 설정
• CSS3: 스타일링 및 반응형 디자인
• LocalStorage API: 브라우저 기반 데이터 저장
• JavaScript ES6+: 최신 문법 활용

별도의 백엔드나 데이터베이스 없이 프론트엔드만으로 완성할 수 있어 초보자도 부담 없이 시작할 수 있습니다.

3. 프로젝트 셋업

먼저 Vite를 사용하여 React 프로젝트를 생성합니다. 터미널에서 다음 명령어를 실행하세요:

npm create vite@latest todo-app -- --template react
cd todo-app
npm install
npm run dev

프로젝트 구조를 다음과 같이 정리합니다:

todo-app/
├── src/
│   ├── components/
│   │   ├── TodoInput.jsx
│   │   ├── TodoList.jsx
│   │   ├── TodoItem.jsx
│   │   └── TodoFilter.jsx
│   ├── App.jsx
│   ├── App.css
│   └── main.jsx
├── index.html
└── package.json

이제 본격적으로 컴포넌트를 구현할 준비가 완료되었습니다.

4. 단계별 구현 과정

Step 1: App 컴포넌트 구조 설정

먼저 App.jsx에서 전체 애플리케이션의 상태와 로직을 관리합니다:

import { useState, useEffect } from 'react';
import TodoInput from './components/TodoInput';
import TodoList from './components/TodoList';
import TodoFilter from './components/TodoFilter';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [filter, setFilter] = useState('all');

  // LocalStorage에서 데이터 로드
  useEffect(() => {
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      setTodos(JSON.parse(savedTodos));
    }
  }, []);

  // todos 변경 시 LocalStorage에 저장
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

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

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

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

  const updateTodo = (id, newText) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, text: newText } : todo
    ));
  };

  const filteredTodos = todos.filter(todo => {
    if (filter === 'active') return !todo.completed;
    if (filter === 'completed') return todo.completed;
    return true;
  });

  return (
    

      
할 일 관리
      
      
      
      

        
전체: {todos.length} | 완료: {todos.filter(t => t.completed).length}
      
    
  );
}

export default App;

Step 2: TodoInput 컴포넌트

할 일을 입력받는 컴포넌트를 생성합니다:

import { useState } from 'react';

function TodoInput({ onAdd }) {
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (input.trim()) {
      onAdd(input.trim());
      setInput('');
    }
  };

  return (
    

       setInput(e.target.value)}
        placeholder="할 일을 입력하세요..."
        maxLength={100}
      />
      추가
    
  );
}

export default TodoInput;

Step 3: TodoItem 컴포넌트

개별 할 일 항목을 표시하고 편집할 수 있는 컴포넌트입니다:

import { useState } from 'react';

function TodoItem({ todo, onToggle, onDelete, onUpdate }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editText, setEditText] = useState(todo.text);

  const handleUpdate = () => {
    if (editText.trim()) {
      onUpdate(todo.id, editText.trim());
      setIsEditing(false);
    }
  };

  return (
    

       onToggle(todo.id)}
      />
      {isEditing ? (
         setEditText(e.target.value)}
          onBlur={handleUpdate}
          onKeyPress={(e) => e.key === 'Enter' && handleUpdate()}
          autoFocus
        />
      ) : (
         setIsEditing(true)}>{todo.text}
      )}
      

         setIsEditing(!isEditing)}>✏️
         onDelete(todo.id)}>🗑️
      
    
  );
}

export default TodoItem;

Step 4: TodoList와 TodoFilter 컴포넌트

// TodoList.jsx
import TodoItem from './TodoItem';

function TodoList({ todos, onToggle, onDelete, onUpdate }) {
  if (todos.length === 0) {
    return 
할 일이 없습니다.
;
  }

  return (
    

      {todos.map(todo => (
        
      ))}
    
  );
}

export default TodoList;

// TodoFilter.jsx
function TodoFilter({ filter, setFilter }) {
  return (
    

       setFilter('all')}
      >
        전체
      
       setFilter('active')}
      >
        진행중
      
       setFilter('completed')}
      >
        완료
      
    
  );
}

export default TodoFilter;

Step 5: 스타일링 (App.css)

.app {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.todo-input {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.todo-input input {
  flex: 1;
  padding: 12px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
}

.todo-input button {
  padding: 12px 24px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}

.todo-filter {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
}

.todo-filter button {
  padding: 8px 16px;
  border: 2px solid #ddd;
  background: white;
  border-radius: 6px;
  cursor: pointer;
}

.todo-filter button.active {
  background: #2196F3;
  color: white;
  border-color: #2196F3;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 10px;
}

.todo-item.completed span {
  text-decoration: line-through;
  color: #999;
}

.todo-item span {
  flex: 1;
  cursor: pointer;
}

.actions {
  display: flex;
  gap: 5px;
}

.actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
}

.stats {
  text-align: center;
  margin-top: 20px;
  color: #666;
}

.empty-message {
  text-align: center;
  color: #999;
  padding: 40px;
}

5. 테스트 및 배포

개발 서버에서 애플리케이션을 테스트합니다:

npm run dev

다음 기능들이 정상 동작하는지 확인하세요:

• 할 일 추가 및 즉시 화면 반영
• 체크박스 클릭 시 완료 상태 토글
• 더블클릭으로 수정 모드 진입
• 삭제 버튼 동작
• 필터링 기능 (전체/진행중/완료)
• 페이지 새로고침 후 데이터 유지

배포는 Vercel이나 Netlify를 사용하면 간단합니다:

npm run build
# Vercel CLI 사용
npx vercel --prod

빌드된 dist 폴더를 배포 플랫폼에 업로드하면 즉시 실제 URL로 접근할 수 있습니다.

6. 마무리 및 확장 아이디어

이제 30분만에 만드는 Todo App 완성 가이드를 통해 완전히 동작하는 할 일 관리 앱을 완성했습니다! 이 프로젝트를 확장할 수 있는 아이디어:

• 우선순위 레벨 추가 (높음/중간/낮음)
• 마감일 설정 및 알림 기능
• 카테고리/태그 기능
• 검색 기능 구현
• 드래그 앤 드롭으로 순서 변경
• 다크 모드 지원
• Firebase 연동으로 다중 디바이스 동기화

이 가이드가 여러분의 개발 실습과 포트폴리오 구축에 도움이 되기를 바랍니다!