{"id":877,"date":"2026-05-20T09:51:21","date_gmt":"2026-05-20T01:51:21","guid":{"rendered":"https:\/\/junai.ai\/blog\/nextjs-server-client-component-6\/"},"modified":"2026-05-20T09:51:21","modified_gmt":"2026-05-20T01:51:21","slug":"nextjs-server-client-component-6","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/nextjs-server-client-component-6\/","title":{"rendered":"Server vs Client Component \u2014 \ucc28\uc774\uc640 \uae30\uc900"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 823 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root {--color-primary:#4f46e5;--color-accent:#6366f1;--color-bg:#fafbfc;--color-bg-card:#fff;--color-text:#1a202c;--color-text-muted:#64748b;--hero-start:#1e1b4b;--hero-end:#4338ca;}\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:#a78bfa;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:#c7d2fe;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:#eef2ff;padding:2px 8px;border-radius:4px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;color:#4338ca;}\n.databox{background:#eef2ff;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,#4f46e5 0%,#6366f1 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:#c7d2fe;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\">Next.js \uad50\uc7ac \u00b7 6\ud3b8 \u00b7 \ucef4\ud3ec\ub10c\ud2b8 \ubaa8\ub378<\/span>\n  <h1>Server Component vs Client Component \u2014 \ucc28\uc774\uc640 \uae30\uc900<\/h1>\n  <p>App Router \uc758 \uac00\uc7a5 \uc911\uc694\ud55c \uac1c\ub150. \ub450 \ubaa8\ub378\uc744 \uc815\ud655\ud788 \uac08\ub77c\ubcf8\ub2e4.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-56.jpg\" alt=\"\uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8 \ub450 \uc601\uc5ed\uc73c\ub85c \ub098\ub25c \ucef4\ud3ec\ub10c\ud2b8 \ubaa8\ub378 \ucee8\uc149 \uc77c\ub7ec\uc2a4\ud2b8\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>App Router \ub97c \uc775\ud788\ub294 \ub370 \uc788\uc5b4 \uac00\uc7a5 \ud070 \uc0b0. \uc61b React \uac00 100% \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ub3cc\ub358 \uac83\uacfc \ub2ec\ub9ac, \uc774\uc81c \ucef4\ud3ec\ub10c\ud2b8\uac00 <strong>\uc11c\ubc84 \ub610\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8<\/strong> \uc911 \ud55c \uacf3\uc5d0\uc11c \ub3c8\ub2e4. \uac19\uc740 React \ubb38\ubc95\uc774\uc9c0\ub9cc \uc2e4\ud589 \uc704\uce58\uac00 \ub2e4\ub974\uace0, \uadf8\ub798\uc11c \ud560 \uc218 \uc788\ub294 \uc77c\ub3c4 \ub2e4\ub974\ub2e4.<\/p>\n\n<p>\uc774\ubc88 \ud3b8\uc5d0\uc11c \ub458\uc758 \uc815\ud655\ud55c \ucc28\uc774\ub97c \uac08\ub77c\ubcf8\ub2e4. <strong>\uae30\ubcf8\uc740 \uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8<\/strong>, \uc778\ud130\ub799\uc158\uc774 \ud544\uc694\ud560 \ub54c\ub9cc <code>'use client'<\/code>. \uc774 \ud55c \uc904\uc774 \uacb0\uad6d \uc774 \ucc55\ud130\uc758 \uacb0\ub860\uc774\uc9c0\ub9cc, \uadf8 \uacb0\ub860\uc5d0 \ub3c4\ub2ec\ud558\ub294 \ucd94\ub860\uc744 \uc815\ub9ac\ud574 \ub46c\uc57c \ud5f7\uac08\ub9ac\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n<h2>1. \uae30\ubcf8 \ubaa8\ub378 \u2014 App Router \ub294 \uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8 \uc6b0\uc120<\/h2>\n\n<p>Pages Router \uc2dc\uc808 React \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc804\ubd80 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ub3cc\uc558\ub2e4. \uc11c\ubc84\uc5d0\uc120 \uccab HTML \ub9cc \uadf8\ub9ac\uace0 (SSR), \uadf8 \ub4a4 \ubaa8\ub4e0 \uc778\ud130\ub799\uc158\u00b7\uc0c1\ud0dc\u00b7effect \ub294 \ube0c\ub77c\uc6b0\uc800 React \uac00 \ub2f4\ub2f9.<\/p>\n\n<p>App Router \ub294 \uc774\uac78 \ub4a4\uc9d1\uc5c8\ub2e4. <strong>\uae30\ubcf8\uc774 \uc11c\ubc84\uc5d0\uc11c \uc2e4\ud589<\/strong>, \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c \uac00\ub294 \uac74 \uba85\uc2dc\uc801\uc73c\ub85c \uc2e0\uccad\ud574\uc57c \ud55c\ub2e4. \uadf8 \uc2e0\uccad\uc11c\uac00 \ud30c\uc77c \uccab \uc904\uc758 <code>'use client'<\/code>.<\/p>\n\n<div class=\"code-block\">\/\/ app\/dashboard\/page.tsx  (\uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8, \uae30\ubcf8)\nimport { db } from &#8216;@\/lib\/db&#8217;;\n\nexport default async function DashboardPage() {\n  const stats = await db.query(&#8216;SELECT count(*) FROM users&#8217;);\n  return &lt;h1&gt;\uac00\uc785\uc790: {stats.count}&lt;\/h1&gt;;\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n\/\/ app\/counter.tsx  (\ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8)\n&#8216;use client&#8217;;\nimport { useState } from &#8216;react&#8217;;\n\nexport default function Counter() {\n  const [n, setN] = useState(0);\n  return &lt;button onClick={() =&gt; setN(n + 1)}&gt;{n}&lt;\/button&gt;;\n}<\/div>\n\n<p>\uc704 \ub450 \ud30c\uc77c\uc758 \ucc28\uc774\ub294 \ub2e8 \ud55c \uc904 \u2014 <code>'use client'<\/code> \uc758 \uc720\ubb34. \uadf8\ub7f0\ub370 \ub3d9\uc791\uc774 \uc644\uc804\ud788 \ub2ec\ub77c\uc9c4\ub2e4.<\/p>\n\n<h2>2. \ubb34\uc5c7\uc774 \ub2e4\ub978\uac00 \u2014 \uc77c\uacf1 \uac00\uc9c0 \ube44\uad50<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>\ud56d\ubaa9<\/th><th>\uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8<\/th><th>\ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>\uc2e4\ud589 \uc704\uce58<\/td><td data-label=\"Server\">\uc11c\ubc84 (Node \ub610\ub294 \uc5e3\uc9c0)<\/td><td data-label=\"Client\">\uc11c\ubc84\uc5d0\uc11c \ubbf8\ub9ac + \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c hydrate<\/td><\/tr>\n<tr><td>JS \ubc88\ub4e4 \ud3ec\ud568<\/td><td data-label=\"Server\">X (HTML \ub9cc \uc804\uc1a1)<\/td><td data-label=\"Client\">O (\ube0c\ub77c\uc6b0\uc800\ub85c \ubcf4\ub0b4\uc9d0)<\/td><\/tr>\n<tr><td>DB\u00b7\ud30c\uc77c\u00b7\uc11c\ubc84 \uc2dc\ud06c\ub9bf<\/td><td data-label=\"Server\">\uc9c1\uc811 \uc811\uadfc \uac00\ub2a5<\/td><td data-label=\"Client\">\ubd88\uac00 (\ubcf4\uc548 \uc0ac\uace0)<\/td><\/tr>\n<tr><td>\uc0c1\ud0dc \/ useState<\/td><td data-label=\"Server\">\ubd88\uac00<\/td><td data-label=\"Client\">\uac00\ub2a5<\/td><\/tr>\n<tr><td>useEffect \/ \uc774\ubca4\ud2b8<\/td><td data-label=\"Server\">\ubd88\uac00<\/td><td data-label=\"Client\">\uac00\ub2a5<\/td><\/tr>\n<tr><td>\ube0c\ub77c\uc6b0\uc800 API<\/td><td data-label=\"Server\">\ubd88\uac00<\/td><td data-label=\"Client\">\uac00\ub2a5 (window\u00b7document)<\/td><\/tr>\n<tr><td>async\/await<\/td><td data-label=\"Server\">\ucef4\ud3ec\ub10c\ud2b8 \ud568\uc218 \uc790\uccb4\uac00 async<\/td><td data-label=\"Client\">useEffect \uc548\uc5d0\uc11c\ub9cc<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<p>\uc694\uc57d \u2014 <strong>\uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ub370\uc774\ud130\ub97c \uac00\uc838\uc640 HTML \uc744 \uadf8\ub9ac\ub294 \ub3c4\uad6c<\/strong>, <strong>\ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc0ac\uc6a9\uc790 \uc0c1\ud638\uc791\uc6a9\uc744 \ucc98\ub9ac\ud558\ub294 \ub3c4\uad6c<\/strong>. \uc5ed\ud560\uc774 \uba85\ud655\ud788 \uac08\ub9b0\ub2e4.<\/p>\n\n<h2>3. &#8216;use client&#8217; \uc758 \uc815\ud655\ud55c \uc758\ubbf8<\/h2>\n\n<p>\ud754\ud55c \uc624\ud574 \u2014 &#8220;<code>'use client'<\/code> \uac00 \uc788\uc73c\uba74 \uadf8 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc11c\ubc84\uc5d0\uc11c \uc548 \ub3c8\ub2e4&#8221;. <strong>\ud2c0\ub838\ub2e4<\/strong>.<\/p>\n\n<p>\uc815\ud655\ud55c \uc758\ubbf8\ub294 \u2014 &#8220;\uc5ec\uae30\uc11c\ubd80\ud130 \uc544\ub798\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac\ub2e4. \ube0c\ub77c\uc6b0\uc800\ub85c JS \ub97c \ubcf4\ub0b4\ub77c&#8221;. \uadf8\ub798\ub3c4 \uc11c\ubc84\uc5d0\uc120 \ud55c \ubc88 \uc2e4\ud589\ub418\uc5b4 \ucd08\uae30 HTML \uc744 \uc0dd\uc131\ud55c\ub2e4. \uadf8 \ub4a4 \ube0c\ub77c\uc6b0\uc800\uac00 \ubc1b\uc740 JS \ub85c \ub2e4\uc2dc \ud55c \ubc88 \uc2e4\ud589\ud574 hydrate.<\/p>\n\n<div class=\"databox\">\n<strong>\ud575\uc2ec \u2014 \uacbd\uacc4 \ucee8\uc149<\/strong> \u2014 <code>'use client'<\/code> \ub294 \ud30c\uc77c\uc5d0 1\ubc88 \uc801\uc73c\uba74, \uadf8 \ud30c\uc77c\uacfc \uadf8 \uc548\uc5d0\uc11c import \ud558\ub294 \ubaa8\ub4e0 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud074\ub77c\uc774\uc5b8\ud2b8 \ud2b8\ub9ac\uc5d0 \uc18d\ud55c\ub2e4. \uc790\uc2dd\uc5d4 \ub610 \uc801\uc744 \ud544\uc694 \uc5c6\ub2e4. \ub9c8\uce58 &#8220;\uc5ec\uae30\ubd80\ud130 \ud074\ub77c\uc774\uc5b8\ud2b8 \uad6c\uc5ed&#8221; \ud45c\uc9c0\ud310 \uac19\uc740 \uac83.\n<\/div>\n\n<h2>4. \uc11e\uc5b4 \uc4f0\ub294 \ud328\ud134 \u2014 \uc11c\ubc84\uac00 \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c children \uc73c\ub85c \ubc1b\uae30<\/h2>\n\n<p>\uc2e4\uc804\uc5d0\uc120 \ub458\uc744 \uc790\uc720\ub86d\uac8c \uc11e\ub294\ub2e4. \ub2e8 \uaddc\uce59 \ud558\ub098 \u2014 <strong>\uc11c\ubc84\uac00 \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c import \ud560 \uc218 \uc788\uc9c0\ub9cc, \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8\ub97c import \ud560 \uc218\ub294 \uc5c6\ub2e4<\/strong>.<\/p>\n\n<p>\uadf8\ub798\uc11c \uc790\uc8fc \uc4f0\ub294 \ud328\ud134\uc740 <strong>children \uc73c\ub85c \uc8fc\uc785<\/strong>.<\/p>\n\n<div class=\"code-block\">\/\/ app\/page.tsx  (\uc11c\ubc84)\nimport ClientCarousel from &#8216;.\/carousel&#8217;;\nimport { fetchProducts } from &#8216;@\/lib\/db&#8217;;\n\nexport default async function HomePage() {\n  const products = await fetchProducts();\n  return (\n    &lt;ClientCarousel&gt;\n      {products.map(p =&gt; (\n        &lt;ProductCard key={p.id} product={p} \/&gt;\n      ))}\n    &lt;\/ClientCarousel&gt;\n  );\n}\n\n\/\/ app\/carousel.tsx  (\ud074\ub77c\uc774\uc5b8\ud2b8)\n&#8216;use client&#8217;;\nimport { useState } from &#8216;react&#8217;;\nexport default function ClientCarousel({ children }) {\n  const [idx, setIdx] = useState(0);\n  \/\/ \uc2ac\ub77c\uc774\ub4dc \uc778\ud130\ub799\uc158\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8, \uc2ac\ub77c\uc774\ub4dc \ub0b4\uc6a9\uc740 \uc11c\ubc84\uc5d0\uc11c \ubbf8\ub9ac \uadf8\ub824\uc9c4 ProductCard\n  return \u2026;\n}<\/div>\n\n<p>\uc774 \ud328\ud134\uc774\uba74 \uce74\ub85c\uc140 \uc778\ud130\ub799\uc158\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c, \uc0c1\ud488 \uce74\ub4dc \uc790\uccb4\uc758 \ub370\uc774\ud130 fetch \ub294 \uc11c\ubc84\uc5d0\uc11c. JS \ubc88\ub4e4\ub3c4 \uc2ac\ub77c\uc774\ub354 \ubd80\ubd84\ub9cc \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c \uac00\ub2c8\uae4c \uac00\ubccd\ub2e4.<\/p>\n\n<h2>5. \uc5b4\ub290 \ucabd\uc744 \uace8\ub77c\uc57c \ud558\ub098 \u2014 \uacb0\uc815 \ud2b8\ub9ac<\/h2>\n\n<p>\uc0c8 \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4 \ub54c \ub9e4\ubc88 \uace0\ubbfc\ud558\uc9c0 \ub9d0\uace0 \uc774 \uc21c\uc11c\ub85c \uacb0\uc815.<\/p>\n\n<ol>\n<li><strong>\uc774 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 useState\u00b7useEffect\u00b7onClick \uac19\uc740 \uc778\ud130\ub799\uc158 \uc788\ub098?<\/strong> \u2192 Yes \uba74 <code>'use client'<\/code>.<\/li>\n<li><strong>\ube0c\ub77c\uc6b0\uc800 \uc804\uc6a9 API(window\u00b7localStorage\u00b7document) \uac00 \ud544\uc694\ud55c\uac00?<\/strong> \u2192 Yes \uba74 <code>'use client'<\/code>.<\/li>\n<li><strong>\uc678\ubd80 \ud074\ub77c\uc774\uc5b8\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac(framer-motion\u00b7zustand) \ub97c \uc4f0\ub098?<\/strong> \u2192 \ubcf4\ud1b5 Yes \uba74 <code>'use client'<\/code>.<\/li>\n<li>\uadf8 \uc678 \ubaa8\ub450 \u2014 <strong>\uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8 (\uae30\ubcf8)<\/strong>. DB\u00b7\uc678\ubd80 API \ud638\ucd9c, HTML \ub9cc \uadf8\ub9ac\ub294 \uc815\uc801 UI \ub4f1.<\/li>\n<\/ol>\n\n<p>\uc758\uc2ec\uc2a4\ub7ec\uc6b0\uba74 \uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc2dc\uc791\ud55c\ub2e4. \uc778\ud130\ub799\uc158 \ud544\uc694\ud574\uc9c0\uba74 \uadf8 \uc2dc\uc810\uc5d0 <code>'use client'<\/code> \ud55c \uc904 \ucd94\uac00. <strong>\uc123\ubd88\ub9ac \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c \uac00\uc9c0 \ub9d0 \uac83<\/strong> \u2014 JS \ubc88\ub4e4\uc774 \ucee4\uc9c0\uace0 LCP \uac00 \ub098\ube60\uc9c4\ub2e4.<\/p>\n\n<div class=\"warnbox\">\n<strong>\uc2e4\uc218 1\uc704<\/strong> \u2014 \uc61b React \uc2b5\uad00\uc73c\ub85c \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8 \ub9e8 \uc704\uc5d0 <code>'use client'<\/code> \ubc15\ub294 \uac83. App Router \uc5d0\uc120 \uc774\uac8c \uc548\ud2f0\ud328\ud134. \uac00\ub2a5\ud55c \uae4a\uc740 leaf \ub9cc \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c \ub450\uace0, \uc704\ucabd \ud2b8\ub9ac\ub294 \uc11c\ubc84\ub85c \uc720\uc9c0. \uac80\uc0c9\ud558\uba74 &#8220;<code>'use client'<\/code> \ub97c leaf \uae4c\uc9c0 \ubbf8\ub8e8\ub77c&#8221; \ub294 \uc870\uc5b8\uc774 \uc815\ub2f5.\n<\/div>\n\n<h3>\uc694\uc57d \u2014 6\ud3b8 \uc88c\ud45c<\/h3>\n\n<p>\uc5ec\uae30\uae4c\uc9c0 \uc815\ub9ac. App Router \uc758 \uae30\ubcf8\uc740 <strong>\uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8<\/strong>, \uc778\ud130\ub799\uc158 \ud544\uc694 \uc2dc <code>'use client'<\/code>. \ub458\uc758 \ucc28\uc774\ub294 \uc2e4\ud589 \uc704\uce58\u00b7JS \ubc88\ub4e4\u00b7\ud560 \uc218 \uc788\ub294 \uc77c. <code>'use client'<\/code> \ub294 &#8220;\uc5ec\uae30\uc11c\ubd80\ud130 \ud074\ub77c\uc774\uc5b8\ud2b8 \uad6c\uc5ed&#8221; \ud45c\uc9c0\ud310\uc774\uc9c0 &#8220;\uc11c\ubc84\uc5d0\uc11c \uc548 \ub3cc\ub9b0\ub2e4&#8221; \uac00 \uc544\ub2c8\ub2e4. \uc11e\uc744 \ub550 \uc11c\ubc84\u2192\ud074\ub77c\uc774\uc5b8\ud2b8 children \uc8fc\uc785 \ud328\ud134. \uc758\uc2ec\ub418\uba74 \uc11c\ubc84, \uc778\ud130\ub799\uc158 \uc0dd\uae30\uba74 leaf \ubd80\ud130 \ud074\ub77c\uc774\uc5b8\ud2b8. \ub2e4\uc74c \ud3b8\uc5d0\uc120 <strong>Metadata API<\/strong> \ub85c SEO \ub97c \uc138\ud305\ud55c\ub2e4.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \ud3b8 \uc608\uace0 \u2014 Metadata API \ub85c SEO \uc124\uc815<\/h3>\n<p>title\u00b7description\u00b7OG \uc774\ubbf8\uc9c0\u00b7sitemap \uae4c\uc9c0 \ud55c API \ub85c. 7\ud3b8.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\n\uc2dc\ub9ac\uc988 \u00b7 <a href=\"https:\/\/junai.ai\/blog\/category\/nextjs\/\">\uc27d\uac8c \ubc30\uc6b0\ub294 Next.js<\/a> \u00b7 \uc774\uc804: <a href=\"https:\/\/junai.ai\/blog\/nextjs-dynamic-routing-5\/\">Ch.5 \ub3d9\uc801 \ub77c\uc6b0\ud305<\/a>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>App Router \uc758 \ub450 \ucef4\ud3ec\ub10c\ud2b8 \ubaa8\ub378 \u2014 \uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8(\uae30\ubcf8)\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8(use client). \uc815\ud655\ud55c \ucc28\uc774\uc640 \uc120\ud0dd \uae30\uc900. \uad50\uc7ac 6\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":823,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-877","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nextjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/877","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=877"}],"version-history":[{"count":0,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/877\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/823"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}