{"id":70,"date":"2026-06-26T13:32:24","date_gmt":"2026-06-26T13:32:24","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=70"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"props-%ec%86%8d%ec%84%b1","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=70","title":{"rendered":"Props (\uc18d\uc131)"},"content":{"rendered":"

1. Props (\uc18d\uc131)<\/h1>\n

\ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uac8c \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud558\ub294 \ubc29\ubc95.<\/p>\n

1.1. Props\uc758 \uac1c\ub150<\/h2>\n

Props<\/strong>\ub294 Properties(\uc18d\uc131)\uc758 \uc904\uc784\ub9d0\ub85c, \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uac8c \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud560 \ub54c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95<\/strong>\uc774\ub2e4.<\/p>\n

\n

None<\/strong>: \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud568\uc218<\/strong>\ub77c\uace0 \uc0dd\uac01\ud558\uba74, Props\ub294 \uadf8 \ud568\uc218\uc5d0 \uc804\ub2ec\ud558\ub294 \ub9e4\uac1c\ubcc0\uc218(\ud30c\ub77c\ubbf8\ud130)<\/strong>\ub2e4.<\/p>\n

\n<\/code><\/pre>\n<\/blockquote>\n
\/\/ \uc77c\ubc18 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud568\uc218
\nfunction greet(name) {  \/\/ name\uc740 \ub9e4\uac1c\ubcc0\uc218
\n  return \uc548\ub155, ${name}!<\/code>;
\n}
\ngreet("\ucca0\uc218");  \/\/ "\ucca0\uc218"\ub294 \uc778\uc790<\/p>\n
\/\/ React \ucef4\ud3ec\ub10c\ud2b8
\nfunction Greeting(props) {  \/\/ props\ub294 \ub9e4\uac1c\ubcc0\uc218
\n  return <\/p>\n
\uc548\ub155, {props.name}!<\/h1>\n
;
\n}
\n  \/\/ name="\ucca0\uc218"\ub294 prop<\/p>\n
\n### 1.1.1. \ub370\uc774\ud130 \ud750\ub984: \ub2e8\ubc29\ud5a5 (Top-Down)\n\n> **None**: **React\uc758 \ud575\uc2ec \uc6d0\uce59: \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984**\n> \n> \ub370\uc774\ud130\ub294 **\uc624\uc9c1 \uc704\uc5d0\uc11c \uc544\ub798\ub85c\ub9cc** \ud750\ub978\ub2e4. \ubb3c\uc774 \ub192\uc740 \uacf3\uc5d0\uc11c \ub0ae\uc740 \uacf3\uc73c\ub85c \ud750\ub974\ub294 \uac83\uacfc \uac19\ub2e4.\n> \n> ```jsx\n\/\/ \ud560\uc544\ubc84\uc9c0 \u2192 \uc544\ubc84\uc9c0 \u2192 \uc790\uc2dd \uc21c\uc11c\ub85c \ud750\ub984\nfunction Grandparent() {\n  const data = "\uc911\uc694\ud55c \uc815\ubcf4";\n  return <Parent info={data} \/>;  \/\/ \uc544\ub798\ub85c \uc804\ub2ec\n}\n\nfunction Parent(props) {\n  return <Child info={props.info} \/>;  \/\/ \ub354 \uc544\ub798\ub85c \uc804\ub2ec\n}\n\nfunction Child(props) {\n  return <div>{props.info}<\/div>;  \/\/ \ucd5c\uc885 \uc0ac\uc6a9\n}\n<\/code><\/pre>\n
\n
\u26a0\ufe0f \uc790\uc2dd\uc774 \ubd80\ubaa8\uc5d0\uac8c \uc9c1\uc811 \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud560 \uc218\ub294 \uc5c6\ub2e4!<\/strong>
\n(\ub098\uc911\uc5d0 \ubc30\uc6b8 "\ucf5c\ubc31 \ud568\uc218"\ub97c \ud1b5\ud574 \uac04\uc811\uc801\uc73c\ub85c \uac00\ub2a5)<\/p>\n<\/blockquote>\n
1.1.2. Props\uc758 \ud575\uc2ec \ud2b9\uc9d5<\/h3>\n
    \n
  • \uc77d\uae30 \uc804\uc6a9 (Read-Only):<\/strong> \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub294 \ubc1b\uc740 Props\ub97c \uc808\ub300 \uc218\uc815\ud560 \uc218 \uc5c6\ub2e4<\/strong>. \uc624\uc9c1 \uc77d\uae30\ub9cc \uac00\ub2a5\ud558\ub2e4.<\/li>\n
  • \uc7ac\uc0ac\uc6a9\uc131:<\/strong> \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub2e4\ub978 Props\ub97c \uc804\ub2ec\ud558\uc5ec \ub2e4\uc591\ud55c \uacb0\uacfc\ub97c \ub9cc\ub4e4 \uc218 \uc788\ub2e4.<\/li>\n
  • \ud0c0\uc785 \uc81c\ud55c \uc5c6\uc74c:<\/strong> \ubb38\uc790\uc5f4, \uc22b\uc790, \ubd88\ub9ac\uc5b8, \uac1d\uccb4, \ubc30\uc5f4, \ud568\uc218 \ub4f1 \ubaa8\ub4e0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac12\uc744 \uc804\ub2ec \uac00\ub2a5\ud558\ub2e4.<\/li>\n<\/ul>\n
    \n
    Tip<\/strong>: \uc65c Props\ub97c \uc218\uc815\ud558\uba74 \uc548 \ub420\uae4c?<\/strong><\/p>\n
    React\ub294 Props\uac00 \ubcc0\ud558\uc9c0 \uc54a\ub294\ub2e4\uace0 \uac00\uc815\ud558\uace0 \ucd5c\uc801\ud654\ub97c \uc218\ud589\ud55c\ub2e4. Props\ub97c \uc218\uc815\ud558\uba74 \uc608\uce21 \ubd88\uac00\ub2a5\ud55c \ubc84\uadf8\uac00 \ubc1c\uc0dd\ud558\uace0 \uc131\ub2a5\uc774 \uc800\ud558\ub41c\ub2e4.<\/p>\n
    \n<\/code><\/pre>\n<\/blockquote>\n
    \/\/ \u274c \uc808\ub300 \ud558\uba74 \uc548 \ub418\ub294 \uac83
    \nfunction Profile(props) {
    \n  props.name = "\ub2e4\ub978 \uc774\ub984";  \/\/ \uc624\ub958! Props\ub294 \uc77d\uae30 \uc804\uc6a9!
    \n  return <\/p>\n
    {props.name}<\/h1>\n
    ;
    \n}<\/p>\n
    \/\/ \u2705 \uc62c\ubc14\ub978 \ubc29\ubc95: \uc0c8\ub85c\uc6b4 \ubcc0\uc218\ub97c \ub9cc\ub4e4\uc5b4 \uc0ac\uc6a9
    \nfunction Profile(props) {
    \n  const displayName = props.name.toUpperCase();
    \n  return <\/p>\n
    {displayName}<\/h1>\n
    ;
    \n}<\/p>\n
    \n## 1.2. Props \uc804\ub2ec\ud558\uace0 \ubc1b\uae30\n\n### 1.2.1. Props \uc804\ub2ec \ubc29\ubc95 (\ubd80\ubaa8 \u2192 \uc790\uc2dd)\n\nHTML \uc18d\uc131\uc744 \uc4f0\ub294 \uac83\uacfc \ube44\uc2b7\ud558\uac8c \ucef4\ud3ec\ub10c\ud2b8 \ud0dc\uadf8\uc5d0 \uc18d\uc131\uc744 \ucd94\uac00\ud55c\ub2e4.\n\n```jsx\n\/\/ App.jsx (\ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8)\nfunction App() {\n  return (\n    <div>\n      {\/* \ubb38\uc790\uc5f4 prop: \ub530\uc634\ud45c \uc0ac\uc6a9 *\/}\n      <Greeting name="\uae40\ucca0\uc218" \/>\n\n      {\/* \uc22b\uc790 prop: \uc911\uad04\ud638 \uc0ac\uc6a9 *\/}\n      <Age value={25} \/>\n\n      {\/* \ubd88\ub9ac\uc5b8 prop *\/}\n      <User isAdmin={true} \/>\n      <User isAdmin={false} \/>\n      <User isAdmin \/>  {\/* true\ub294 \uc0dd\ub7b5 \uac00\ub2a5 *\/}\n\n      {\/* \ubc30\uc5f4 prop *\/}\n      <List items={[1, 2, 3, 4, 5]} \/>\n\n      {\/* \uac1d\uccb4 prop *\/}\n      <Profile user={{ name: "\ucca0\uc218", age: 25 }} \/>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
    <\/p>\n
      \n
    • \ubb38\uc790\uc5f4:<\/strong> \ub530\uc634\ud45c\ub85c \uac10\uc2f8\uae30 \u2192 name="\ucca0\uc218"<\/code><\/li>\n
    • \uadf8 \uc678 \ubaa8\ub450:<\/strong> \uc911\uad04\ud638\ub85c \uac10\uc2f8\uae30 \u2192 age={25}<\/code>, isActive={true}<\/code><\/li>\n<\/ul>\n
      \/\/ \u274c \uc798\ubabb\ub41c \uc608\n<Age value="25" \/>  \/\/ \uc22b\uc790\uac00 \uc544\ub2c8\ub77c \ubb38\uc790\uc5f4 "25"\uac00 \uc804\ub2ec\ub428!\n\n\/\/ \u2705 \uc62c\ubc14\ub978 \uc608\n<Age value={25} \/>  \/\/ \uc22b\uc790 25\uac00 \uc804\ub2ec\ub428\n<\/code><\/pre>\n
      <\/Notice><\/p>\n
      1.2.2. Props \ubc1b\uae30 (\uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8)<\/h3>\n
      \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8 \ud568\uc218\uc758 \uccab \ubc88\uc9f8 \ub9e4\uac1c\ubcc0\uc218<\/strong>\ub85c props \uac1d\uccb4\ub97c \ubc1b\ub294\ub2e4.<\/p>\n
      \/\/ Profile.jsx (\uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8)\nfunction Profile(props) {\n  \/\/ props\ub294 \uac1d\uccb4 \ud615\ud0dc\ub85c \uc804\ub2ec\ub428\n  console.log(props);\n  \/\/ { name: "\uae40\ucca0\uc218", age: 25, isMember: true }\n\n  return (\n    <div className="border border-gray-300 p-5 m-2 rounded">\n      <h2>\uc774\ub984: {props.name}<\/h2>\n      <p>\ub098\uc774: {props.age}\uc138<\/p>\n      <p>\ud68c\uc6d0\uc5ec\ubd80: {props.isMember ? "\uc815\ud68c\uc6d0" : "\uc900\ud68c\uc6d0"}<\/p>\n\n      {\/* props\ub97c \uc774\uc6a9\ud55c \uc870\uac74\ubd80 \ub80c\ub354\ub9c1 *\/}\n      {props.isMember && <span className="text-green-500">\u2713 \uc778\uc99d\ub428<\/span>}\n    <\/div>\n  );\n}\n\nexport default Profile;\n<\/code><\/pre>\n
      1.2.3. Props \uc0ac\uc6a9 \uc608\uc81c: \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ubc84\ud2bc<\/h3>\n
      Button.jsx<\/h4>\n
      import '.\/Button.css';\n\nfunction Button(props) {\n  \/\/ props\ub85c \ubc84\ud2bc\uc758 \ubaa8\uc591\uacfc \ub3d9\uc791\uc744 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\n  return (\n    <button\n      className={`btn ${props.size === 'large' ? 'btn-lg' : ''}`}\n      style={{ backgroundColor: props.color || '#007bff' }}\n      onClick={props.onClick}\n      disabled={props.disabled}\n    >\n      {props.text}\n    <\/button>\n  );\n}\n\nexport default Button;\n<\/code><\/pre>\n
      Button.css<\/h4>\n
      .btn {\n  color: white;\n  padding: 10px 20px;\n  border: none;\n  border-radius: 5px;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.btn-lg {\n  font-size: 18px;\n}\n<\/code><\/pre>\n
      App.jsx<\/h4>\n
      import Button from '.\/Button';\n\nfunction App() {\n  return (\n    <div>\n      <Button text="\uae30\ubcf8 \ubc84\ud2bc" \/>\n      <Button text="\ube68\uac04 \ubc84\ud2bc" color="red" \/>\n      <Button text="\ud070 \ubc84\ud2bc" size="large" color="#28a745" \/>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
      1.3. \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9 (Destructuring)<\/h2>\n
      1.3.1. \uc65c \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9\uc744 \uc0ac\uc6a9\ud560\uae4c?<\/h3>\n
      \ub9e4\ubc88 props.name<\/code>, props.age<\/code>\ucc98\ub7fc props.<\/code>\ub97c \ubc18\ubcf5\ud558\ub294 \uac83\uc740 \ubc88\uac70\ub86d\ub2e4. \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9\uc744 \uc0ac\uc6a9\ud558\uba74 \ucf54\ub4dc\uac00 \ud6e8\uc52c \uac04\uacb0<\/strong>\ud574\uc9c4\ub2e4.<\/p>\n
      \n
      Info<\/strong>: Before (props \uac1d\uccb4 \uc0ac\uc6a9)<\/strong>
      \n“`jsx
      \nfunction Profile(props) {
      \n  return (<\/p>\n
      \n
      {props.name}<\/h2>\n
      \ub098\uc774: {props.age}<\/p>\n<\/p><\/div>\n
        );
      \n}<\/p>\n<\/blockquote>\n
      > \n> **After (\uad6c\uc870 \ubd84\ud574 \ud560\ub2f9 \uc0ac\uc6a9)**\n> ```jsx\nfunction Profile({ name, age }) {\n  return (\n    <div>\n      <h2>{name}<\/h2>\n      <p>\ub098\uc774: {age}<\/p>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
      1.4. Children Props<\/h2>\n
      1.4.1. Children\uc774\ub780?<\/h3>\n
      Children<\/strong>\uc740 \ucef4\ud3ec\ub10c\ud2b8 \ud0dc\uadf8 \uc0ac\uc774\uc5d0 \ub123\uc740 \ub0b4\uc6a9<\/strong>\uc744 \uc804\ub2ec\ud558\ub294 \ud2b9\ubcc4\ud55c prop\uc774\ub2e4. \uc77c\ubc18 props\uc640 \ub2ec\ub9ac \uc18d\uc131\uc73c\ub85c \uc804\ub2ec\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n
      \n
      Info<\/strong>: \uc77c\ubc18 Prop vs Children Prop<\/strong><\/p>\n
      \n<\/code><\/pre>\n<\/blockquote>\n
      \/\/ \uc77c\ubc18 Props: \uc18d\uc131\uc73c\ub85c \uc804\ub2ec
      \n