{"id":25898,"date":"2024-10-27T06:48:23","date_gmt":"2024-10-27T06:48:23","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=25898"},"modified":"2024-11-26T07:51:50","modified_gmt":"2024-11-26T07:51:50","slug":"%eb%a6%ac%ec%95%a1%ed%8a%b8-%ea%b0%95%ec%a2%8c-to-do-%ec%95%b1-usereducer-%ec%82%ac%ec%9a%a9-%ec%95%b1-%ec%97%85%ea%b7%b8%eb%a0%88%ec%9d%b4%eb%93%9c","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/25898\/","title":{"rendered":"\ub9ac\uc561\ud2b8 \uac15\uc88c: To Do \uc571 useReducer \uc0ac\uc6a9 \uc571 \uc5c5\uadf8\ub808\uc774\ub4dc"},"content":{"rendered":"

<\/p>\n

\n

\ub9ac\uc561\ud2b8\ub294 \ud604\ub300 \uc6f9 \uac1c\ubc1c\uc758 \uc911\uc694\ud55c \ub3c4\uad6c\ub85c \uc790\ub9ac\uc7a1\uc558\uc2b5\ub2c8\ub2e4. \ud2b9\ud788, \uc0c1\ud0dc \uad00\ub9ac\uc5d0 \uc788\uc5b4 \ub2e4\uc591\ud55c \ubc29\ubc95\uc774 \uc788\uc9c0\ub9cc, \uadf8 \uc911 useReducer<\/strong>\ub294 \ub354 \ubcf5\uc7a1\ud55c \uc0c1\ud0dc \ub85c\uc9c1\uc744 \ud6a8\uacfc\uc801\uc73c\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294 React \ud6c5\uc785\ub2c8\ub2e4. \ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 \uae30\ubcf8\uc801\uc778 To Do \uc571\uc744 \uc0ac\uc6a9\ud558\uc5ec useReducer\ub97c \ud65c\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \uad6c\uccb4\uc801\uc73c\ub85c \ub2e4\ub8e8\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

1. \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870<\/h2>\n

\uc6b0\uc120, \ud504\ub85c\uc81d\ud2b8\uc758 \uae30\ubcf8 \uad6c\uc870\ub97c \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c To Do \uc571\uc758 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uad6c\uc131\ub429\ub2c8\ub2e4:<\/p>\n

\n\/to-do-app\n|-- \/src\n|   |-- \/components\n|   |   |-- TodoItem.js\n|   |   |-- TodoList.js\n|   |   \u2514-- TodoForm.js\n|   |\n|   |-- App.js\n|   \u2514-- index.js\n|-- package.json\n|-- README.md\n        <\/code><\/pre>\n
\uc704 \uad6c\uc870\uc5d0\uc11c TodoItem<\/code>\uc740 \uac1c\ubcc4 \ud560 \uc77c \ud56d\ubaa9\uc744 \ub098\ud0c0\ub0b4\uace0, TodoList<\/code>\ub294 \ubaa8\ub4e0 \ud560 \uc77c \ubaa9\ub85d\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4. TodoForm<\/code>\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc0c8\ub85c\uc6b4 \ud560 \uc77c\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
2. useReducer \uc18c\uac1c<\/h2>\n
useReducer\ub294 \ubcf5\uc7a1\ud55c \uc0c1\ud0dc\ub97c \ub2e4\ub8f0 \ub54c \uc720\uc6a9\ud558\uba70, \ub2e4\uc74c\uacfc \uac19\uc740 \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
\nconst [state, dispatch] = useReducer(reducer, initialState);\n        <\/code><\/pre>\n
state<\/strong>: \ud604\uc7ac \uc0c1\ud0dc\ub97c \ub098\ud0c0\ub0b4\uba70, dispatch<\/strong>: \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8\ub97c \uc704\ud55c \ud568\uc218\uc785\ub2c8\ub2e4. reducer<\/strong>\ub294 \uc0c1\ud0dc\ub97c \uc5b4\ub5bb\uac8c \ubcc0\ud654\uc2dc\ud0ac\uc9c0\ub97c \uc815\uc758\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.<\/p>\n
3. \uae30\ubcf8 To Do \uc571 \uad6c\ud604<\/h2>\n
\uba3c\uc800 \uae30\ubcf8 To Do \uc571\uc744 \uad6c\ud604\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub798 \ucf54\ub4dc\ub294 \uac04\ub2e8\ud55c \ub9ac\uc561\ud2b8 \uc571\uc73c\ub85c, \uc0ac\uc6a9\uc790\uac00 \ud560 \uc77c\uc744 \ucd94\uac00\ud558\uace0 \ubaa9\ub85d\uc744 \ubcf4\uc5ec\uc8fc\ub294 \uae30\ub2a5\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4.<\/p>\n
\nimport React, { useState } from 'react';\n\nconst App = () => {\n    const [todos, setTodos] = useState([]);\n    const [input, setInput] = useState('');\n\n    const addTodo = () => {\n        if (input.trim() !== '') {\n            setTodos([...todos, { text: input, completed: false }]);\n            setInput('');\n        }\n    };\n\n    const toggleTodo = (index) => {\n        setTodos(todos.map((todo, i) => \n            i === index ? { ...todo, completed: !todo.completed } : todo\n        ));\n    };\n\n    return (\n        
\n            
\ub098\uc758 To Do \ub9ac\uc2a4\ud2b8<\/h1>\n             setInput(e.target.value)}\n                placeholder=\"\ud560 \uc77c\uc744 \uc785\ub825\ud558\uc138\uc694\"\n            \/>\n