{"id":25962,"date":"2024-10-27T06:48:46","date_gmt":"2024-10-27T06:48:46","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=25962"},"modified":"2024-11-26T07:48:35","modified_gmt":"2024-11-26T07:48:35","slug":"%eb%a6%ac%ec%95%a1%ed%8a%b8-%ea%b0%95%ec%a2%8c-%ec%9d%bc%ea%b8%b0%ec%9e%a5-%ec%95%b1-%ec%98%88%ec%a0%9c-home-%ed%8e%98%ec%9d%b4%ec%a7%80-%ea%b5%ac%ed%98%84%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/25962\/","title":{"rendered":"\ub9ac\uc561\ud2b8 \uac15\uc88c: \uc77c\uae30\uc7a5 \uc571 \uc608\uc81c, Home \ud398\uc774\uc9c0 \uad6c\ud604\ud558\uae30"},"content":{"rendered":"

\ub9ac\uc561\ud2b8(React)\ub294 \ub3d9\uc801\uc778 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud558\ub294 \ub370 \ub9ce\uc774 \uc0ac\uc6a9\ub418\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uc774 \uac15\uc88c\uc5d0\uc11c\ub294 \uc77c\uae30\uc7a5 \uc571\uc744 \ub9cc\ub4e4\uba74\uc11c \ub9ac\uc561\ud2b8\uc758 \uae30\ubcf8 \uac1c\ub150\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774 \uacfc\uc815\uc5d0\uc11c Home \ud398\uc774\uc9c0\ub3c4 \uad6c\ud604\ud558\uac8c \ub420 \uac83\uc785\ub2c8\ub2e4. Home \ud398\uc774\uc9c0\ub294 \uc0ac\uc6a9\uc790\uac00 \uc77c\uae30\uc7a5\uc5d0 \uc811\uadfc\ud558\uace0 \uc0c8\ub85c\uc6b4 \uc77c\uae30\ub97c \uc791\uc131\ud560 \uc218 \uc788\ub294 \uc8fc\uc694 \ud654\uba74\uc774 \ub420 \uac83\uc785\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\uc758 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\uc870, \uc0c1\ud0dc \uad00\ub9ac, \uadf8\ub9ac\uace0 \ub77c\uc6b0\ud305\uc744 \ud3ec\ud568\ud55c \uc5ec\ub7ec \uac00\uc9c0 \uae30\uc220\uc744 \ubc30\uc6b0\uac8c \ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n

1. \ub9ac\uc561\ud2b8 \uae30\ubcf8 \uac1c\ub150<\/h2>\n

\ub9ac\uc561\ud2b8\ub294 \uc0ac\uc6a9\uc790 \uc815\uc758 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18\uc758 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\ub294 UI\uc758 \ub3c5\ub9bd\uc801\uc778 \uc870\uac01\uc73c\ub85c, \uac01\uac01\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc0c1\ud0dc(state)\uc640 \uc18d\uc131(props)\uc744 \uac00\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uac15\uc88c\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\uc758 \uc8fc\uc694 \uac1c\ub150\uc778 JSX, \ucef4\ud3ec\ub10c\ud2b8, props, state, \uadf8\ub9ac\uace0 \uc0dd\uba85\uc8fc\uae30\ub97c \ub2e4\ub8f0 \uac83\uc785\ub2c8\ub2e4.<\/p>\n

1.1 JSX<\/h3>\n

JSX\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 XML\uc758 \uc904\uc784\ub9d0\ub85c, \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc \uc548\uc5d0 HTML\uacfc \uac19\uc740 \uad6c\ubb38\uc744 \ud3ec\ud568\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. JSX\ub97c \uc0ac\uc6a9\ud558\uba74 UI \uad6c\uc131 \uc694\uc18c\ub97c \uc9c1\uad00\uc801\uc73c\ub85c \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. JSX\ub294 \ucef4\ud30c\uc77c \uc2dc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac1d\uccb4\ub85c \ubcc0\ud658\ub429\ub2c8\ub2e4.<\/p>\n

const element = <h1>\uc548\ub155\ud558\uc138\uc694, \ub9ac\uc561\ud2b8!<\/h1>;<\/code><\/pre>\n
1.2 \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
\ub9ac\uc561\ud2b8\uc758 \uae30\ubcf8 \ube4c\ub529 \ube14\ub85d\uc740 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc640 \ud074\ub798\uc2a4\ud615 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub098\ub20c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc6b0\ub9ac\ub294 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc8fc\ub85c \uc0ac\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4.<\/p>\n
function Greeting(props) {\n  return <h1>\uc548\ub155\ud558\uc138\uc694, {props.name}!<\/h1>;\n}<\/code><\/pre>\n
1.3 Props\uc640 State<\/h3>\n
Props\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc804\ub2ec\ud558\ub294 \uc77d\uae30 \uc804\uc6a9 \ub370\uc774\ud130\uc785\ub2c8\ub2e4. \ubc18\uba74, State\ub294 \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\uc5d0\uc11c \uad00\ub9ac\ud558\ub294 \ub370\uc774\ud130\ub85c, \ubcc0\ud654\uac00 \uac00\ub2a5\ud558\uba70 UI\uc758 \ubcc0\ud654\uc5d0 \uc9c1\uc811\uc801\uc73c\ub85c \uc601\ud5a5\uc744 \ubbf8\uce69\ub2c8\ub2e4.<\/p>\n
class Example extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  render() {\n    return <h1>\ud604\uc7ac \uce74\uc6b4\ud2b8: {this.state.count}<\/h1>;\n  }\n}<\/code><\/pre>\n
1.4 \uc0dd\uba85\uc8fc\uae30<\/h3>\n
\ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc0dd\uba85\uc8fc\uae30\uac00 \uc788\uc73c\uba70, \uc774 \uc0dd\uba85\uc8fc\uae30 \uba54\uc11c\ub4dc\ub97c \ud1b5\ud574 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0dd\uc131, \uc5c5\ub370\uc774\ud2b8 \ubc0f \uc81c\uac70 \uc2dc\uc810\uc744 \uc81c\uc5b4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc8fc\uc694 \uc0dd\uba85\uc8fc\uae30 \uba54\uc11c\ub4dc\ub85c\ub294 componentDidMount, componentDidUpdate, componentWillUnmount\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
2. \uc77c\uae30\uc7a5 \uc571 \uc124\uacc4<\/h2>\n
\uc774\uc81c \ubcf8\uaca9\uc801\uc73c\ub85c \uc77c\uae30\uc7a5 \uc571\uc744 \uc124\uacc4\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc77c\uae30\uc7a5 \uc571\uc740 \uc0ac\uc6a9\uc790\uac00 \uc77c\uae30\ub97c \uc791\uc131\ud558\uace0, \uc218\uc815\ud558\uace0, \uc0ad\uc81c\ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uac16\ucdb0\uc57c \ud569\ub2c8\ub2e4. \ub610\ud55c, \uc0ac\uc6a9\uc790\ub294 \uc791\uc131\ud55c \uc77c\uae30\ub97c \ub9ac\uc2a4\ud2b8 \ud615\ud0dc\ub85c \uc870\ud68c\ud560 \uc218 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
2.1 \uc571 \uad6c\uc870<\/h3>\n
\uc77c\uae30\uc7a5 \uc571\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \uad6c\uc131 \uc694\uc18c\ub85c \ub098\ub20c \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
    \n
  • Home: \uc77c\uae30 \ub9ac\uc2a4\ud2b8\uc640 \uc0c8 \uc77c\uae30 \ucd94\uac00 \ubc84\ud2bc\uc744 \ud3ec\ud568\ud558\ub294 \ud654\uba74<\/li>\n
  • DiaryEntry: \uac01 \uc77c\uae30 \ud56d\ubaa9\uc744 \ud45c\uc2dc\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8<\/li>\n
  • AddEntry: \uc0c8 \uc77c\uae30\ub97c \uc791\uc131\ud560 \uc218 \uc788\ub294 \ud3fc\uc744 \ud3ec\ud568\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8<\/li>\n<\/ul>\n
    3. Home \ud398\uc774\uc9c0 \uad6c\ud604<\/h2>\n
    \uc774\uc81c Home \ud398\uc774\uc9c0\ub97c \uad6c\ud604\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. Home \ud398\uc774\uc9c0\ub294 \uc77c\uae30 \ub9ac\uc2a4\ud2b8\uc640 \uc0c8 \uc77c\uae30\ub97c \ucd94\uac00\ud558\ub294 \ubc84\ud2bc\uc744 \ud3ec\ud568\ud560 \uac83\uc785\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub450 \uac1c \uc0dd\uc131\ud558\uaca0\uc2b5\ub2c8\ub2e4: Home \ucef4\ud3ec\ub10c\ud2b8\uc640 DiaryEntry \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.<\/p>\n
    3.1 Home \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
    import React, { useState } from 'react';\nimport DiaryEntry from '.\/DiaryEntry';\nimport AddEntry from '.\/AddEntry';\n\nfunction Home() {\n  const [entries, setEntries] = useState([]);\n\n  const addEntry = (entry) => {\n    setEntries([...entries, entry]);\n  };\n\n  return (\n    <div>\n      <h1>\ub098\uc758 \uc77c\uae30\uc7a5<\/h1>\n      <AddEntry onAdd={addEntry} \/>\n      <ul>\n        {entries.map((entry, index) => (\n          <DiaryEntry key={index} entry={entry} \/>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default Home;<\/code><\/pre>\n
    3.2 DiaryEntry \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
    import React from 'react';\n\nfunction DiaryEntry({ entry }) {\n  return (\n    <li>\n      <h2>{entry.title}<\/h2>\n      <p>{entry.content}<\/p>\n    <\/li>\n  );\n}\n\nexport default DiaryEntry;<\/code><\/pre>\n
    3.3 AddEntry \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
    import React, { useState } from 'react';\n\nfunction AddEntry({ onAdd }) {\n  const [title, setTitle] = useState('');\n  const [content, setContent] = useState('');\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    onAdd({ title, content });\n    setTitle('');\n    setContent('');\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input \n        type=\"text\" \n        value={title} \n        onChange={(e) => setTitle(e.target.value)} \n        placeholder=\"\uc81c\ubaa9\" \n      \/>\n      <textarea \n        value={content} \n        onChange={(e) => setContent(e.target.value)} \n        placeholder=\"\uc77c\uae30 \ub0b4\uc6a9\" \n      \/>\n      <button type=\"submit\">\uc77c\uae30 \ucd94\uac00<\/button>\n    <\/form>\n  );\n}\n\nexport default AddEntry;<\/code><\/pre>\n
    4. \uc804\uccb4 \uc571 \ucf54\ub4dc<\/h2>\n
    \uc774\uc81c \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubaa8\uc544\uc11c \uc804\uccb4 \uc571\uc744 \uad6c\uc131\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. src \ub514\ub809\ud1a0\ub9ac \uc544\ub798\uc5d0 index.js \ud30c\uc77c\uc744 \uc791\uc131\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
    import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport Home from '.\/Home';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<Home \/>);<\/code><\/pre>\n
    5. \uacb0\ub860<\/h2>\n
    \uc774\ubc88 \ub9ac\uc561\ud2b8 \uac15\uc88c\uc5d0\uc11c\ub294 \uc77c\uae30\uc7a5 \uc571\uc744 \ud1b5\ud574 \ub9ac\uc561\ud2b8\uc758 \uae30\ubcf8 \uac1c\ub150\uacfc \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uc124\uacc4\ub97c \ubc30\uc6e0\uc2b5\ub2c8\ub2e4. Home \ud398\uc774\uc9c0\ub97c \uad6c\ud604\ud558\uba74\uc11c State \uad00\ub9ac\uc640 Props \uc804\ub2ec \ubc29\uc2dd\ub3c4 \uc774\ud574\ud560 \uc218 \uc788\uc5c8\uc2b5\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790 \uce5c\ud654\uc801\uc778 UI\ub97c \uc190\uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\ub2e4\ub294 \uac83\uc744 \uc78a\uc9c0 \ub9c8\uc138\uc694!<\/p>\n
    \uc55e\uc73c\ub85c \ub354 \ub9ce\uc740 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\uba70 \ub9ac\uc561\ud2b8\uc758 \uc2ec\ud654 \uac1c\ub150\uc744 \ud0d0\uad6c\ud574\ubcf4\uc138\uc694. \ub2e4\ub978 \ud398\uc774\uc9c0\ub85c\uc758 \ub77c\uc6b0\ud305, \ub370\uc774\ud130 \uc800\uc7a5 \ubc0f \ubd88\ub7ec\uc624\uae30\uc640 \uac19\uc740 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\uba74 \ub354\uc6b1 \uc644\uc804\ud55c \uc571\uc774 \ub420 \uac83\uc785\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!<\/p>\n