\uc548\ub155\ud558\uc138\uc694. \uc774\ubc88 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\ub85c To Do \uc571\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774 \uac15\uc88c\uc5d0\uc11c\ub294 UI\/UX \uc124\uacc4\uc640 \ud568\uaed8 \uae30\ub2a5 \uad6c\ud604\uae4c\uc9c0 \ub2e4\ub8f0 \uac83\uc785\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18\uc758 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \ub3d9\uc801\uc778 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4.<\/p>\n
\uc2dc\uc791\ud558\uae30 \uc804\uc5d0, \ud504\ub85c\uc81d\ud2b8\uc758 \uae30\ubcf8 \uc124\uc815\uc744 \ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc740 \uacfc\uc815\uc73c\ub85c \uac1c\ubc1c \ud658\uacbd\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
npx create-react-app my-todo-app<\/code><\/pre>\n\uc704 \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uba74 my-todo-app<\/code>\uc774\ub77c\ub294 \ud3f4\ub354\uc5d0 \ub9ac\uc561\ud2b8 \uc571\uc758 \uae30\ubcf8 \ud15c\ud50c\ub9bf\uc774 \uc0dd\uc131\ub429\ub2c8\ub2e4. \uc0dd\uc131\ub41c \ud3f4\ub354\ub85c \uc774\ub3d9\ud558\uace0 \uc571\uc744 \uc2e4\ud589\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\ncd my-todo-app\nnpm start<\/code><\/pre>\n\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/localhost:3000<\/code>\uc5d0 \uc811\uc18d\ud558\uba74 \uae30\ubcf8 \ub9ac\uc561\ud2b8 \uc571\uc774 \uc2e4\ud589\ub418\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\ucef4\ud3ec\ub10c\ud2b8 \uad6c\uc870 \uc124\uacc4\ud558\uae30<\/h2>\n
To Do \uc571\uc758 \uae30\ubcf8\uc801\uc778 \uae30\ub2a5\uc740 \ud560 \uc77c\uc744 \ucd94\uac00\ud558\uace0, \uc644\ub8cc \uc0c1\ud0dc\ub97c \ud1a0\uae00\ud558\uba70, \uc0ad\uc81c\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uc544\ub798\uc640 \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\uc870\ub97c \uc124\uacc4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\n- App<\/strong>: \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ub8e8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8<\/li>\n
- TodoList<\/strong>: \ud560 \uc77c \ubaa9\ub85d\uc744 \ud45c\uc2dc\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8<\/li>\n
- TodoItem<\/strong>: \uac01 \ud560 \uc77c \ud56d\ubaa9\uc744 \ud45c\uc2dc\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8<\/li>\n
- AddTodo<\/strong>: \ud560 \uc77c\uc744 \ucd94\uac00\ud558\ub294 \ud3fc \ucef4\ud3ec\ub10c\ud2b8<\/li>\n<\/ul>\n
\ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604\ud558\uae30<\/h2>\n
\uc774\uc81c \uac01 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uad6c\ud604\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
1. App \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
\uba3c\uc800 App.js<\/code> \ud30c\uc77c\uc744 \uc5f4\uc5b4 \uae30\ubcf8 \uc0c1\ud0dc\ub97c \uc815\uc758\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\nimport React, { useState } from 'react';\nimport TodoList from '.\/components\/TodoList';\nimport AddTodo from '.\/components\/AddTodo';\n\nconst App = () => {\n const [todos, setTodos] = useState([]);\n\n const addTodo = (todo) => {\n setTodos([...todos, todo]);\n };\n\n const toggleComplete = (index) => {\n const newTodos = todos.map((todo, i) => {\n if (i === index) {\n return { ...todo, completed: !todo.completed };\n }\n return todo;\n });\n setTodos(newTodos);\n };\n\n const deleteTodo = (index) => {\n const newTodos = todos.filter((_, i) => i !== index);\n setTodos(newTodos);\n };\n\n return (\n <div className=\"App\">\n <h1>To Do List<\/h1>\n <AddTodo addTodo={addTodo} \/>\n <TodoList todos={todos} toggleComplete={toggleComplete} deleteTodo={deleteTodo} \/>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\n2. TodoList \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
\ub2e4\uc74c\uc73c\ub85c TodoList.js<\/code>\ub97c \uad6c\ud604\ud569\ub2c8\ub2e4. \uc774 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud560 \uc77c \ubaa9\ub85d\uc744 \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4.<\/p>\nimport React from 'react';\nimport TodoItem from '.\/TodoItem';\n\nconst TodoList = ({ todos, toggleComplete, deleteTodo }) => {\n return (\n <ul>\n {todos.map((todo, index) => (\n <TodoItem \n key={index} \n todo={todo} \n toggleComplete={() => toggleComplete(index)} \n deleteTodo={() => deleteTodo(index)} \n \/>\n ))}\n <\/ul>\n );\n};\n\nexport default TodoList;<\/code><\/pre>\n3. TodoItem \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
\uc774\uc81c \uac01 \ud560 \uc77c \ud56d\ubaa9\uc744 \ud45c\ud604\ud558\ub294 TodoItem.js<\/code>\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\nimport React from 'react';\n\nconst TodoItem = ({ todo, toggleComplete, deleteTodo }) => {\n return (\n <li style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>\n {todo.text}\n <button onClick={toggleComplete}>\uc644\ub8cc<\/button>\n <button onClick={deleteTodo}>\uc0ad\uc81c<\/button>\n <\/li>\n );\n};\n\nexport default TodoItem;<\/code><\/pre>\n4. AddTodo \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
\ub9c8\uc9c0\ub9c9\uc73c\ub85c, \ud560 \uc77c\uc744 \ucd94\uac00\ud558\ub294 \ud3fc\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4.<\/p>\n
import React, { useState } from 'react';\n\nconst AddTodo = ({ addTodo }) => {\n const [inputValue, setInputValue] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (inputValue.trim()) {\n addTodo({ text: inputValue, completed: false });\n setInputValue('');\n }\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <input \n type=\"text\" \n value={inputValue} \n onChange={(e) => setInputValue(e.target.value)} \n placeholder=\"\ud560 \uc77c\uc744 \uc785\ub825\ud558\uc138\uc694\" \n \/>\n <button type=\"submit\">\ucd94\uac00<\/button>\n <\/form>\n );\n};\n\nexport default AddTodo;<\/code><\/pre>\n\uc2a4\ud0c0\uc77c\ub9c1 \ucd94\uac00\ud558\uae30<\/h2>\n
\uc774\uc81c \uae30\ubcf8\uc801\uc778 \uae30\ub2a5\uc774 \uad6c\ud604\ub418\uc5c8\uc73c\ub2c8, CSS\ub97c \uc0ac\uc6a9\ud574 UI\ub97c \ub354\uc6b1 \uc544\ub984\ub2f5\uac8c \uafb8\uba70\ubd05\uc2dc\ub2e4. App.css<\/code> \ud30c\uc77c\uc5d0 \ub2e4\uc74c\uc758 \uc2a4\ud0c0\uc77c\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\nbody {\n font-family: 'Arial', sans-serif;\n background-color: #f4f4f4;\n}\n\n.App {\n max-width: 600px;\n margin: 50px auto;\n padding: 20px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nh1 {\n text-align: center;\n}\n\nform {\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n\ninput[type=\"text\"] {\n flex: 1;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n\nbutton {\n padding: 10px 15px;\n margin-left: 10px;\n border: none;\n border-radius: 4px;\n background: #4A90E2;\n color: white;\n cursor: pointer;\n}\n\nbutton:hover {\n background: #357ABD;\n}\n\nul {\n list-style-type: none;\n padding: 0;\n}<\/code><\/pre>\n\ud14c\uc2a4\ud2b8 \ubc0f \ubc30\ud3ec<\/h2>\n
\uc774\uc81c \uc571\uc774 \uc644\uc131\ub418\uc5c8\uc73c\ub2c8, \ud14c\uc2a4\ud2b8 \ubc0f \ubc30\ud3ec\ub97c \uc9c4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. npm run build \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 \ud504\ub85c\ub355\uc158 \ube4c\ub4dc\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
npm run build<\/code><\/pre>\n\uc0dd\uc131\ub41c build<\/code> \ud3f4\ub354\ub97c \uc11c\ubc84\uc5d0 \ubc30\ud3ec\ud558\uba74 \uc5ec\ub7ec\ubd84\uc758 To Do \uc571\uc774 \uc138\uc0c1\uc5d0 \uc120\ubcf4\uc774\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\uacb0\ub860<\/h2>\n
\uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \uae30\ubcf8\uc801\uc778 To Do \uc571\uc744 \uad6c\ud604\ud574\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\uc758 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uc544\ud0a4\ud14d\ucc98\uc640 \uc0c1\ud0dc \uad00\ub9ac\ub97c \ud65c\uc6a9\ud558\uc5ec \ud6a8\uc728\uc801\uc73c\ub85c UI\ub97c \uad6c\ucd95\ud560 \uc218 \uc788\uc5c8\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc5d0\ub294 \ub354 \ubcf5\uc7a1\ud55c \uae30\ub2a5 \ucd94\uac00\ub098 \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 Redux\ub97c \uc0ac\uc6a9\ud574\ubcf4\ub294 \uac83\ub3c4 \ucd94\ucc9c\ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n
\ub9ac\uc561\ud2b8\ub97c \ud1b5\ud55c \ud504\ub85c\uc81d\ud2b8 \uac1c\ubc1c\uc740 \ubc18\ubcf5\uacfc \uac1c\uc120\uc758 \uacfc\uc815\uc785\ub2c8\ub2e4. \uacc4\uc18d\ud574\uc11c \ud559\uc2b5\ud558\uace0 \uc2e4\uc2b5\ud558\uc5ec \uc5ec\ub7ec\ubd84\ub9cc\uc758 \uba4b\uc9c4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\uc138\uc694!<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"