{"id":66,"date":"2026-06-26T13:32:24","date_gmt":"2026-06-26T13:32:24","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=66"},"modified":"2026-06-26T14:02:47","modified_gmt":"2026-06-26T14:02:47","slug":"%ec%9d%b4%eb%b2%a4%ed%8a%b8-%ec%b2%98%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=66","title":{"rendered":"\uc774\ubca4\ud2b8 \ucc98\ub9ac"},"content":{"rendered":"

1. \uc774\ubca4\ud2b8 \ucc98\ub9ac<\/h1>\n

\uc0ac\uc6a9\uc790\uc758 \ud589\ub3d9(\ud074\ub9ad, \uc785\ub825, \ub9c8\uc6b0\uc2a4 \uc774\ub3d9 \ub4f1)\uc5d0 \ubc18\uc751\ud558\ub294 \uc778\ud130\ub799\ud2f0\ube0c\ud55c \uc6f9\uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574 React\uc758 \uc774\ubca4\ud2b8 \uc2dc\uc2a4\ud15c\uc744 \uae4a\uc774 \uc788\uac8c \ud559\uc2b5\ud55c\ub2e4.<\/p>\n

1.1. React \uc774\ubca4\ud2b8 \uc2dc\uc2a4\ud15c \uc774\ud574\ud558\uae30<\/h2>\n

1.1.1. \uc774\ubca4\ud2b8\ub780?<\/h3>\n

\uc774\ubca4\ud2b8(Event)<\/strong>\ub294 \uc0ac\uc6a9\uc790\uac00 \uc6f9\ud398\uc774\uc9c0\uc5d0\uc11c \ucde8\ud558\ub294 \ud589\ub3d9\uc744 \uc758\ubbf8\ud55c\ub2e4. \ubc84\ud2bc \ud074\ub9ad, \ud0a4\ubcf4\ub4dc \uc785\ub825, \ub9c8\uc6b0\uc2a4 \uc774\ub3d9 \ub4f1 \ubaa8\ub4e0 \uc0c1\ud638\uc791\uc6a9\uc774 \uc774\ubca4\ud2b8\ub2e4.<\/p>\n

\n

Tip<\/strong>: \uc77c\uc0c1 \uc0dd\ud65c\uc758 \ube44\uc720:<\/strong><\/p>\n

\u2022 \ub3c4\uc5b4\ubca8\uc744 \ub204\ub974\uba74(\uc774\ubca4\ud2b8)<\/strong> \u2192 \ucd08\uc778\uc885\uc774 \uc6b8\ub9b0\ub2e4(\ubc18\uc751)
\n\u2022 \ub9ac\ubaa8\ucee8 \ubc84\ud2bc\uc744 \ub204\ub974\uba74(\uc774\ubca4\ud2b8)<\/strong> \u2192 TV \ucc44\ub110\uc774 \ubc14\ub010\ub2e4(\ubc18\uc751)
\n\u2022 \uc6f9\ud398\uc774\uc9c0\uc5d0\uc11c \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74(\uc774\ubca4\ud2b8)<\/strong> \u2192 \ubb34\uc5b8\uac00 \uc2e4\ud589\ub41c\ub2e4(\ubc18\uc751)<\/p>\n

React\uc5d0\uc11c\ub294 \uc774\ub7f0 "\ubc18\uc751"\uc744 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec(Event Handler)<\/strong>\ub77c\ub294 \ud568\uc218\ub85c \uc815\uc758\ud55c\ub2e4.<\/p>\n<\/blockquote>\n

1.1.2. HTML vs React \uc774\ubca4\ud2b8 \ube44\uad50<\/h3>\n\n\n\n\n\n\n\n
\uad6c\ubd84<\/th>\nHTML<\/th>\nReact<\/th>\n<\/tr>\n<\/thead>\n
\uc774\ubca4\ud2b8\uba85<\/strong><\/td>\n\uc18c\ubb38\uc790 onclick<\/code><\/td>\n\uce74\uba5c\ucf00\uc774\uc2a4 onClick<\/code><\/td>\n<\/tr>\n
\ud578\ub4e4\ub7ec<\/strong><\/td>\n\ubb38\uc790\uc5f4 "handleClick()"<\/code><\/td>\n\ud568\uc218 {handleClick}<\/code><\/td>\n<\/tr>\n
\uae30\ubcf8 \ub3d9\uc791 \ubc29\uc9c0<\/strong><\/td>\nreturn false<\/code><\/td>\ne.preventDefault()<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\/\/ HTML \ubc29\uc2dd\n<button onclick="handleClick()">\ud074\ub9ad<\/button>\n\n\/\/ React \ubc29\uc2dd\n<button onClick={handleClick}>\ud074\ub9ad<\/button>\n<\/code><\/pre>\n
\n
Warning<\/strong>: \u26a0\ufe0f \uac00\uc7a5 \ud754\ud55c \uc2e4\uc218!<\/strong><\/p>\n
onClick={handleClick()}<\/code> \u274c \uc798\ubabb\ub428!
\nonClick={handleClick}<\/code> \u2705 \uc62c\ubc14\ub984!<\/p>\n
\uc774\uc720:<\/strong> \uad04\ud638\ub97c \ubd99\uc774\uba74 \ud568\uc218\uac00 \uc989\uc2dc \uc2e4\ud589\ub41c\ub2e4.<\/p>\n
\n<\/code><\/pre>\n<\/blockquote>\n
function Button() {
\n  const handleClick = () => {
\n    console.log("\ud074\ub9ad\ub428");
\n  };<\/p>\n
  return (<\/p>\n
\n      {\/* \u274c \ub80c\ub354\ub9c1 \uc2dc \uc989\uc2dc \uc2e4\ud589 *\/}
\n