{"id":766,"date":"2026-05-18T23:00:32","date_gmt":"2026-05-18T15:00:32","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-props-5\/"},"modified":"2026-05-19T20:26:12","modified_gmt":"2026-05-19T12:26:12","slug":"react-props-5","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-props-5\/","title":{"rendered":"React Props \u2014 \ubd80\ubaa8\u2192\uc790\uc2dd \ub370\uc774\ud130 \uc804\ub2ec (Ch.5)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 742 -->\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.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;}\ntable{width:100%;border-collapse:collapse;font-size:15px;background:var(--color-bg-card);}\nth,td{padding:11px 12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top;}\nth{background:#f1f5f9;font-weight:700;color:#0f172a;}\ntd:first-child,th:first-child{font-weight:700;}\n@media (max-width:560px){.tablewrap table,.tablewrap thead,.tablewrap tbody,.tablewrap tr,.tablewrap th,.tablewrap td{display:block;width:auto;}.tablewrap thead{display:none;}.tablewrap tr{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;}.tablewrap td{border:none;border-bottom:1px solid #f1f5f9;padding:9px 14px;}.tablewrap td:first-child{background:#f1f5f9;font-weight:800;font-size:15.5px;}.tablewrap td:last-child{border-bottom:none;}.tablewrap td[data-label]::before{content:attr(data-label) \" \u2014 \";font-weight:700;color:var(--color-primary);}}\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 \uc785\ubb38 5\ud3b8<\/span>\n  <h1>React Props \u2014 \ubd80\ubaa8\u2192\uc790\uc2dd \ub370\uc774\ud130 \uc804\ub2ec<\/h1>\n  <p>\ucef4\ud3ec\ub10c\ud2b8\ub294 \ud568\uc218, props \ub294 \uadf8 \uc778\uc790. \ud55c \uc904\ub85c \ub05d\ub098\ub294 \uac1c\ub150 + 4\uac00\uc9c0 \uc2e4\uc804 \ud328\ud134.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-25.jpg\" alt=\"\ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc790\uc2dd \uce74\ub4dc\ub4e4\ub85c \ub370\uc774\ud130 \ud1a0\ud070\uc774 \ud758\ub7ec\ub0b4\ub9ac\ub294 \uc77c\ub7ec\uc2a4\ud2b8 \u2014 Props \ub2e8\ubc29\ud5a5 \ud750\ub984 \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>3\ud3b8\uc5d0\uc11c \ub9cc\ub4e0 <code>&lt;Greeting \/&gt;<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud56d\uc0c1 \uac19\uc740 &#8220;\uc548\ub155, React!&#8221; \ub9cc \ucd9c\ub825. \uc2e4\uc804\uc5d0\uc120 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc678\ubd80 \ub370\uc774\ud130 (\uc0ac\uc6a9\uc790 \uc774\ub984\u00b7\uac00\uaca9\u00b7\uc0c1\ud0dc) \ub97c \ubc1b\uc544 \ub2e4\ub974\uac8c \uadf8\ub824\uc57c \ud55c\ub2e4. \uadf8 \ud1b5\ub85c\uac00 <strong>props<\/strong>.<\/p>\n\n<p>\ud55c \uc904 \uc815\uc758 \u2014 <strong>props \ub294 \ud568\uc218\uc758 \uc778\uc790<\/strong>. \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud568\uc218\ub2c8\uae4c, \uc778\uc790\ub3c4 \ubc1b\ub294\ub2e4. \ub2e4\ub9cc JSX \ubb38\ubc95\uc73c\ub85c \ud45c\ud604\ub420 \ubfd0. \uc774\ubc88 5\ud3b8\uc5d0\uc11c \uae30\ubcf8 + \uad6c\uc870\ubd84\ud574 + \uae30\ubcf8\uac12 + children + TypeScript \uae4c\uc9c0 \ud55c \ubc88\uc5d0.<\/p>\n\n<h2>1. Props \ub294 \ud568\uc218 \uc778\uc790\ub2e4<\/h2>\n\n<p>React \uac00 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9c8\uc6b4\ud2b8\ud560 \ub54c JSX \uc18d\uc131\uc744 \ubaa8\uc544 <strong>\uac1d\uccb4 \ud558\ub098<\/strong>\ub85c \ub9cc\ub4e4\uc5b4 \ud568\uc218 \uccab \uc778\uc790\ub85c \uc804\ub2ec.<\/p>\n\n<div class=\"code-block\">\/\/ Greeting \ucef4\ud3ec\ub10c\ud2b8\nfunction Greeting(props) {\n  return &lt;h1&gt;\uc548\ub155, {props.name}\ub2d8! (\ub098\uc774: {props.age})&lt;\/h1&gt;;\n}\n\n\/\/ \ubd80\ubaa8\uc5d0\uc11c \uc0ac\uc6a9\nfunction App() {\n  return (\n    &lt;&gt;\n      &lt;Greeting name=&#8221;\ubc15\uc900\uc131&#8221; age={42} \/&gt;\n      &lt;Greeting name=&#8221;\ud64d\uae38\ub3d9&#8221; age={28} \/&gt;\n    &lt;\/&gt;\n  );\n}<\/div>\n\n<p>React \uac00 \ub0b4\ubd80\uc801\uc73c\ub85c <code>Greeting({ name: '\ubc15\uc900\uc131', age: 42 })<\/code> \uc73c\ub85c \ud638\ucd9c. JSX \uc18d\uc131\uc774 \uac1d\uccb4 \ud0a4, JSX \uac12\uc774 \uac1d\uccb4 \uac12. \ub05d.<\/p>\n\n<div class=\"databox\">\n<strong>\uc18d\uc131 \uac12 \uc885\ub958<\/strong> \u2014 \ubb38\uc790\uc5f4\uc740 \ub530\uc634\ud45c \uadf8\ub300\ub85c (<code>name=\"\ubc15\uc900\uc131\"<\/code>), \uc22b\uc790\u00b7boolean\u00b7\uac1d\uccb4\u00b7\ud568\uc218\u00b7JSX \ub294 \ubaa8\ub450 <strong>\uc911\uad04\ud638<\/strong> (<code>age={42}<\/code>\u00b7<code>active={true}<\/code>\u00b7<code>style=&#123;&#123;...&#125;&#125;<\/code>\u00b7<code>onClick={fn}<\/code>\u00b7<code>icon=&#123;&lt;Star \/&gt;&#125;<\/code>).\n<\/div>\n\n<h2>2. \uad6c\uc870\ubd84\ud574 \u2014 \uc2e4\uc804 \ud45c\uc900 \ud328\ud134<\/h2>\n\n<p>\ub9e4\ubc88 <code>props.name<\/code>\u00b7<code>props.age<\/code> \uc4f0\uba74 \uc9c0\ub8e8\ud558\ub2e4. \ud568\uc218 \uc778\uc790\uc5d0\uc11c \ubc14\ub85c <strong>\uad6c\uc870\ubd84\ud574<\/strong>:<\/p>\n\n<div class=\"code-block\">function Greeting({ name, age }) {\n  return &lt;h1&gt;\uc548\ub155, {name}\ub2d8! (\ub098\uc774: {age})&lt;\/h1&gt;;\n}<\/div>\n\n<p>\uc774\uac8c 2026 \ub144 \ud45c\uc900. \ucf54\ub4dc\ub7c9 \uc808\ubc18, \uc5b4\ub5a4 prop \uc744 \uc4f0\ub294\uc9c0 \ud568\uc218 \uc2dc\uadf8\ub2c8\ucc98\ub9cc \ubd10\ub3c4 \uba85\ud655. \uc2e4\uc804 \ucf54\ub4dc \ubca0\uc774\uc2a4\uc758 90% \uc774\uc0c1\uc774 \uc774 \ud328\ud134.<\/p>\n\n<h3>\uae30\ubcf8\uac12 \u2014 \uad6c\uc870\ubd84\ud574 \uae30\ubcf8\uac12 \ubb38\ubc95<\/h3>\n\n<p>prop \uc774 \uc548 \ub118\uc5b4\uc654\uc744 \ub54c \uc0ac\uc6a9\ud560 \uae30\ubcf8\uac12. JS \uc758 \uae30\ubcf8 \uc778\uc790 \ubb38\ubc95 \uadf8\ub300\ub85c:<\/p>\n\n<div class=\"code-block\">function Greeting({ name, age = 0, greeting = &#8216;\uc548\ub155&#8217; }) {\n  return &lt;h1&gt;{greeting}, {name}\ub2d8! ({age}\uc138)&lt;\/h1&gt;;\n}\n\/\/ &lt;Greeting name=&#8221;\ubc15\uc900\uc131&#8221; \/&gt; \u2192 &#8220;\uc548\ub155, \ubc15\uc900\uc131\ub2d8! (0\uc138)&#8221;<\/div>\n\n<h2>3. children \u2014 \ud2b9\uc218\ud55c prop<\/h2>\n\n<p>JSX \ud0dc\uadf8\uc758 <strong>\uc5ec\ub294 \ud0dc\uadf8\uc640 \ub2eb\ub294 \ud0dc\uadf8 \uc0ac\uc774\uc758 \ub0b4\uc6a9<\/strong> \uc774 \uc790\ub3d9\uc73c\ub85c <code>children<\/code> \uc774\ub77c\ub294 prop \uc73c\ub85c \ub4e4\uc5b4\uc628\ub2e4.<\/p>\n\n<div class=\"code-block\">function Card({ title, children }) {\n  return (\n    &lt;div className=&#8221;card&#8221;&gt;\n      &lt;h2&gt;{title}&lt;\/h2&gt;\n      &lt;div className=&#8221;card-body&#8221;&gt;{children}&lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}\n\n\/\/ \uc0ac\uc6a9\n&lt;Card title=&#8221;\uacf5\uc9c0&#8221;&gt;\n  &lt;p&gt;\uc774\ubc88 \uc8fc \uc810\uac80\uc740 \ud1a0\uc694\uc77c \uc0c8\ubcbd 3\uc2dc.&lt;\/p&gt;\n  &lt;a href=&#8221;\/notice&#8221;&gt;\uc0c1\uc138 \ubcf4\uae30&lt;\/a&gt;\n&lt;\/Card&gt;<\/div>\n\n<p>children \uc758 \uc9c4\uc9dc \ud798 \u2014 <strong>\ub808\uc774\uc544\uc6c3 wrapper \ucef4\ud3ec\ub10c\ud2b8<\/strong> \ub9cc\ub4e4\uae30. Card\u00b7Modal\u00b7Layout\u00b7Section \ub4f1 &#8220;\uaecd\ub370\uae30\ub294 \ud45c\uc900\ud654\ud558\ub418 \uc548\uc740 \uc790\uc720&#8221; \uc778 \uacbd\uc6b0. children \uc5c6\uc774 React \uc9dc\uae30 \uac70\uc758 \ubd88\uac00\ub2a5.<\/p>\n\n<h2>4. TypeScript \ub85c props \ud0c0\uc785 \ubc15\uae30<\/h2>\n\n<p>JS \ub9cc \uc4f0\uba74 \uc798\ubabb\ub41c prop (\uc624\ud0c0\u00b7\ud0c0\uc785 \uc2e4\uc218) \uc774 \ub7f0\ud0c0\uc784\uc5d0\uc57c \ubc1c\uacac. TypeScript \ub294 \ucef4\ud30c\uc77c \ud0c0\uc784\uc5d0 \uc7a1\ub294\ub2e4. 2\ud3b8\uc5d0\uc11c <code>--template react-ts<\/code> \ub85c \ub9cc\ub4e0 \ud504\ub85c\uc81d\ud2b8\uba74 \ubc14\ub85c \uac00\ub2a5.<\/p>\n\n<div class=\"code-block\">type GreetingProps = {\n  name: string;\n  age?: number;          \/\/ ? = \uc120\ud0dd\n  greeting?: string;\n};\n\nfunction Greeting({ name, age = 0, greeting = &#8216;\uc548\ub155&#8217; }: GreetingProps) {\n  return &lt;h1&gt;{greeting}, {name}\ub2d8! ({age}\uc138)&lt;\/h1&gt;;\n}\n\n\/\/ IDE \uac00 \uc989\uc2dc \uc7a1\uc544\uc90c\n&lt;Greeting name=&#8221;\ubc15\uc900\uc131&#8221; age=&#8221;42&#8243; \/&gt; \/\/ \u274c string \uc778\ub370 number \uc790\ub9ac<\/div>\n\n<p>children \ud0c0\uc785\uc740 <code>React.ReactNode<\/code> \u2014 \ud14d\uc2a4\ud2b8\u00b7JSX\u00b7\ubc30\uc5f4 \ubaa8\ub450 \ud5c8\uc6a9:<\/p>\n\n<div class=\"code-block\">type CardProps = {\n  title: string;\n  children: React.ReactNode;\n};\nfunction Card({ title, children }: CardProps) { &#8230; }<\/div>\n\n<div class=\"warnbox\">\n<strong>\ud754\ud55c \uccab \uc2e4\uc218<\/strong> \u2014 props \uc548\uc5d0\uc11c \uac12\uc744 <strong>\uc218\uc815<\/strong>. <code>props.name = '\ud64d\uae38\ub3d9'<\/code> \uac19\uc740 \ucf54\ub4dc. React \ub294 props \ub97c immutable \ub85c \uac04\uc8fc \u2014 \ubd80\ubaa8\uac00 \ub2e4\uc74c \ub80c\ub354\uc5d0\uc11c \ubcf4\ub0b8 \uac12\uc774 \ub36e\uc5b4\uc4f4\ub2e4. props \uac00 \ub9c8\uc74c\uc5d0 \uc548 \ub4e4\uba74 6\ud3b8 useState \ub85c \uc790\uccb4 \uc0c1\ud0dc\ub85c \ubcc0\ud658\ud574\uc11c \ub2e4\ub8e8\ub294 \uac8c \uc815\uacf5\ubc95.\n<\/div>\n\n<p>\uc785\ubb38 5\ud3b8\uc73c\ub85c React \uae30\ubcf8\uae30 \ub05d. 6\ud3b8\ubd80\ud130\ub294 <strong>state (useState)<\/strong> \u2014 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc790\uccb4\uc801\uc73c\ub85c \ubcc0\ud558\ub294 \uac12\uc744 \uac00\uc9c0\ub294 \ubc95. \uc5ec\uae30\uc11c\ubd80\ud130 React \uac00 \uc9c4\uc9dc &#8220;\ub3d9\uc801&#8221; \uc778 \ub3c4\uad6c\ub85c \ubcf4\uc774\uae30 \uc2dc\uc791.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00<\/h3>\n<p>React \uad50\uc7ac 6\ud3b8 \u2014 useState \ub85c \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc0c1\ud0dc \ubc15\uae30. setter \ube44\ub3d9\uae30\uc131, \uac1d\uccb4\/\ubc30\uc5f4 \ud568\uc815, \ud568\uc218\ud615 \uc5c5\ub370\uc774\ud2b8.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-first-component-3\/\">3\ud3b8 \uccab \ucef4\ud3ec\ub10c\ud2b8<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-jsx-syntax-4\/\">4\ud3b8 JSX<\/a> \u00b7\n<strong>5\ud3b8 Props<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>React Props \u2014 \uad6c\uc870\ubd84\ud574\u00b7\uae30\ubcf8\uac12\u00b7children prop\u00b7TypeScript \ud0c0\uc785. React \uad50\uc7ac 5\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":742,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-766","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\/766","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=766"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/766\/revisions"}],"predecessor-version":[{"id":794,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/766\/revisions\/794"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/742"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}