{"id":769,"date":"2026-05-18T23:00:48","date_gmt":"2026-05-18T15:00:48","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-events-7\/"},"modified":"2026-05-19T20:26:15","modified_gmt":"2026-05-19T12:26:15","slug":"react-events-7","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-events-7\/","title":{"rendered":"React \uc774\ubca4\ud2b8 \ud578\ub4e4\ub9c1 \u2014 \ud569\uc131 \uc774\ubca4\ud2b8\uc640 \ud328\ud134 (Ch.7)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 744 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root {--color-primary:#0891b2;--color-accent:#06b6d4;--color-bg:#f8fafc;--color-bg-card:#fff;--color-text:#0f172a;--color-text-muted:#64748b;--hero-start:#0f172a;--hero-end:#0891b2;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 24px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:80px 24px 60px;text-align:center;}\n.hero .eyebrow{display:inline-block;font-size:14px;color:#67e8f9;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;}\n.hero h1{font-size:36px;margin:0 0 16px;line-height:1.3;font-weight:800;}\n.hero p{color:#cffafe;font-size:18px;max-width:640px;margin:0 auto;line-height:1.6;}\n.hero img{width:100%;max-width:640px;height:auto;margin:32px auto 0;border-radius:10px;display:block;}\narticle{padding-top:48px;}\narticle h2{font-size:26px;margin:56px 0 20px;padding-left:14px;border-left:5px solid var(--color-accent);line-height:1.4;}\narticle h3{font-size:19px;margin:32px 0 12px;color:var(--color-primary);}\narticle p{margin:16px 0;}\narticle strong{color:var(--color-primary);font-weight:700;}\narticle code{background:#ecfeff;padding:2px 8px;border-radius:4px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;color:#0e7490;}\n.databox{background:#ecfeff;border-left:4px solid var(--color-accent);padding:16px 20px;margin:24px 0;border-radius:0 8px 8px 0;font-size:15.5px;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);padding:16px 20px;margin:24px 0;border-radius:8px;font-size:15.5px;}\n.code-block{background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:8px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.6;margin:20px 0;overflow-x:auto;white-space:pre;}\n.cta{background:linear-gradient(135deg,#0891b2 0%,#06b6d4 100%);color:#fff;padding:28px 24px;border-radius:12px;margin:48px 0 0;text-align:center;}\n.cta h3{color:#fff;margin:0 0 8px;font-size:20px;}\n.cta p{color:#cffafe;margin:0;font-size:15.5px;}\n.footer-nav{margin-top:32px;padding-top:20px;border-top:1px solid #e2e8f0;font-size:14px;color:var(--color-text-muted);}\n.footer-nav a{color:var(--color-primary);text-decoration:none;}\n@media (max-width:480px){.hero h1{font-size:26px;}.hero p{font-size:16px;}article h2{font-size:21px;}article h3{font-size:17px;}body{font-size:16px;}}\n<\/style>\n<section class=\"hero\">\n  <span class=\"eyebrow\">React \uad50\uc7ac \u00b7 \uae30\ucd08 7\ud3b8<\/span>\n  <h1>React \uc774\ubca4\ud2b8 \ud578\ub4e4\ub9c1 \u2014 \ud569\uc131 \uc774\ubca4\ud2b8\uc640 \ud328\ud134<\/h1>\n  <p>onClick\u00b7onChange \uac00 \uc5b4\ub5bb\uac8c \uc791\ub3d9\ud558\ub294\uc9c0, \uc778\uc790 \uc804\ub2ec\uc740 \uc5b4\ub5bb\uac8c, \uadf8\ub9ac\uace0 \ud754\ud55c \ud568\uc815.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-27.jpg\" alt=\"\ubc84\ud2bc \ud074\ub9ad \uc704\uc5d0 \ud37c\uc9c0\ub294 \ud30c\ub3d9 \uc77c\ub7ec\uc2a4\ud2b8 \u2014 React \uc774\ubca4\ud2b8 \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>4\ud3b8\uc5d0\uc11c onClick \uae30\ubcf8 \ud328\ud134\uc744 \uc9e7\uac8c \ubd24\ub2e4. \uc774\ubc88 7\ud3b8\uc740 \ubcf8\uaca9\uc801\uc73c\ub85c \u2014 React \uac00 \uc65c <strong>\ud569\uc131 \uc774\ubca4\ud2b8 (SyntheticEvent)<\/strong> \uc2dc\uc2a4\ud15c\uc744 \ub530\ub85c \ub9cc\ub4e4\uc5c8\ub294\uc9c0, preventDefault\u00b7stopPropagation \uc0ac\uc6a9\ubc95, \ud578\ub4e4\ub7ec\uc5d0 \uc778\uc790\ub97c \uae68\ub057\uc774 \ub118\uae30\ub294 4\uac00\uc9c0 \ud328\ud134\uae4c\uc9c0.<\/p>\n\n<h2>1. \ud569\uc131 \uc774\ubca4\ud2b8 \u2014 DOM \uc774\ubca4\ud2b8\uc758 wrapper<\/h2>\n\n<p>React \uc758 <code>onClick<\/code>\u00b7<code>onChange<\/code> \uac00 \ud638\ucd9c\ud558\ub294 \ud568\uc218\uc5d0 \ub4e4\uc5b4\uc624\ub294 \uccab \uc778\uc790\ub294 <strong>SyntheticEvent<\/strong> \u2014 \ube0c\ub77c\uc6b0\uc800 native \uc774\ubca4\ud2b8\ub97c React \uac00 \ud55c \ubc88 \uac10\uc2fc \uac1d\uccb4.<\/p>\n\n<div class=\"code-block\">function Input() {\n  const handleChange = (e) =&gt; {\n    console.log(e.target.value);  \/\/ DOM \uacfc \ub3d9\uc77c\ud558\uac8c \uc0ac\uc6a9 \uac00\ub2a5\n    console.log(e.type);          \/\/ &#8216;change&#8217;\n    console.log(e.nativeEvent);   \/\/ \uc9c4\uc9dc \ube0c\ub77c\uc6b0\uc800 \uc774\ubca4\ud2b8\n  };\n  return &lt;input onChange={handleChange} \/&gt;;\n}<\/div>\n\n<p>\uc65c wrapper \uc778\uac00 \u2014 <strong>\ube0c\ub77c\uc6b0\uc800 \ud638\ud658\uc131<\/strong>. IE\u00b7Safari\u00b7Chrome \uc758 \uc774\ubca4\ud2b8 \ucc28\uc774\ub97c React \uac00 \ud761\uc218\ud574 \ubaa8\ub4e0 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uac19\uc740 API. 2026 \ub144\uc5d4 IE \uac00 \uc8fd\uc5c8\uc9c0\ub9cc \ubaa8\ubc14\uc77c \ube0c\ub77c\uc6b0\uc800 \ubbf8\ubb18\ud55c \ucc28\uc774\ub294 \uc5ec\uc804. \ub610 React 18 \ubd80\ud130\ub294 root \ub2e8\uc77c listener + \uc774\ubca4\ud2b8 \uc704\uc784\uc73c\ub85c \uba54\ubaa8\ub9ac \ud6a8\uc728\ub3c4 \uc7a1\uc558\ub2e4.<\/p>\n\n<div class=\"databox\">\n<strong>TypeScript \uc0ac\uc6a9\uc790<\/strong> \u2014 \uc774\ubca4\ud2b8 \ud0c0\uc785\uc740 <code>React.ChangeEvent&lt;HTMLInputElement&gt;<\/code> \u00b7 <code>React.MouseEvent&lt;HTMLButtonElement&gt;<\/code> \uc2dd\uc73c\ub85c \uba85\uc2dc. IDE \uc790\ub3d9\uc644\uc131\uc774 \uac15\ub825. <code>e.target.value<\/code> \uac00 string \uc778\uc9c0 number \uc778\uc9c0\ub3c4 \uc815\ud655\ud788 \uc54c\ub824\uc900\ub2e4.\n<\/div>\n\n<h2>2. preventDefault \u00b7 stopPropagation \u2014 \uac00\uc7a5 \uc790\uc8fc \uc4f0\ub294 \ub450 \uba54\uc11c\ub4dc<\/h2>\n\n<p>\ub450 \uac00\uc9c0 \u2014 <strong>preventDefault<\/strong> (\ube0c\ub77c\uc6b0\uc800 \uae30\ubcf8 \ub3d9\uc791 \ub9c9\uae30) \uc640 <strong>stopPropagation<\/strong> (\ubd80\ubaa8 \uc774\ubca4\ud2b8\ub85c \uc804\ud30c \ub9c9\uae30). 5\ud3b8 \ucc28\uc774.<\/p>\n\n<div class=\"code-block\">function LoginForm() {\n  const handleSubmit = (e) =&gt; {\n    e.preventDefault();    \/\/ form \uc758 \uae30\ubcf8 \ub3d9\uc791 (\ud398\uc774\uc9c0 \uc0c8\ub85c\uace0\uce68) \ucc28\ub2e8\n    \/\/ &#8230; fetch \ub85c \ub370\uc774\ud130 \uc804\uc1a1\n  };\n  return &lt;form onSubmit={handleSubmit}&gt;&#8230;&lt;\/form&gt;;\n}\n\nfunction NestedClick() {\n  return (\n    &lt;div onClick={() =&gt; alert(&#8216;\ubd80\ubaa8&#8217;)}&gt;\n      &lt;button onClick={(e) =&gt; {\n        e.stopPropagation(); \/\/ \uc790\uc2dd \ud074\ub9ad\uc774 \ubd80\ubaa8\ub85c \uc548 \uc62c\ub77c\uac10\n        alert(&#8216;\uc790\uc2dd&#8217;);\n      }}&gt;\n        \ud074\ub9ad\n      &lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}<\/div>\n\n<p>\uc2e4\uc804 \ube48\ub3c4 \u2014 <strong>preventDefault<\/strong> \uac00 \uc555\ub3c4\uc801\uc73c\ub85c \ub9ce\ub2e4. form \uc81c\ucd9c, anchor \ud0dc\uadf8 \ub3d9\uc791 \ucc28\ub2e8, drag \uae30\ubcf8 \ub3d9\uc791 \ub4f1. stopPropagation \uc740 \ubaa8\ub2ec \uc678\ubd80 \ud074\ub9ad \ub2eb\uae30 \uac19\uc740 \ud2b9\uc218 \ucf00\uc774\uc2a4.<\/p>\n\n<h2>3. \uc778\uc790 \uc804\ub2ec \u2014 4\uac00\uc9c0 \ud328\ud134<\/h2>\n\n<p>\ud578\ub4e4\ub7ec\uc5d0 \ucd94\uac00 \uc815\ubcf4 (item ID \ub4f1) \ub97c \ub118\uae30\ub294 \ubc29\ubc95. 4\ud3b8\uc5d0\uc11c \uc778\ub77c\uc778 \ud654\uc0b4\ud45c \ud328\ud134\uc744 \ubd24\uc9c0\ub9cc \uc635\uc158\uc774 \ub354 \uc788\ub2e4.<\/p>\n\n<div class=\"code-block\">function TodoList({ todos }) {\n  \/\/ \ud328\ud134 1 \u2014 \uc778\ub77c\uc778 \ud654\uc0b4\ud45c (\uac00\uc7a5 \ud754\ud568)\n  return todos.map(todo =&gt; (\n    &lt;button onClick={() =&gt; deleteTodo(todo.id)}&gt;\uc0ad\uc81c&lt;\/button&gt;\n  ));\n}\n\n\/\/ \ud328\ud134 2 \u2014 data \uc18d\uc131 + \ud578\ub4e4\ub7ec (\uc7ac\ub80c\ub354 \ucd5c\uc801\ud654)\nfunction TodoList2({ todos }) {\n  const handleClick = (e) =&gt; {\n    deleteTodo(Number(e.currentTarget.dataset.id));\n  };\n  return todos.map(todo =&gt; (\n    &lt;button data-id={todo.id} onClick={handleClick}&gt;\uc0ad\uc81c&lt;\/button&gt;\n  ));\n}\n\n\/\/ \ud328\ud134 3 \u2014 \uace0\ucc28 \ud568\uc218 (currying)\nconst makeDelete = (id) =&gt; () =&gt; deleteTodo(id);\n&lt;button onClick={makeDelete(todo.id)}&gt;\uc0ad\uc81c&lt;\/button&gt;\n\n\/\/ \ud328\ud134 4 \u2014 \ubcc4\ub3c4 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ubd84\ub9ac (\uac00\uc7a5 \uae54\ub054)\nfunction TodoItem({ todo, onDelete }) {\n  return &lt;button onClick={() =&gt; onDelete(todo.id)}&gt;\uc0ad\uc81c&lt;\/button&gt;;\n}<\/div>\n\n<p>\uc2e4\uc804 \uc120\ud0dd \u2014 \ud56d\ubaa9 \uc218\uac00 \uc801\uc73c\uba74 \ud328\ud134 1, \uc218\ubc31 \uac1c \uc774\uc0c1\uc774\uba74 \ud328\ud134 2 (\uc778\ub77c\uc778 \ud568\uc218\uac00 \ub9e4 \ub80c\ub354\ub9c8\ub2e4 \uc0c8 \ud568\uc218 \uac1d\uccb4 \uc0dd\uc131 \u2192 \uc790\uc2dd memo \uac00 \uae68\uc9d0. 16\ud3b8\uc5d0\uc11c \ub2e4\uc2dc \ub4f1\uc7a5). \ud328\ud134 4 \uac00 \uac00\ub3c5\uc131\u00b7\uc7ac\uc0ac\uc6a9 \ub458 \ub2e4 \uc6b0\uc704.<\/p>\n\n<h2>4. \ud754\ud55c \ud568\uc815 \u2014 \ud578\ub4e4\ub7ec \uc548\uc5d0\uc11c state \uc61b \uac12<\/h2>\n\n<p>6\ud3b8\uc5d0\uc11c \ubd24\ub4ef setter \ub294 \ube44\ub3d9\uae30. \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec \uc548\uc5d0\uc11c \uac19\uc740 state \ub97c \uc5ec\ub7ec \ubc88 \uac31\uc2e0\ud560 \ub54c \uc790\uc8fc \uc5b4\uae0b\ub09c\ub2e4.<\/p>\n\n<div class=\"code-block\">function Counter() {\n  const [count, setCount] = useState(0);\n\n  const handleDouble = () =&gt; {\n    setCount(count + 1);   \/\/ count=0 \u2192 1 \uc608\uc57d\n    setCount(count + 1);   \/\/ count=0 (\uc544\uc9c1 \uc548 \ubc14\ub01c) \u2192 1 \uc608\uc57d\n    \/\/ \uacb0\uacfc: 1 (2 \uac00 \uc544\ub2d8)\n  };\n  \/\/ \ud574\uacb0: \ud568\uc218\ud615 \uc5c5\ub370\uc774\ud2b8\n  const handleDoubleFix = () =&gt; {\n    setCount(prev =&gt; prev + 1);  \/\/ 0 \u2192 1\n    setCount(prev =&gt; prev + 1);  \/\/ 1 \u2192 2 \u2705\n  };\n}<\/div>\n\n<div class=\"warnbox\">\n<strong>\ube44\ub3d9\uae30 \ud578\ub4e4\ub7ec \uc548\uc5d0\uc11c<\/strong> \u2014 <code>onClick<\/code> \uc774 <code>async<\/code> \ud568\uc218\ub77c\uba74, await \ud6c4\uc758 \ucf54\ub4dc\uc5d0\uc11c\ub3c4 <code>count<\/code> \ub294 \ud074\ub9ad \uc2dc\uc810\uc758 \uc61b \uac12. <code>setCount(prev =&gt; prev + 1)<\/code> \ud568\uc218\ud615 \ud328\ud134\uc774\ub098 <code>useRef<\/code> \ub85c \ucd5c\uc2e0 \uac12 \ucd94\uc801 \ud544\uc694. 11\ud3b8 useEffect \uc758 closure \ud568\uc815\uacfc \uac19\uc740 \ubfcc\ub9ac.\n<\/div>\n\n<p>\uc774\ubca4\ud2b8 \ud578\ub4e4\ub9c1\uc774 \uc190\uc5d0 \uc7a1\ud788\uba74 React \uc758 &#8220;\uc0ac\uc6a9\uc790 \uc561\uc158 \u2192 state \ubcc0\uacbd \u2192 UI \uc7ac\ub80c\ub354&#8221; \uc0ac\uc774\ud074\uc774 \uc644\uc131\ub41c\ub2e4. 8\ud3b8\uc5d0\uc11c\ub294 \uadf8 state \uac00 \ub2e4\uc591\ud574\uc9c8 \ub54c UI \ub97c <strong>\uc870\uac74\ubd80\ub85c \uadf8\ub9ac\ub294 \ud328\ud134<\/strong>\uc73c\ub85c \ub4e4\uc5b4\uac04\ub2e4.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00<\/h3>\n<p>React \uad50\uc7ac 8\ud3b8 \u2014 \uc870\uac74\ubd80 \ub80c\ub354\ub9c1. \uc0bc\ud56d \u00b7 &amp;&amp; \u00b7 null \ubc18\ud658 + 0 \ud45c\uc2dc \ud568\uc815 + early return.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-props-5\/\">5\ud3b8 Props<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-usestate-6\/\">6\ud3b8 useState<\/a> \u00b7\n<strong>7\ud3b8 \uc774\ubca4\ud2b8<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>React \uc774\ubca4\ud2b8 \u2014 \ud569\uc131 \uc774\ubca4\ud2b8 \uc2dc\uc2a4\ud15c, preventDefault, \uc778\uc790 \uc804\ub2ec 4 \ud328\ud134, \ud568\uc815. \uad50\uc7ac 7\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":744,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-769","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=769"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/769\/revisions"}],"predecessor-version":[{"id":796,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/769\/revisions\/796"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/744"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}