React로 간단한 TODO 앱 만들기

React 입문자들에게 가장 좋은 연습 프로젝트는 바로 TODO 앱입니다. 오늘은 React 기초를 익히면서 실용적인 앱을 30분 안에 만들어보겠습니다.

목표

• React 컴포넌트 구조 이해
• State 관리 (useState)
• 이벤트 핸들링
• 배열 렌더링 (map)

1. 프로젝트 설정

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

2. 메인 컴포넌트 작성

src/App.js를 이렇게 수정해보세요:

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

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

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

  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));
  };

  return (
    

      
TODO App 📝
      

         setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder="할 일을 입력하세요..."
        />
        추가
      
      

        {todos.map(todo => (
          

             toggleTodo(todo.id)}>
              {todo.text}
            
             deleteTodo(todo.id)}>삭제
          
        ))}
      
    
  );
}

export default App;

3. 스타일 추가

src/App.css:

.App {
  max-width: 500px;
  margin: 50px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: #333;
}

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

.input-container input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
}

.input-container button {
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin: 5px 0;
  background: #f5f5f5;
  border-radius: 4px;
}

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

.todo-list li button {
  background: #f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

4. 핵심 개념 설명

useState Hook

const [todos, setTodos] = useState([]);

• todos: 현재 상태 값
• setTodos: 상태 업데이트 함수
• []: 초기 값 (빈 배열)

배열 렌더링

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

• map: 배열을 순회하며 JSX 변환
• key: 각 요소의 고유 식별자 (React 권장)

이벤트 핸들링

onClick={() => toggleTodo(todo.id)}

• 화살표 함수: 클릭 시 함수 실행
• 인자 전달 가능

5. 추가로 해볼 수 있는 것들

1. 로컬 스토리지 저장 – 새로고침해도 유지
2. 완료된 항목 숨기기 – 필터링 기능
3. 드래그 앤 드롭 – 순서 변경
4. 마감일 설정 – 날짜 선택
5. 카테고리 – 태그 분류

결론

이 예제로 React의 기본 개념들을 익혔습니다:

• 컴포넌트
• State
• 이벤트
• 렌더링

다음으로는 더 복잡한 앱을 만들거나, React Router로 페이지 이동을 추가해보세요!

질문이 있거나 막히는 부분이 있다면 댓글로 남겨주세요! 😊