{"id":770,"date":"2026-05-18T23:00:56","date_gmt":"2026-05-18T15:00:56","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-conditional-rendering-8\/"},"modified":"2026-05-19T20:26:15","modified_gmt":"2026-05-19T12:26:15","slug":"react-conditional-rendering-8","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-conditional-rendering-8\/","title":{"rendered":"React \uc870\uac74\ubd80 \ub80c\ub354\ub9c1 (Ch.8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 745 -->\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 \uae30\ucd08 8\ud3b8<\/span>\n  <h1>React \uc870\uac74\ubd80 \ub80c\ub354\ub9c1 \u2014 \uc0bc\ud56d\u00b7&amp;&amp;\u00b7null<\/h1>\n  <p>JSX \uc548\uc5d0\ub294 if \ubb38\uc774 \ubabb \ub4e4\uc5b4\uac04\ub2e4. 4\uac00\uc9c0 \ud328\ud134\uc73c\ub85c \uac19\uc740 \ud6a8\uacfc + 0 \ud45c\uc2dc \ud568\uc815.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-28.jpg\" alt=\"\ub85c\uadf8\uc778 \ubc84\ud2bc\uacfc \ud658\uc601 \uba54\uc2dc\uc9c0 \ub450 UI \uc0c1\ud0dc \uc0ac\uc774\uc5d0 \uac8c\uc774\ud2b8 \uc2a4\uc704\uce58\uac00 \uc788\ub294 \uc77c\ub7ec\uc2a4\ud2b8 \u2014 \uc870\uac74\ubd80 \ub80c\ub354\ub9c1 \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>4\ud3b8\uc5d0\uc11c \uc9da\uc5c8\ub4ef JSX \uc548 \uc911\uad04\ud638\ub294 <strong>\ud45c\ud604\uc2dd<\/strong> \ub9cc \ud5c8\uc6a9. <code>if<\/code>\u00b7<code>for<\/code> \uac19\uc740 \ubb38\uc740 \ubabb \uc4f4\ub2e4. \uadf8\ub7f0\ub370 \ud654\uba74\uc740 \ud56d\uc0c1 &#8220;\ub85c\uadf8\uc778\ud588\uc73c\uba74 X, \uc544\ub2c8\uba74 Y&#8221; \uac19\uc740 \uc870\uac74 \ubd84\uae30\uac00 \ud544\uc218. React \uac00 \uc774\uac78 \uc5b4\ub5bb\uac8c \ud480\uae4c \u2014 4\uac00\uc9c0 \ud328\ud134\uc774 \ub2f5.<\/p>\n\n<h2>1. 4 \ud328\ud134 \ube44\uad50 \u2014 \uc5b8\uc81c \ubb34\uc5c7\uc744<\/h2>\n\n<p>\ud328\ud134\ub9c8\ub2e4 \uc801\ud569\ud55c \uacbd\uc6b0\uac00 \ub2e4\ub974\ub2e4. \ud55c \uc904 \uc815\ub9ac.<\/p>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>\ud328\ud134<\/th><th>\ud615\ud0dc<\/th><th>\ucd5c\uc801 \ucf00\uc774\uc2a4<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>\uc0bc\ud56d \uc5f0\uc0b0\uc790<\/td><td data-label=\"\ud615\ud0dc\">cond ? A : B<\/td><td data-label=\"\ucd5c\uc801 \ucf00\uc774\uc2a4\">A \ub610\ub294 B \ub458 \uc911 \ud558\ub098\ub294 \ubb34\uc870\uac74 \uadf8\ub9b4 \ub54c<\/td><\/tr>\n<tr><td>&amp;&amp; \ub2e8\ucd95 \ud3c9\uac00<\/td><td data-label=\"\ud615\ud0dc\">cond &amp;&amp; A<\/td><td data-label=\"\ucd5c\uc801 \ucf00\uc774\uc2a4\">\ucc38\uc77c \ub54c\ub9cc A, \uac70\uc9d3\uc774\uba74 \uc544\ubb34\uac83\ub3c4 \uc548 \uadf8\ub9bc<\/td><\/tr>\n<tr><td>null \ubc18\ud658<\/td><td data-label=\"\ud615\ud0dc\">if (!cond) return null;<\/td><td data-label=\"\ucd5c\uc801 \ucf00\uc774\uc2a4\">\ucef4\ud3ec\ub10c\ud2b8 \uc804\uccb4\ub97c \uc870\uac74\ubd80\ub85c \ub80c\ub354 \uc548 \ud568<\/td><\/tr>\n<tr><td>early return<\/td><td data-label=\"\ud615\ud0dc\">\ud568\uc218 \uc2dc\uc791\ubd80 if \ubd84\uae30<\/td><td data-label=\"\ucd5c\uc801 \ucf00\uc774\uc2a4\">\ub85c\ub529\u00b7\uc5d0\ub7ec \uc0c1\ud0dc \ub4f1 \ub2e4\uc911 \ubd84\uae30<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<h2>2. \uc0bc\ud56d \u2014 \ub450 \uacb0\uacfc \uc911 \ud558\ub098<\/h2>\n\n<div class=\"code-block\">function Greeting({ isLoggedIn, user }) {\n  return (\n    &lt;div&gt;\n      {isLoggedIn\n        ? &lt;p&gt;\uc548\ub155, {user.name}\ub2d8!&lt;\/p&gt;\n        : &lt;a href=&#8221;\/login&#8221;&gt;\ub85c\uadf8\uc778&lt;\/a&gt;\n      }\n    &lt;\/div&gt;\n  );\n}<\/div>\n\n<p>\uc0bc\ud56d\uc774 \uc911\ucca9 2\ubc88 \ub118\uc5b4\uac00\uba74 \uac00\ub3c5\uc131 \ubb34\ub108\uc9c4\ub2e4. <strong>\uc0bc\ud56d\uc740 1\ub2e8\uacc4\uae4c\uc9c0<\/strong>\uac00 \uc2e4\uc804 \uaddc\uce59. \ub354 \ubcf5\uc7a1\ud558\uba74 early return \ub610\ub294 \ubcc4\ub3c4 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ubd84\ub9ac.<\/p>\n\n<h2>3. &amp;&amp; \u2014 &#8220;\uc788\uc744 \ub54c\ub9cc&#8221; \ud328\ud134<\/h2>\n\n<div class=\"code-block\">function Notifications({ unreadCount }) {\n  return (\n    &lt;header&gt;\n      &lt;h1&gt;\ubc1b\uc740\ud3b8\uc9c0\ud568&lt;\/h1&gt;\n      {unreadCount &gt; 0 &amp;&amp; (\n        &lt;span className=&#8221;badge&#8221;&gt;\uc0c8 \uba54\uc2dc\uc9c0 {unreadCount}\uac1c&lt;\/span&gt;\n      )}\n    &lt;\/header&gt;\n  );\n}<\/div>\n\n<p>JavaScript \uc758 \ub2e8\ucd95 \ud3c9\uac00 \u2014 \uc67c\ucabd\uc774 truthy \uba74 \uc624\ub978\ucabd \ubc18\ud658, falsy \uba74 \uc67c\ucabd \uadf8\ub300\ub85c \ubc18\ud658. <code>true && JSX<\/code> \uba74 JSX \uac00, <code>false && JSX<\/code> \uba74 false \uac00 \ubc18\ud658\ub418\ub294\ub370 React \ub294 false\u00b7null\u00b7undefined \ub97c \ubaa8\ub450 &#8220;\uadf8\ub9ac\uc9c0 \uc54a\uc74c&#8221; \uc73c\ub85c \ud574\uc11d.<\/p>\n\n<h3>0 \ud45c\uc2dc \ud568\uc815 \u2014 \uac00\uc7a5 \ud754\ud55c \uc0ac\uace0<\/h3>\n\n<p>\uc774\uac8c React \uac1c\ubc1c\uc790\uac00 \uac00\uc7a5 \ub9ce\uc774 \ub2f9\ud558\ub294 \ubc84\uadf8 \uc911 \ud558\ub098.<\/p>\n\n<div class=\"code-block\">function Cart({ items }) {\n  return (\n    &lt;div&gt;\n      {items.length &amp;&amp; &lt;p&gt;\uc7a5\ubc14\uad6c\ub2c8 {items.length}\uac1c&lt;\/p&gt;}\n      {\/* items.length === 0 \uc77c \ub54c \ud654\uba74\uc5d0 &#8220;0&#8221; \uc774 \ubcf4\uc784 \u274c *\/}\n    &lt;\/div&gt;\n  );\n}<\/div>\n\n<p>\uc774\uc720 \u2014 <code>items.length<\/code> \uac00 0 \uc774\uba74 <code>0 && JSX<\/code> = <code>0<\/code> \ubc18\ud658. 0 \uc740 falsy \uc9c0\ub9cc <strong>React \uac00 \uadf8\ub9ac\ub294 falsy \uac12 \uc911 \uc720\uc77c\ud558\uac8c 0 \ub9cc \ud654\uba74\uc5d0 \ud45c\uc2dc<\/strong> (\uc774\uac83\ub3c4 React 18 \uc758 \ub3d9\uc791). \ud574\uacb0\ucc45 \u2014 <strong>\uba85\uc2dc\uc801 boolean \ubcc0\ud658<\/strong>:<\/p>\n\n<div class=\"code-block\">{items.length &gt; 0 &amp;&amp; &lt;p&gt;&#8230;&lt;\/p&gt;}  \/\/ \u2705 true\/false \ub9cc\n{!!items.length &amp;&amp; &lt;p&gt;&#8230;&lt;\/p&gt;}     \/\/ \u2705 !!\ub85c boolean \uac15\uc81c\n{items.length ? &lt;p&gt;&#8230;&lt;\/p&gt; : null}   \/\/ \u2705 \uc0bc\ud56d \uc0ac\uc6a9<\/div>\n\n<div class=\"warnbox\">\n<strong>\uc2e4\uc804 \uaddc\uce59<\/strong> \u2014 <code>&&<\/code> \uc67c\ucabd\uc5d0 <strong>boolean \ud45c\ud604\uc2dd<\/strong>\ub9cc \ub450\uae30. <code>length<\/code>\u00b7<code>count<\/code> \uac19\uc740 \uc22b\uc790\ub098 <code>str.length<\/code> \uac19\uc740 \uae38\uc774\uac00 \ub4e4\uc5b4\uac00\uba74 \ubb34\uc870\uac74 \ube44\uad50 \uc5f0\uc0b0\uc790 (<code>&gt; 0<\/code>\u00b7<code>!== 0<\/code>) \ub610\ub294 <code>!!<\/code> \ub85c boolean \ud654.\n<\/div>\n\n<h2>4. null \ubc18\ud658 + early return \u2014 \ucef4\ud3ec\ub10c\ud2b8 \uc804\uccb4 \ubd84\uae30<\/h2>\n\n<p>\uc870\uac74\uc774 \ucef4\ud3ec\ub10c\ud2b8 \uc804\uccb4 \ub80c\ub354 \uc5ec\ubd80\uc5d0 \uad00\ud55c \uac83\uc774\uba74 \uc77c\ucc0d return.<\/p>\n\n<div class=\"code-block\">function UserProfile({ user, loading, error }) {\n  if (loading) return &lt;Spinner \/&gt;;\n  if (error) return &lt;ErrorMessage error={error} \/&gt;;\n  if (!user) return null;  \/\/ \ub85c\uadf8\uc544\uc6c3 \uc0c1\ud0dc \u2014 \uc544\ubb34\uac83\ub3c4 \uc548 \uadf8\ub9bc\n\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;{user.name}&lt;\/h1&gt;\n      &lt;p&gt;{user.email}&lt;\/p&gt;\n      {\/* &#8230; \ubcf8\ubb38 &#8230; *\/}\n    &lt;\/div&gt;\n  );\n}<\/div>\n\n<p>\uc774 \ud328\ud134\uc774 \uc9c4\uc9dc \uac15\ub825 \u2014 \ubcf8\ubb38 JSX \uac00 \uae68\ub057\ud558\uac8c \uc720\uc9c0\ub41c\ub2e4. \uc911\ucca9 \uc0bc\ud56d\uc73c\ub85c \uac19\uc740 \uac78 \uc9dc\uba74 200\uc904 \uc9dc\ub9ac \uad34\ubb3c\uc774 \ub41c\ub2e4. <strong>&#8220;if \ubd84\uae30\ub294 \ud568\uc218 \uc2dc\uc791\ubd80, \ubcf8\ubb38 JSX \ub294 \ub2e8\uc77c \uacbd\ub85c&#8221;<\/strong> \uac00 \ud074\ub9b0 React \uc758 \ud575\uc2ec \uaddc\uce59.<\/p>\n\n<div class=\"databox\">\n<strong>\uc65c \uc77c\ucc0d return \uc778\uac00<\/strong> \u2014 11\ud3b8 useEffect \uc640 14\ud3b8 useReducer \uc758 hook \ub4e4\uc740 <strong>\ub9e4 \ub80c\ub354\ub9c8\ub2e4 \uac19\uc740 \uc21c\uc11c\ub85c \ud638\ucd9c<\/strong>\ub418\uc5b4\uc57c \ud55c\ub2e4. \ubcf8\ubb38 \uc911\uac04 if \uac00 hook \ud638\ucd9c\uc744 \uac74\ub108\ub6f0\uba74 \uc5d0\ub7ec. early return \uc740 hook \ub4e4 \ub2e4 \ud638\ucd9c\ud55c \ud6c4\uc5d0 \ud574\uc57c \uc548\uc804. 11\ud3b8\uc5d0\uc11c \ub2e4\uc2dc \uac15\uc870.\n<\/div>\n\n<p>\uc870\uac74\ubd80 \ub80c\ub354\ub9c1 \ub05d. 9\ud3b8\uc5d0\uc11c\ub294 &#8220;\uc5ec\ub7ec \ud56d\ubaa9\uc744 \ud55c \ubc88\uc5d0 \uadf8\ub9ac\uae30&#8221; \u2014 \ubc30\uc5f4\uc744 JSX \ub85c \ubcc0\ud658\ud558\ub294 <code>.map()<\/code> \ud328\ud134 + key prop \uc758 \uc9c4\uc9dc \uc5ed\ud560. \ub450 \ud3b8 \ud569\uce58\uba74 \ub3d9\uc801 UI \uc758 99% \uac00 \uac00\ub2a5.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00<\/h3>\n<p>React \uad50\uc7ac 9\ud3b8 \u2014 \ub9ac\uc2a4\ud2b8 \ub80c\ub354\ub9c1 + key prop. <code>.map()<\/code> \uc73c\ub85c JSX \ubc30\uc5f4 + key \uc758 \uc9c4\uc9dc \uc5ed\ud560 + index \ud568\uc815.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-usestate-6\/\">6\ud3b8 useState<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-events-7\/\">7\ud3b8 \uc774\ubca4\ud2b8<\/a> \u00b7\n<strong>8\ud3b8 \uc870\uac74\ubd80 \ub80c\ub354\ub9c1<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\uc870\uac74\ubd80 \ub80c\ub354\ub9c1 4 \ud328\ud134 \u2014 \uc0bc\ud56d\u00b7&#038;&#038; \u00b7null\u00b7early return + 0 \ud45c\uc2dc \ud568\uc815.<\/p>\n","protected":false},"author":1,"featured_media":745,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-770","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\/770","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=770"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/770\/revisions"}],"predecessor-version":[{"id":797,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/770\/revisions\/797"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/745"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}