{"id":780,"date":"2026-05-18T23:02:32","date_gmt":"2026-05-18T15:02:32","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-typescript-20\/"},"modified":"2026-05-19T20:26:28","modified_gmt":"2026-05-19T12:26:28","slug":"react-typescript-20","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-typescript-20\/","title":{"rendered":"React + TypeScript \u2014 \ucef4\ud3ec\ub10c\ud2b8 \ud0c0\uc785 (Ch.20)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 754 -->\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 \uace0\uae09 20\ud3b8<\/span>\n  <h1>React + TypeScript \u2014 \ucef4\ud3ec\ub10c\ud2b8 \ud0c0\uc785<\/h1>\n  <p>1\ud3b8\ubd80\ud130 \uc904\uace7 TS \ub85c \uc654\ub2e4. \uc774\uc81c React \uc804\uc6a9 \ud0c0\uc785 7 \ud328\ud134\uc744 \ud55c \ubc88\uc5d0 \uc815\ub9ac.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-37.jpg\" alt=\"\ud0c0\uc785 \ud234\ud301\uc774 \ub5a0 \uc788\ub294 React \ucef4\ud3ec\ub10c\ud2b8 \ucf54\ub4dc \uc77c\ub7ec\uc2a4\ud2b8 \u2014 TypeScript \ud1b5\ud569 \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>2\ud3b8\uc5d0\uc11c <code>--template react-ts<\/code> \ub85c \uc2dc\uc791\ud588\uace0, \uc774\ud6c4 \ubaa8\ub4e0 \uc608\uc81c\uac00 .tsx. \uc774\ubc88 20\ud3b8\uc740 \uadf8 \ub3d9\uc548 \ud769\uc5b4\uc838 \uc788\ub358 <strong>React + TypeScript \ud328\ud134 7\uac00\uc9c0<\/strong>\ub97c \ud55c \uacf3\uc5d0 \ubaa8\uc544 \uc815\ub9ac. \ucef4\ud3ec\ub10c\ud2b8 \uc791\uc131\ud558\ub2e4 &#8220;\uc774 \ud0c0\uc785 \uc5b4\ub5bb\uac8c \uc4f0\uc9c0&#8221; \ub9c9\ud790 \ub54c \ucc3e\ub294 \ub808\ud37c\ub7f0\uc2a4\ub85c.<\/p>\n\n<h2>1. Props \u2014 type \ub610\ub294 interface<\/h2>\n\n<div class=\"code-block\">\/\/ type (\ud604\uc7ac React \ucee4\ubba4\ub2c8\ud2f0 \uc6b0\uc138)\ntype ButtonProps = {\n  label: string;\n  variant?: &#8216;primary&#8217; | &#8216;secondary&#8217;;\n  onClick: () =&gt; void;\n};\n\nfunction Button({ label, variant = &#8216;primary&#8217;, onClick }: ButtonProps) {\n  return &lt;button className={variant} onClick={onClick}&gt;{label}&lt;\/button&gt;;\n}\n\n\/\/ interface \ub3c4 \uac70\uc758 \ub3d9\uc77c\ud558\uac8c \uc0ac\uc6a9 \uac00\ub2a5\ninterface ButtonProps { &#8230; }<\/div>\n\n<p>\uc2e4\uc804 \uc120\ud0dd \u2014 props \ub294 type \uc774 \uad8c\uc7a5. <code>&<\/code> \ub85c \uad50\ucc28 \ud0c0\uc785\u00b7literal union \ub4f1 \ub354 \uc720\uc5f0. interface \ub294 \ub3d9\uc77c \uc774\ub984\uc73c\ub85c \uc120\uc5b8 \ubcd1\ud569 \uac00\ub2a5 (\ub77c\uc774\ube0c\ub7ec\ub9ac \ud655\uc7a5\uc5d0 \uc720\ub9ac). \ub458 \ub2e4 \uc54c\uc544\ub450\ub418 \uc77c\ubc18 \ucef4\ud3ec\ub10c\ud2b8\uc5d4 type.<\/p>\n\n<h2>2. children \u2014 React.ReactNode \uac00 \uc815\ub2f5<\/h2>\n\n<div class=\"code-block\">type CardProps = {\n  title: string;\n  children: React.ReactNode;   \/\/ \ud14d\uc2a4\ud2b8\u00b7JSX\u00b7\ubc30\uc5f4\u00b7null \ubaa8\ub450 \ud5c8\uc6a9\n};\n\nfunction Card({ title, children }: CardProps) {\n  return &lt;div&gt;&lt;h2&gt;{title}&lt;\/h2&gt;&lt;div&gt;{children}&lt;\/div&gt;&lt;\/div&gt;;\n}<\/div>\n\n<p>\ud754\ud55c \uc2e4\uc218 \u2014 <code>JSX.Element<\/code> \ub85c \ud0c0\uc785 \ubc15\uae30. \uadf8\ub7ec\uba74 string\u00b7null\u00b7\ubc30\uc5f4\uc744 \ubabb \ubc1b\uc74c. <strong>\uac70\uc758 \ud56d\uc0c1 ReactNode<\/strong>.<\/p>\n\n<h2>3. useState \u2014 \uba85\uc2dc\uc801 \uc81c\ub124\ub9ad\uc774 \ud544\uc694\ud55c \uacbd\uc6b0<\/h2>\n\n<div class=\"code-block\">\/\/ \ucd94\ub860 \uac00\ub2a5 \u2014 \uba85\uc2dc \ubd88\ud544\uc694\nconst [count, setCount] = useState(0);              \/\/ number\nconst [name, setName] = useState(&#8221;);               \/\/ string\n\n\/\/ \ucd94\ub860 \ubd88\uac00 \u2014 \uba85\uc2dc \ud544\uc694\nconst [user, setUser] = useState&lt;User | null&gt;(null);\nconst [items, setItems] = useState&lt;string[]&gt;([]);<\/div>\n\n<p>\ucd08\uae30\uac12\uc774 <code>null<\/code> \ub610\ub294 \ube48 \ubc30\uc5f4\uc774\uba74 TS \uac00 \uc815\ud655\ud55c \ud0c0\uc785\uc744 \ucd94\ub860 \ubabb \ud568. \uc81c\ub124\ub9ad\uc73c\ub85c \uc54c\ub824\uc900\ub2e4. \uc548 \uadf8\ub7ec\uba74 <code>setItems('hello')<\/code> \uac19\uc740 \uc798\ubabb\ub41c \ud638\ucd9c\ub3c4 \ud1b5\uacfc.<\/p>\n\n<h2>4. \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec \u2014 React.MouseEvent \u00b7 React.ChangeEvent<\/h2>\n\n<div class=\"code-block\">function Input() {\n  const handleChange = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {\n    console.log(e.target.value);    \/\/ \u2705 string\n  };\n  const handleClick = (e: React.MouseEvent&lt;HTMLButtonElement&gt;) =&gt; {\n    console.log(e.currentTarget.dataset.id);\n  };\n  return &lt;&gt;\n    &lt;input onChange={handleChange} \/&gt;\n    &lt;button onClick={handleClick}&gt;\ud074\ub9ad&lt;\/button&gt;\n  &lt;\/&gt;;\n}<\/div>\n\n<p>\uc81c\ub124\ub9ad\uc5d0 <strong>\uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud55c \uc694\uc18c\uc758 HTML \ud0c0\uc785<\/strong>\uc744 \ub123\uc74c. <code>HTMLInputElement<\/code>\u00b7<code>HTMLButtonElement<\/code>\u00b7<code>HTMLFormElement<\/code>\u00b7<code>HTMLSelectElement<\/code> \uac19\uc740 \ud45c\uc900 DOM \ud0c0\uc785.<\/p>\n\n<div class=\"databox\">\n<strong>\ud578\ub4e4\ub7ec\ub97c props \ub85c \ubc1b\uc744 \ub54c<\/strong> \u2014 <code>onClick: (e: React.MouseEvent&lt;HTMLButtonElement&gt;) =&gt; void<\/code> \uae38\ub2e4. \uac04\ub2e8\ud788 <code>onClick: () =&gt; void<\/code> \ub3c4 \uac00\ub2a5 (\uc774\ubca4\ud2b8 \uac1d\uccb4 \uc548 \uc4f0\uba74). \ud638\ucd9c\uc790\uc5d0\uc11c \ubb34\uc5c7\uc774 \ud544\uc694\ud55c\uc9c0\uc5d0 \ub530\ub77c \ub2e8\uc21c\ud654.\n<\/div>\n\n<h3>ref \u2014 useRef \uc758 \ub450 \ud615\ud0dc<\/h3>\n\n<div class=\"code-block\">\/\/ 1. DOM ref\nconst inputRef = useRef&lt;HTMLInputElement&gt;(null);\n&lt;input ref={inputRef} \/&gt;\ninputRef.current?.focus();   \/\/ ?. \ud544\uc218 (null \uac00\ub2a5)\n\n\/\/ 2. \uac12 \ubcf4\uad00\uc6a9 ref (\uc7ac\ub80c\ub354 \ud2b8\ub9ac\uac70 X)\nconst renderCount = useRef(0);\nrenderCount.current += 1;<\/div>\n\n<h2>5. \uc81c\ub124\ub9ad \ucef4\ud3ec\ub10c\ud2b8 \u2014 \uc7ac\uc0ac\uc6a9 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc9c4\uac00<\/h2>\n\n<p>List\u00b7Select \uac19\uc740 &#8220;\uc5b4\ub5a4 \ud0c0\uc785\uc758 \ub370\uc774\ud130\ub4e0 \ubc1b\uc544 \uadf8\ub9ac\ub294&#8221; \ucef4\ud3ec\ub10c\ud2b8.<\/p>\n\n<div class=\"code-block\">type ListProps&lt;T&gt; = {\n  items: T[];\n  renderItem: (item: T) =&gt; React.ReactNode;\n};\n\nfunction List&lt;T&gt;({ items, renderItem }: ListProps&lt;T&gt;) {\n  return &lt;ul&gt;{items.map((item, i) =&gt; &lt;li key={i}&gt;{renderItem(item)}&lt;\/li&gt;)}&lt;\/ul&gt;;\n}\n\n\/\/ \uc0ac\uc6a9 \u2014 T \uac00 User \ub85c \uc790\ub3d9 \ucd94\ub860\n&lt;List\n  items={users}\n  renderItem={(user) =&gt; &lt;strong&gt;{user.name}&lt;\/strong&gt;}  \/\/ user \uac00 User \ud0c0\uc785\n\/&gt;<\/div>\n\n<p>\uc774 \ud328\ud134 \uc775\ud788\uba74 \ub77c\uc774\ube0c\ub7ec\ub9ac \ucf54\ub4dc (TanStack Table, react-hook-form \ub4f1) \uc758 \uc2dc\uadf8\ub2c8\ucc98\uac00 \uc77d\ud78c\ub2e4.<\/p>\n\n<h3>\ud754\ud55c \ud568\uc815 \u2014 any \u00b7 as \u00b7 @ts-ignore<\/h3>\n\n<div class=\"warnbox\">\n<strong>\ud53c\ud574\uc57c \ud560 3\uac00\uc9c0<\/strong> \u2014 \u2460 <code>any<\/code> \ud0c0\uc785 (TS \uc758 \ubaa8\ub4e0 \uc774\uc810 \ubb34\ud6a8\ud654). \u2461 \ubb34\ubd84\ubcc4\ud55c <code>as<\/code> \uac15\uc81c \uce90\uc2a4\ud305 (\ub7f0\ud0c0\uc784 \uc624\ub958 \uac00\ub2a5). \u2462 <code>@ts-ignore<\/code> \uc8fc\uc11d (\uc5d0\ub7ec \uc228\uae40). \uc815 \uc548 \ub418\uba74 <code>unknown<\/code> + \ud0c0\uc785 \uac00\ub4dc, \ub610\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac .d.ts \ubcf4\uc644. \ud68c\uc0ac \ucf54\ub4dc\ubca0\uc774\uc2a4 PR \ub9ac\ubdf0\uc5d0\uc11c \uac00\uc7a5 \uc790\uc8fc reject \ub418\ub294 \ud328\ud134.\n<\/div>\n\n<p>20\ud3b8\uc73c\ub85c React + TS \uc758 \ubaa8\ub4e0 \uc77c\uc0c1 \ud328\ud134 \uc815\ub9ac. 21\ud3b8\ubd80\ud130\ub294 production \ub2e8\uacc4 \u2014 <strong>\ud14c\uc2a4\ud2b8<\/strong>. Vitest + Testing Library \ub85c React \ucef4\ud3ec\ub10c\ud2b8 \ud14c\uc2a4\ud2b8 \uc790\ub3d9\ud654.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00<\/h3>\n<p>React \uad50\uc7ac 21\ud3b8 \u2014 Vitest + Testing Library. \ucef4\ud3ec\ub10c\ud2b8 unit \ud14c\uc2a4\ud2b8, \uc774\ubca4\ud2b8 \uc2dc\ubbac\ub808\uc774\uc158, async \uac80\uc99d.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-error-boundary-18\/\">18\ud3b8 Error Boundary<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-css-strategies-19\/\">19\ud3b8 CSS<\/a> \u00b7\n<strong>20\ud3b8 TypeScript<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>React + TypeScript 7 \ud328\ud134 \u2014 Props\u00b7useState\u00b7event\u00b7children\u00b7\uc81c\ub124\ub9ad \ucef4\ud3ec\ub10c\ud2b8.<\/p>\n","protected":false},"author":1,"featured_media":754,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-780","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\/780","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=780"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/780\/revisions"}],"predecessor-version":[{"id":807,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/780\/revisions\/807"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/754"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}