{"id":941,"date":"2025-06-22T12:13:21","date_gmt":"2025-06-22T03:13:21","guid":{"rendered":"https:\/\/nangchang.nes.or.kr\/?p=941"},"modified":"2025-06-24T00:16:38","modified_gmt":"2025-06-23T15:16:38","slug":"%f0%9f%8e%ad-%ec%a1%b0%ea%b1%b4%eb%b6%80-%eb%a0%8c%eb%8d%94%eb%a7%81-%eb%a6%ac%ec%95%a1%ed%8a%b8%ec%97%90%ec%84%9c-%eb%b3%b4%ec%97%ac%ec%a4%84%ec%a7%80-%eb%a7%90%ec%a7%80-%ea%b2%b0%ec%a0%95","status":"publish","type":"post","link":"https:\/\/nangchang.nes.or.kr\/?p=941","title":{"rendered":"[React] \ud83c\udfad \uc870\uac74\ubd80 \ub80c\ub354\ub9c1 \u2013 \ub9ac\uc561\ud2b8\uc5d0\uc11c \ubcf4\uc5ec\uc904\uc9c0 \ub9d0\uc9c0 \uacb0\uc815\ud558\uae30"},"content":{"rendered":"\n

\ub9ac\uc561\ud2b8\ub97c \uc4f0\ub2e4 \ubcf4\uba74, \uc0c1\ud669\uc5d0 \ub530\ub77c \ud654\uba74\uc5d0 \ubcf4\uc774\uac8c \ud558\uac70\ub098 \uc228\uaca8\uc57c \ud560 \uc694\uc18c<\/strong>\uac00 \uc790\uc8fc \ub4f1\uc7a5\ud569\ub2c8\ub2e4.
\uc608\ub97c \ub4e4\uc5b4, \ub85c\uadf8\uc778\uc744 \ud55c \uc0ac\ub78c\uc5d0\uac8c\ub9cc \u201c\ub85c\uadf8\uc544\uc6c3\u201d \ubc84\ud2bc\uc744 \ubcf4\uc5ec\uc900\ub2e4\uac70\ub098, \uacbd\uace0 \uba54\uc2dc\uc9c0\ub97c \uc870\uac74\uc5d0 \ub530\ub77c \ud45c\uc2dc\ud558\ub294 \uacbd\uc6b0\uc8e0.<\/p>\n\n\n\n

\uc774\ub7f4 \ub54c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc870\uac74\ubd80 \ub80c\ub354\ub9c1<\/strong>\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

\n\n\n\n

1. \u2705 \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ubc29\ubc95 \u2013 if\ubb38<\/h3>\n\n\n\n

JSX \ubc16\uc5d0\uc11c \uc870\uac74\uc744 \uac80\uc0ac\ud55c \ub4a4, \uc6d0\ud558\ub294 UI\ub97c \ub9ac\ud134\ud560 \uc218 \uc788\uc5b4\uc694.<\/p>\n\n\n\n

function WelcomeMessage({ isLoggedIn }) {\n  if (isLoggedIn) {\n    return <p>\ud658\uc601\ud569\ub2c8\ub2e4!<\/p>;\n  } else {\n    return <p>\ub85c\uadf8\uc778 \ud574\uc8fc\uc138\uc694.<\/p>;\n  }\n}\n<\/code><\/pre>\n\n\n\n
\ub2e8\uc810\uc740 \uac04\ub2e8\ud55c \uc870\uac74\uc774\ub77c\ub3c4 \ucf54\ub4dc\uac00 \uae38\uc5b4\uc9c4\ub2e4<\/strong>\ub294 \uc810\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
2. \ud83d\udca1 JSX \uc548\uc5d0\uc11c\ub294 \uc0bc\ud56d \uc5f0\uc0b0\uc790 \uc0ac\uc6a9<\/h3>\n\n\n\n
JSX \uc548\uc5d0\uc11c\ub294 {\uc870\uac74 ? A : B}<\/code> \ud615\ud0dc\ub85c \uac04\uacb0\ud558\uac8c \uc4f8 \uc218 \uc788\uc5b4\uc694.<\/p>\n\n\n\n
function WelcomeMessage({ isLoggedIn }) {\n  return (\n    <p>{isLoggedIn ? '\ud658\uc601\ud569\ub2c8\ub2e4!' : '\ub85c\uadf8\uc778 \ud574\uc8fc\uc138\uc694.'}<\/p>\n  );\n}\n<\/code><\/pre>\n\n\n\n
\ud83d\udc49 \uc0bc\ud56d \uc5f0\uc0b0\uc790\ub294 **\uc870\uac74\uc5d0 \ub530\ub77c \ub450 \uac00\uc9c0 \uacbd\uc6b0\ub97c \ub098\ub20c \ub54c** \uc4f0\uba74 \uc88b\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
3. \ud83d\ude46\u200d\u2640\ufe0f \ud2b9\uc815 \uc870\uac74\uc77c \ub54c\ub9cc \ud45c\uc2dc \u2013 && \uc5f0\uc0b0\uc790<\/h3>\n\n\n\n
\uc870\uac74\uc774 \ucc38\uc77c \ub54c\ub9cc \uc5b4\ub5a4 \uc694\uc18c\ub97c \ubcf4\uc5ec\uc8fc\uace0, \uac70\uc9d3\uc774\uba74 \uc544\ubb34\uac83\ub3c4 \uc548 \ubcf4\uc774\uac8c \ud558\uace0 \uc2f6\uc744 \ub550 &&<\/code> \uc5f0\uc0b0\uc790<\/strong>\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
function Alert({ show }) {\n  return (\n    <div>\n      {show && <p style={{ color: 'red' }}>\uacbd\uace0: \uc798\ubabb\ub41c \uc811\uadfc\uc785\ub2c8\ub2e4.<\/p>}\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n
\u2705 show<\/code>\uac00 false\uc77c \uacbd\uc6b0\uc5d0\ub294 \uc544\ubb34\uac83\ub3c4 \ub80c\ub354\ub9c1\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\ud83d\udccc \uc815\ub9ac<\/h3>\n\n\n\n
    \n
  • if<\/code>\ubb38<\/strong>\uc740 JSX \ubc14\uae65\uc5d0\uc11c \uc870\uac74 \ubd84\uae30\ub97c \ud560 \ub54c \uc0ac\uc6a9<\/li>\n\n\n\n
  • \uc0bc\ud56d \uc5f0\uc0b0\uc790 ?:<\/code><\/strong>\ub294 \uac04\ub2e8\ud55c \ub450 \uac08\ub798 \ubd84\uae30\ub97c JSX \uc548\uc5d0\uc11c \ucc98\ub9ac\ud560 \ub54c \uc720\uc6a9<\/li>\n\n\n\n
  • &&<\/code> \uc5f0\uc0b0\uc790<\/strong>\ub294 \ud2b9\uc815 \uc870\uac74\uc774 \ucc38\uc77c \ub54c\ub9cc \uc694\uc18c\ub97c \ubcf4\uc5ec\uc8fc\uace0 \uc2f6\uc744 \ub54c \uc0ac\uc6a9<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n
    \ud83d\udca1 \ucd94\uac00 \ud301<\/h3>\n\n\n\n
      \n
    • \uc870\uac74\uc774 \ubcf5\uc7a1\ud574\uc9c0\uba74 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub098\ub204\ub294 \uac83\uc774 \ub354 \uae54\ub054\ud574\uc694<\/li>\n\n\n\n
    • null<\/code>\uc744 \ubc18\ud658\ud558\uba74 \uc544\ubb34\uac83\ub3c4 \ud45c\uc2dc\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4 (\ub80c\ub354\ub9c1 \uc0dd\ub7b5)<\/li>\n<\/ul>\n\n\n\n
      \n\n\n\n
      \ud83d\uddbc\ufe0f \uc870\uac74\ubd80 \ub80c\ub354\ub9c1 \ud750\ub984\ub3c4<\/h3>\n\n\n\n
      \ub2e4\uc74c \uadf8\ub9bc\uc740 \uc870\uac74\uc5d0 \ub530\ub77c \ud654\uba74\uc5d0 \ubcf4\uc774\ub294 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b4\ub5bb\uac8c \ub2ec\ub77c\uc9c0\ub294\uc9c0\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4:<\/p>\n\n\n\n
      \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
      \ub9ac\uc561\ud2b8\ub97c \uc4f0\ub2e4 \ubcf4\uba74, \uc0c1\ud669\uc5d0 \ub530\ub77c \ud654\uba74\uc5d0 \ubcf4\uc774\uac8c \ud558\uac70\ub098 \uc228\uaca8\uc57c \ud560 \uc694\uc18c\uac00 \uc790\uc8fc \ub4f1\uc7a5\ud569\ub2c8\ub2e4.\uc608\ub97c \ub4e4\uc5b4, \ub85c\uadf8\uc778\uc744 \ud55c \uc0ac\ub78c\uc5d0\uac8c\ub9cc \u201c\ub85c\uadf8\uc544\uc6c3\u201d \ubc84\ud2bc\uc744 \ubcf4\uc5ec\uc900\ub2e4\uac70\ub098, \uacbd\uace0 \uba54\uc2dc\uc9c0\ub97c \uc870\uac74\uc5d0 \ub530\ub77c \ud45c\uc2dc\ud558\ub294 \uacbd\uc6b0\uc8e0. \uc774\ub7f4 \ub54c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc870\uac74\ubd80 \ub80c\ub354\ub9c1\uc785\ub2c8\ub2e4. 1. \u2705 \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ubc29\ubc95 \u2013 if\ubb38 JSX \ubc16\uc5d0\uc11c \uc870\uac74\uc744 \uac80\uc0ac\ud55c \ub4a4, \uc6d0\ud558\ub294 UI\ub97c \ub9ac\ud134\ud560 \uc218 \uc788\uc5b4\uc694. \ub2e8\uc810\uc740 \uac04\ub2e8\ud55c \uc870\uac74\uc774\ub77c\ub3c4 \ucf54\ub4dc\uac00 \uae38\uc5b4\uc9c4\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[80],"class_list":["post-941","post","type-post","status-publish","format-standard","hentry","category-pogramming","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=941"}],"version-history":[{"count":2,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/941\/revisions"}],"predecessor-version":[{"id":957,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/941\/revisions\/957"}],"wp:attachment":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}