React TODO 리스트 + 라우팅

🧩 TODO 리스트 + 라우팅

이 실습에서는 할 일 목록(TODO List)을 구현하고, React Router를 통해
“전체 할 일”과 “완료된 항목”을 페이지처럼 분리해 보겠습니다.

1. 설치: React Router

npm install react-router-dom

2. 전체 코드 구조

• App.js: 라우팅 설정
• TodoList.js: 전체 할 일 보기
• CompletedList.js: 완료된 할 일 보기
• TodoInput.js: 할 일 추가

3. App.js

import React, { useState } from 'react'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import TodoList from './TodoList'; import CompletedList from './CompletedList'; import TodoInput from './TodoInput'; function 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 )); }; return ( <Router> <div style={{ padding: '20px' }}> <h2>TODO 리스트</h2> <nav> <Link to="/" style={{ marginRight: '10px' }}>전체</Link> <Link to="/completed">완료됨</Link> </nav> <TodoInput addTodo={addTodo} /> <Routes> <Route path="/" element={<TodoList todos={todos} toggleComplete={toggleComplete} />} /> <Route path="/completed" element={<CompletedList todos={todos} toggleComplete={toggleComplete} />} /> </Routes> </div> </Router> ); } export default App;

4. TodoInput.js

import React, { useState } from 'react'; function TodoInput({ addTodo }) { const [text, setText] = useState(''); const handleSubmit = (e) => { e.preventDefault(); if (!text.trim()) return; addTodo(text); setText(''); }; return ( <form onSubmit={handleSubmit}> <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="할 일을 입력하세요" /> <button type="submit">추가</button> </form> ); } export default TodoInput;

5. TodoList.js

import React from 'react'; function TodoList({ todos, toggleComplete }) { return ( <ul> {todos.map(todo => ( <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}> {todo.text} <button onClick={() => toggleComplete(todo.id)}> {todo.completed ? '취소' : '완료'} </button> </li> ))} </ul> ); } export default TodoList;

6. CompletedList.js

import React from 'react'; function CompletedList({ todos, toggleComplete }) { const completed = todos.filter(todo => todo.completed); return ( <ul> {completed.map(todo => ( <li key={todo.id} style={{ textDecoration: 'line-through' }}> {todo.text} <button onClick={() => toggleComplete(todo.id)}>취소</button> </li> ))} </ul> ); } export default CompletedList;

✅ 정리

• React Router를 활용하여 라우팅을 학습
• 상태를 부모 컴포넌트에서 공유하고 자식에 전달
• 컴포넌트 분리와 상태 제어의 실전 예제

📌 확장 아이디어: 로컬 스토리지 저장, 날짜 필터, 수정 기능 등 추가해 보세요!