\uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\ub85c \uac04\ub2e8\ud55c \uc77c\uae30\uc7a5 \uc571\uc744 \uad6c\ud604\ud558\uba74\uc11c Edit \ud398\uc774\uc9c0\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uae4a\uc774 \uc788\uac8c \uc124\uba85\ud569\ub2c8\ub2e4. \uc774 \uacfc\uc815\uc744 \ud1b5\ud574 \ub9ac\uc561\ud2b8\uc758 \uae30\ubcf8 \uac1c\ub150\uc744 \uc774\ud574\ud558\uace0 \uc0c1\ud0dc \uad00\ub9ac, \ub77c\uc6b0\ud305, \uc774\ubca4\ud2b8 \ucc98\ub9ac \ub4f1\uc758 \uae30\uc220\uc744 \uc775\ud790 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uba3c\uc800, \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. Create React App\uc744 \uc0ac\uc6a9\ud558\uc5ec \uac04\ub2e8\ud558\uac8c \uc2dc\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
npx create-react-app diary-app<\/code><\/pre>\n\ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud55c \ub4a4, \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n
cd diary-app\nnpm install react-router-dom<\/code><\/pre>\n2. \uae30\ubcf8 \uad6c\uc870 \uc124\uacc4<\/h2>\n
\uc77c\uae30\uc7a5 \uc571\uc758 \uae30\ubcf8 \uad6c\uc870\ub97c \uc815\uc758\ud569\ub2c8\ub2e4. \uc77c\uae30\uc7a5\uc744 \uad00\ub9ac\ud558\uae30 \uc704\ud55c \ud398\uc774\uc9c0\uc640 \uac01 \uc77c\uae30\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
2.1. App.js \ud30c\uc77c \uc218\uc815<\/h3>\n
App.js \ud30c\uc77c\uc744 \uc218\uc815\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
\nimport React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport Home from '.\/components\/Home';\nimport Edit from '.\/components\/Edit';\n\nfunction App() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n}\n\nexport default App;\n<\/code><\/pre>\n2.2. Home \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
Home \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc77c\uae30 \ubaa9\ub85d\uc744 \ud45c\uc2dc\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 \uc608\uc2dc\ub85c \uc0ac\uc6a9\ud560 \ub354\ubbf8 \ub370\uc774\ud130\ub97c \ubc30\uc5f4\ub85c \ub9cc\ub4e4\uc5b4 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n
\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\nconst Home = () => {\n const diaries = [\n { id: 1, title: '\uccab \ubc88\uc9f8 \uc77c\uae30', content: '\uc624\ub298\uc740 \uc88b\uc740 \ub0a0\uc774\ub2e4.' },\n { id: 2, title: '\ub450 \ubc88\uc9f8 \uc77c\uae30', content: '\ub9ac\uc561\ud2b8\ub97c \ubc30\uc6b0\uace0 \uc788\ub2e4.' },\n ];\n\n return (\n \n \uc77c\uae30 \ubaa9\ub85d<\/h2>\n \n {diaries.map(diary => (\n - \n {diary.title}\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n};\n\nexport default Home;\n<\/code><\/pre>\n
3. Edit \ud398\uc774\uc9c0 \ub9cc\ub4e4\uae30<\/h2>\n
Edit \ud398\uc774\uc9c0\uc5d0\uc11c\ub294 \uc120\ud0dd\ud55c \uc77c\uae30\uc758 \uc81c\ubaa9\uacfc \ub0b4\uc6a9\uc744 \uc218\uc815\ud560 \uc218 \uc788\ub3c4\ub85d \ud3fc\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4.<\/p>\n
3.1. Edit \ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc131<\/h3>\n
Edit.js \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \ub2e4\uc74c\uacfc \uac19\uc774 \uad6c\ud604\ud569\ub2c8\ub2e4.<\/p>\n
\nimport React, { useState } from 'react';\nimport { useParams, useHistory } from 'react-router-dom';\n\nconst Edit = () => {\n const { id } = useParams();\n const history = useHistory();\n \n const [title, setTitle] = useState('');\n const [content, setContent] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n \/\/ \uc5ec\uae30\uc11c \uc11c\ubc84\uc5d0 PUT \uc694\uccad\uc744 \ubcf4\ub0b4\uba74 \ub429\ub2c8\ub2e4.\n console.log({ id, title, content });\n history.push('\/');\n };\n\n return (\n \n \uc77c\uae30 \uc218\uc815<\/h2>\n