{"id":25886,"date":"2024-10-27T06:48:19","date_gmt":"2024-10-27T06:48:19","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=25886"},"modified":"2024-11-26T07:52:32","modified_gmt":"2024-11-26T07:52:32","slug":"%eb%a6%ac%ec%95%a1%ed%8a%b8-%ea%b0%95%ec%a2%8c-to-do-%ec%95%b1-%ec%98%88%ec%a0%9c-update-%ed%95%a0-%ec%9d%bc-%ec%88%98%ec%a0%95%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/25886\/","title":{"rendered":"\ub9ac\uc561\ud2b8 \uac15\uc88c: To Do \uc571 \uc608\uc81c, Update: \ud560 \uc77c \uc218\uc815\ud558\uae30"},"content":{"rendered":"

<\/p>\n

\uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac04\ub2e8\ud55c To Do \uc571\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774 \uac15\uc88c\uc5d0\uc11c\ub294 \ud560 \uc77c\uc744 \uc218\uc815\ud558\ub294 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uae4a\uc774 \uc788\uac8c \ub2e4\ub8f0 \uac83\uc785\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\ub97c \ucc98\uc74c \uc0ac\uc6a9\ud558\ub294 \ubd84\ub4e4\ub3c4 \uc774\ud574\ud560 \uc218 \uc788\ub3c4\ub85d \uae30\ucd08\ubd80\ud130 \ucc28\uadfc\ucc28\uadfc \uc124\uba85\ud560 \uc608\uc815\uc774\ub2c8 \uac71\uc815\ud558\uc9c0 \ub9c8\uc138\uc694.<\/p>\n

1. \ub9ac\uc561\ud2b8 \uc18c\uac1c<\/h2>\n

\ub9ac\uc561\ud2b8\ub294 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud558\uae30 \uc704\ud55c JavaScript \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \ud398\uc774\uc2a4\ubd81\uc5d0\uc11c \uac1c\ubc1c\ud558\uc600\uc73c\uba70, \ud558\ub098\uc758 \ud398\uc774\uc9c0\uc5d0\uc11c \ub3d9\uc801\uc778 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\uc758 \uac00\uc7a5 \ud070 \uc7a5\uc810 \uc911 \ud558\ub098\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uad6c\uc870\uc785\ub2c8\ub2e4. \uc774\ub85c \uc778\ud574 \ucf54\ub4dc\uc758 \uc7ac\uc0ac\uc6a9\uc131\uc774 \ub192\uc544\uc9c0\uace0, \uc720\uc9c0\ubcf4\uc218\uac00 \uc6a9\uc774\ud574\uc9d1\ub2c8\ub2e4.<\/p>\n

1.1 \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n

\ub9ac\uc561\ud2b8\uc5d0\uc11c \ubaa8\ub4e0 \uac83\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc774\ub8e8\uc5b4\uc838 \uc788\uc2b5\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud654\uba74\uc758 \uc77c\ubd80\ub97c \uad6c\uc131\ud558\ub294 \ub3c5\ub9bd\uc801\uc778 \ube14\ub85d\uc73c\ub85c \uc0dd\uac01\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac01 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc790\uccb4\uc758 \uc0c1\ud0dc(State)\uc640 \uc18d\uc131(Props)\uc744 \uac00\uc9c8 \uc218 \uc788\uc73c\uba70, \uc774\ub97c \ud1b5\ud574 \uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc640 \ub370\uc774\ud130\ub97c \uc8fc\uace0\ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

2. To Do \uc571 \uae30\ubcf8 \uad6c\uc870 \uc124\uc815<\/h2>\n

\ucc98\uc74c\uc5d0\ub294 To Do \uc571\uc758 \uae30\ubcf8 \uad6c\uc870\ub97c \uc124\uc815\ud560 \uac83\uc785\ub2c8\ub2e4. \uc544\ub798\uc758 \ub2e8\uacc4\ub97c \ub530\ub77c \uc9c4\ud589\ud574 \ubcf4\uc138\uc694.<\/p>\n

2.1 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h3>\n
npx create-react-app todo-app<\/code><\/pre>\n
\uc704 \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 \uc0c8\ub85c\uc6b4 \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. todo-app<\/code>\uc774\ub77c\ub294 \ud3f4\ub354 \uc548\uc5d0 \ud544\uc694\ud55c \ud30c\uc77c\uc774 \uc0dd\uc131\ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n
2.2 \uae30\ubcf8 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\uc870 \ub9cc\ub4e4\uae30<\/h3>\n
src \ud3f4\ub354 \uc548\uc5d0 Todo.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0, \uc544\ub798\uc640 \uac19\uc774 \uae30\ubcf8 \uad6c\uc870\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
import React, { useState } from 'react';\n\nconst Todo = () => {\n    const [todos, setTodos] = useState([]);\n    const [inputValue, setInputValue] = useState('');\n\n    const handleAdd = () => {\n        if (!inputValue) return;\n        setTodos([...todos, { text: inputValue, isEditing: false }]);\n        setInputValue('');\n    };\n\n    return (\n        
\n            
\ud560 \uc77c \ubaa9\ub85d<\/h2>\n             setInputValue(e.target.value)} \/>\n