{"id":934,"date":"2025-06-21T12:10:11","date_gmt":"2025-06-21T03:10:11","guid":{"rendered":"https:\/\/nangchang.nes.or.kr\/?p=934"},"modified":"2025-06-24T00:16:30","modified_gmt":"2025-06-23T15:16:30","slug":"%f0%9f%93%a8-react%ec%97%90%ec%84%9c-%ed%8f%bc-%ec%a0%9c%ec%b6%9c-%ec%b2%98%eb%a6%ac%ed%95%98%ea%b8%b0-preventdefault%eb%a1%9c-%ec%83%88%eb%a1%9c%ea%b3%a0%ec%b9%a8-%eb%a7%89%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/nangchang.nes.or.kr\/?p=934","title":{"rendered":"[React] \ud83d\udce8 React\uc5d0\uc11c \ud3fc \uc81c\ucd9c \ucc98\ub9ac\ud558\uae30 \u2013 preventDefault()\ub85c \uc0c8\ub85c\uace0\uce68 \ub9c9\uae30"},"content":{"rendered":"\n<p>HTML \ud3fc\uc740 \uae30\ubcf8\uc801\uc73c\ub85c <strong>submit \uc2dc \uc0c8\ub85c\uace0\uce68<\/strong>\uc774 \ubc1c\uc0dd\ud574\uc694. \ud558\uc9c0\ub9cc \ub9ac\uc561\ud2b8\ub294 SPA(Single Page Application)\uc774\uae30 \ub54c\ubb38\uc5d0, \uc0c8\ub85c\uace0\uce68\uc774 \uc77c\uc5b4\ub098\uba74 \uc548 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc774\ub97c \ub9c9\uae30 \uc704\ud574 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \ubc14\ub85c <strong><code>preventDefault()<\/code><\/strong>\uc608\uc694.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">1. \u26d4 \uae30\ubcf8 \ub3d9\uc791\uc744 \ub9c9\ub294 \uc774\uc720<\/h3>\n\n\n\n<p>\uc544\ub798\ucc98\ub7fc \uc791\uc131\ud558\uba74, \ud3fc\uc744 \uc81c\ucd9c\ud588\uc744 \ub54c \uc804\uccb4 \ud398\uc774\uc9c0\uac00 \ub9ac\ub85c\ub4dc\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;form onSubmit={handleSubmit}>\n  &lt;input \/>\n  &lt;button type=\"submit\">\uc81c\ucd9c&lt;\/button>\n&lt;\/form>\n<\/code><\/pre>\n\n\n\n<p>\ud83d\udc49 \uc774\ub54c <strong>handleSubmit \ud568\uc218\uc5d0\uc11c <code>e.preventDefault()<\/code><\/strong>\ub97c \uaf2d \ud638\ucd9c\ud574\uc918\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2. \u2705 \uae30\ubcf8 \uc608\uc81c \ucf54\ub4dc<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">import { useState } from 'react';\n\nfunction SignupForm() {\n  const [form, setForm] = useState({\n    name: '',\n    email: ''\n  });\n\n  function handleChange(e) {\n    const { name, value } = e.target;\n    setForm(prev =&amp;gt; ({\n      ...prev,\n      [name]: value\n    }));\n  }\n\n  function handleSubmit(e) {\n    e.preventDefault(); \/\/ \uc0c8\ub85c\uace0\uce68 \ubc29\uc9c0\n    console.log('\ud3fc \uc81c\ucd9c\ub428:', form);\n    alert(`${form.name}\ub2d8, \uac00\uc785\uc774 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4!`);\n  }\n\n  return (\n    &lt;form onSubmit={handleSubmit}>\n      &lt;input\n        name=\"name\"\n        value={form.name}\n        onChange={handleChange}\n        placeholder=\"\uc774\ub984\"\n      \/>\n      &lt;input\n        name=\"email\"\n        value={form.email}\n        onChange={handleChange}\n        placeholder=\"\uc774\uba54\uc77c\"\n      \/>\n      &lt;button type=\"submit\">\uac00\uc785\ud558\uae30&lt;\/button>\n    &lt;\/form>\n  );\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3. \ud83d\udccc \ud575\uc2ec \uc694\uc57d<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>form<\/code> \ud0dc\uadf8\ub97c \uc0ac\uc6a9\ud560 \ub54c <strong><code>onSubmit<\/code> \uc774\ubca4\ud2b8<\/strong>\ub85c \ucc98\ub9ac\ud569\ub2c8\ub2e4<\/li>\n\n\n\n<li><strong><code>e.preventDefault()<\/code>\ub97c \ud638\ucd9c<\/strong>\ud574\uc57c \ud398\uc774\uc9c0\uac00 \uc0c8\ub85c\uace0\uce68\ub418\uc9c0 \uc54a\uc544\uc694<\/li>\n\n\n\n<li>\uc81c\ucd9c \uc2dc \uc785\ub825\uac12\uc744 \uc800\uc7a5\ud558\uac70\ub098 \uc11c\ubc84\ub85c \ubcf4\ub0bc \uc218 \uc788\uc2b5\ub2c8\ub2e4<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\uddbc\ufe0f \ud3fc \uc81c\ucd9c \ucc98\ub9ac \ud750\ub984\ub3c4<\/h3>\n\n\n\n<p>\uc785\ub825 \u2192 \uc0c1\ud0dc \uc800\uc7a5 \u2192 \uc81c\ucd9c \u2192 \uae30\ubcf8 \ub3d9\uc791 \ub9c9\uae30 \u2192 \ub370\uc774\ud130 \ucc98\ub9ac \ud750\ub984\uc744 \uc544\ub798 \uadf8\ub9bc\uc73c\ub85c \uc815\ub9ac\ud574\ubcf4\uc138\uc694.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"1024\" src=\"https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-3-683x1024.png\" alt=\"\" class=\"wp-image-935\" srcset=\"https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-3-683x1024.png 683w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-3-200x300.png 200w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-3-768x1152.png 768w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-3-624x936.png 624w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-3.png 1024w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>HTML \ud3fc\uc740 \uae30\ubcf8\uc801\uc73c\ub85c submit \uc2dc \uc0c8\ub85c\uace0\uce68\uc774 \ubc1c\uc0dd\ud574\uc694. \ud558\uc9c0\ub9cc \ub9ac\uc561\ud2b8\ub294 SPA(Single Page Application)\uc774\uae30 \ub54c\ubb38\uc5d0, \uc0c8\ub85c\uace0\uce68\uc774 \uc77c\uc5b4\ub098\uba74 \uc548 \ub429\ub2c8\ub2e4. \uc774\ub97c \ub9c9\uae30 \uc704\ud574 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \ubc14\ub85c preventDefault()\uc608\uc694. 1. \u26d4 \uae30\ubcf8 \ub3d9\uc791\uc744 \ub9c9\ub294 \uc774\uc720 \uc544\ub798\ucc98\ub7fc \uc791\uc131\ud558\uba74, \ud3fc\uc744 \uc81c\ucd9c\ud588\uc744 \ub54c \uc804\uccb4 \ud398\uc774\uc9c0\uac00 \ub9ac\ub85c\ub4dc\ub429\ub2c8\ub2e4. \ud83d\udc49 \uc774\ub54c handleSubmit \ud568\uc218\uc5d0\uc11c e.preventDefault()\ub97c \uaf2d \ud638\ucd9c\ud574\uc918\uc57c \ud569\ub2c8\ub2e4. 2. \u2705 \uae30\ubcf8 \uc608\uc81c \ucf54\ub4dc 3. \ud83d\udccc \ud575\uc2ec \uc694\uc57d [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[80],"class_list":["post-934","post","type-post","status-publish","format-standard","hentry","category-pogramming","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=934"}],"version-history":[{"count":3,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/934\/revisions"}],"predecessor-version":[{"id":956,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/934\/revisions\/956"}],"wp:attachment":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}