{"id":771,"date":"2026-05-18T23:01:04","date_gmt":"2026-05-18T15:01:04","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-list-rendering-9\/"},"modified":"2026-05-19T20:26:16","modified_gmt":"2026-05-19T12:26:16","slug":"react-list-rendering-9","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-list-rendering-9\/","title":{"rendered":"React \ub9ac\uc2a4\ud2b8 \ub80c\ub354\ub9c1 \u2014 .map() \u00b7 key (Ch.9)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 746 -->\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.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 9\ud3b8<\/span>\n  <h1>React \ub9ac\uc2a4\ud2b8 \ub80c\ub354\ub9c1 \u2014 .map() \u00b7 key<\/h1>\n  <p>\ubc30\uc5f4 100\uac1c\ub97c JSX 100\uac1c\ub85c \ud55c \uc904\uc5d0. key prop \uc758 \uc9c4\uc9dc \uc758\ubbf8\uae4c\uc9c0.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-29.jpg\" alt=\"\ub3d9\uc77c \ud615\uc2dd \uce74\ub4dc \uc5ec\ub7ec \uac1c\uac00 \uc138\ub85c\ub85c \uc313\uc774\ub294 \uc77c\ub7ec\uc2a4\ud2b8 \u2014 \ub9ac\uc2a4\ud2b8 \ub80c\ub354\ub9c1 \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>\uc2e4\uc804 React \uc571\uc5d0\uc11c \uac00\uc7a5 \uc790\uc8fc \ub098\uc624\ub294 \ud328\ud134 \u2014 &#8220;\ubc30\uc5f4 \ub370\uc774\ud130\ub97c \ubc1b\uc544 UI \ud56d\ubaa9 \uc5ec\ub7ec \uac1c\ub85c \uadf8\ub9ac\uae30&#8221;. \uc0ac\uc6a9\uc790 \ubaa9\ub85d\u00b7\uc0c1\ud488 \uce74\ud0c8\ub85c\uadf8\u00b7\ub313\uae00\u00b7\uc54c\ub9bc \u2014 \uc804\ubd80 \uac19\uc740 \ubaa8\uc591. JS \uc758 <code>.map()<\/code> \uba54\uc11c\ub4dc\uc640 JSX \uac00 \ub9cc\ub098\ub294 \uc9c0\uc810.<\/p>\n\n<p>\uc774\ubc88 9\ud3b8\uc740 <code>.map()<\/code> \uae30\ubcf8 + <strong>key prop \uc758 \uc9c4\uc9dc \uc5ed\ud560<\/strong> (\ub300\ubd80\ubd84 \uc798\ubabb \uc124\uba85\ub428) + index \ub97c key \ub85c \uc4f0\uba74 \uc77c\uc5b4\ub098\ub294 \uc0ac\uace0 + \ud544\ud130\u00b7\uc815\ub82c \ud328\ud134\uae4c\uc9c0.<\/p>\n\n<h2>1. .map() \u2014 \ubc30\uc5f4\uc744 JSX \ubc30\uc5f4\ub85c<\/h2>\n\n<p>JSX \uc911\uad04\ud638 \uc548\uc5d0 <strong>JSX \uc694\uc18c\uc758 \ubc30\uc5f4<\/strong> \uc744 \ub123\uc73c\uba74 React \uac00 \uc21c\uc11c\ub300\ub85c \uadf8\ub9b0\ub2e4.<\/p>\n\n<div class=\"code-block\">function UserList({ users }) {\n  return (\n    &lt;ul&gt;\n      {users.map(user =&gt; (\n        &lt;li key={user.id}&gt;{user.name}&lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}\n\n\/\/ users = [{id:1,name:&#8217;\ubc15\uc900\uc131&#8217;},{id:2,name:&#8217;\ud64d\uae38\ub3d9&#8217;}]\n\/\/ \u2192 &lt;ul&gt;&lt;li&gt;\ubc15\uc900\uc131&lt;\/li&gt;&lt;li&gt;\ud64d\uae38\ub3d9&lt;\/li&gt;&lt;\/ul&gt;<\/code><\/div>\n\n<p>\ud575\uc2ec \u2014 <code>.map()<\/code> \uc758 \ucf5c\ubc31\uc774 <strong>JSX \ub97c return<\/strong>. \uac01 \ud56d\ubaa9\ub9c8\ub2e4 \ucef4\ud3ec\ub10c\ud2b8 \ud558\ub098\uac00 \uc0dd\uc131. \ud654\uc0b4\ud45c \ud568\uc218\uc758 \ubcf8\ubb38\uc774 \ud55c \uc904\uc774\uba74 \uad04\ud638\ub85c \uac10\uc2f8 \uc554\ubb35\uc801 return, \uc5ec\ub7ec \uc904\uc774\uba74 \uc911\uad04\ud638 + \uba85\uc2dc\uc801 return.<\/p>\n\n<h2>2. key prop \u2014 &#8220;\uc131\ub2a5 \ucd5c\uc801\ud654&#8221; \uac00 \uc544\ub2c8\ub2e4<\/h2>\n\n<p>\uac70\uc758 \ubaa8\ub4e0 \ud55c\uad6d \ud29c\ud1a0\ub9ac\uc5bc\uc774 &#8220;key \ub294 \uc131\ub2a5 \ucd5c\uc801\ud654\uc6a9&#8221; \uc774\ub77c\uace0 \uc124\uba85. \uc808\ubc18\ub9cc \ub9de\ub2e4. <strong>\uc9c4\uc9dc \uc5ed\ud560\uc740 React \uac00 &#8220;\uc5b4\ub290 \ud56d\ubaa9\uc774 \ub204\uad6c\uc778\uc9c0&#8221; \ucd94\uc801\ud558\uae30 \uc704\ud568<\/strong> \u2014 \ud56d\ubaa9\uc774 \ucd94\uac00\u00b7\uc0ad\uc81c\u00b7\uc7ac\ubc30\uce58\ub420 \ub54c \uc5b4\ub5a4 DOM \ub178\ub4dc\ub97c \uc7ac\uc0ac\uc6a9\ud558\uace0 \uc5b4\ub5a4 \uac78 \uc0c8\ub85c \ub9cc\ub4e4\uc9c0 \uacb0\uc815.<\/p>\n\n<div class=\"code-block\">\/\/ key \uc5c6\uc73c\uba74\n&lt;ul&gt;\n  {users.map(user =&gt; &lt;li&gt;{user.name}&lt;\/li&gt;)}  \/\/ \u274c \uacbd\uace0\n&lt;\/ul&gt;\n\/\/ React \ucf58\uc194: &#8220;Each child in a list should have a unique &#8216;key&#8217; prop.&#8221;<\/div>\n\n<p>key \uac00 \uc5c6\uc73c\uba74 React \uac00 &#8220;\uc774 \ud56d\ubaa9\uc774 \uc774\uc804 \ub80c\ub354\uc758 \uadf8 \ud56d\ubaa9\uc778\uc9c0&#8221; \uc54c \uc218 \uc5c6\ub2e4. 100\uac1c \ub9ac\uc2a4\ud2b8\uc5d0\uc11c \uccab \ud56d\ubaa9 \uc0ad\uc81c\ud558\uba74 \u2014 React \uc785\uc7a5\uc5d0\uc120 100\uac1c\ub97c \uc0c8\ub85c \uadf8\ub9ac\ub294 \uac83\uacfc \uac19\uc74c. key \uac00 \uc788\uc73c\uba74 &#8220;\uccab \ud56d\ubaa9\ub9cc \uc0ac\ub77c\uc9c0\uace0 \ub098\uba38\uc9c0 99\uac1c\ub294 \uadf8\ub300\ub85c&#8221; \uc778 \uac78 \uc548\ub2e4.<\/p>\n\n<div class=\"databox\">\n<strong>key \uc758 4\uac00\uc9c0 \uaddc\uce59<\/strong> \u2014 \u2460 \ud615\uc81c \uc0ac\uc774\uc5d0\uc11c\ub9cc \uc720\uc77c\ud558\uba74 \ub428 (\ub2e4\ub978 \ubd80\ubaa8 \uc548\uc5d0\uc11c \uc911\ubcf5 OK). \u2461 \uc548\uc815\uc801\uc774\uc5b4\uc57c \ud568 (\ub80c\ub354\ub9c8\ub2e4 \ubc14\ub00c\uba74 \uc758\ubbf8 \uc5c6\uc74c). \u2462 \ub370\uc774\ud130\uc758 \uc790\uc5f0 ID (DB id\u00b7UUID) \uac00 \ucd5c\uc120. \u2463 \uadf8\uac83\ub3c4 \uc5c6\uc73c\uba74 \ud56d\ubaa9 \ub0b4\uc6a9 \uc790\uccb4 (\ud55c \ubc88 \uc815\ud574\uc9c0\uba74 \uc548 \ubc14\ub00c\ub294 \uac12) \u2014 \ub2e8 \uc911\ubcf5 \uc5c6\uc5b4\uc57c.\n<\/div>\n\n<h2>3. index \ub97c key \ub85c \uc4f0\uba74 \uc548 \ub418\ub294 \uc9c4\uc9dc \uc774\uc720<\/h2>\n\n<p>\uac00\uc7a5 \ud754\ud55c \ud328\ud134 \u2014 \ub370\uc774\ud130\uc5d0 id \uac00 \uc5c6\uc5b4\uc11c <code>.map((item, i) =&gt; ... key={i})<\/code> \ucc98\ub7fc index \uc0ac\uc6a9. \uc815\uc801 \ub9ac\uc2a4\ud2b8\uba74 OK, \ud56d\ubaa9\uc774 <strong>\ucd94\uac00\u00b7\uc0ad\uc81c\u00b7\uc7ac\uc815\ub82c<\/strong>\ub418\ub294 \uc21c\uac04 \ubc84\uadf8 \ud3ed\ud0c4.<\/p>\n\n<div class=\"code-block\">\/\/ \uc2dc\ub098\ub9ac\uc624: input \uc774 \uc788\ub294 \ub9ac\uc2a4\ud2b8\nfunction TodoList() {\n  const [todos, setTodos] = useState([\n    { text: &#8216;\uc6b0\uc720&#8217; }, { text: &#8216;\ube75&#8217; }, { text: &#8216;\ucee4\ud53c&#8217; }\n  ]);\n  return todos.map((todo, i) =&gt; (\n    &lt;li key={i}&gt;\n      &lt;input defaultValue={todo.text} \/&gt;\n    &lt;\/li&gt;\n  ));\n}\n\n\/\/ \uc0ac\uc6a9\uc790\uac00 &#8216;\ube75&#8217; input \uc5d0 &#8216;\uc2dd\ube75&#8217; \ucd94\uac00 \uc785\ub825\n\/\/ \uadf8 \ub2e4\uc74c &#8216;\uc6b0\uc720&#8217; \uc0ad\uc81c \u2192 \ub9ac\uc2a4\ud2b8\ub294 [\ube75, \ucee4\ud53c]\n\/\/ \ud558\uc9c0\ub9cc input \uc5d0 \uc785\ub825\ud55c &#8216;\uc2dd\ube75&#8217; \uae00\uc790\uac00 &#8216;\ucee4\ud53c&#8217; \uc790\ub9ac\ub85c \uc774\ub3d9! \u274c<\/div>\n\n<p>\uc65c\ub0d0\ud558\uba74 React \uac00 &#8220;key=0 \uc774 \ube75, key=1 \uc774 \ucee4\ud53c&#8221; \ub85c \uae30\uc5b5. \uc0ad\uc81c \ud6c4\uc5d4 &#8220;key=0 \uc774 \ube75\u2192 \uc6b0\uc720 \uc790\ub9ac\uc5d0 \ube75\uc744 \uadf8\ub9bc&#8221; \uc774 \uc544\ub2c8\ub77c &#8220;key=0 \uc790\ub9ac\uc5d0 \uc0c8 \ub370\uc774\ud130 \ube75\uc744 \ub07c\uc6c0&#8221; \uc778\ub370 input \uc758 internal state (\uc0ac\uc6a9\uc790\uac00 \uc785\ub825\ud55c &#8216;\uc2dd\ube75&#8217;) \uac00 \uccab \uc790\ub9ac\uc5d0 \ub0a8\uc544\uc788\uc5b4 \uc5b4\uae0b\ub0a8.<\/p>\n\n<p>\ud574\uacb0\ucc45 \u2014 <strong>\uc548\uc815\uc801 id<\/strong>. \ub370\uc774\ud130 \uc0dd\uc131 \uc2dc <code>crypto.randomUUID()<\/code> \ub610\ub294 <code>Date.now()<\/code> \uac19\uc740 \uace0\uc720\uac12 \ubc15\uae30:<\/p>\n\n<div class=\"code-block\">const [todos, setTodos] = useState([\n  { id: crypto.randomUUID(), text: &#8216;\uc6b0\uc720&#8217; },\n  \/\/ &#8230;\n]);\nreturn todos.map(todo =&gt; (\n  &lt;li key={todo.id}&gt;\n    &lt;input defaultValue={todo.text} \/&gt;\n  &lt;\/li&gt;\n));<\/div>\n\n<div class=\"warnbox\">\n<strong>\uc608\uc678<\/strong> \u2014 \ub9ac\uc2a4\ud2b8\uac00 \ud3c9\uc0dd \ubcc0\ud558\uc9c0 \uc54a\uace0 \ub2e8\uc21c \ud45c\uc2dc\uc6a9 (\uc608: \uc815\uc801 \uba54\ub274) \uc774\uba74 index \uc0ac\uc6a9 OK. \ud558\uc9c0\ub9cc \uc77c\ub2e8 \ucd94\uac00\/\uc0ad\uc81c \uae30\ub2a5\uc774 \ub4e4\uc5b4\uac00\ub294 \uc21c\uac04 id \ud544\uc218. \ucc98\uc74c\ubd80\ud130 id \ubc15\ub294 \uac8c \uc548\uc804.\n<\/div>\n\n<h2>4. \ud544\ud130\u00b7\uc815\ub82c \u2014 .map() \uc55e\uc5d0 \uccb4\uc774\ub2dd<\/h2>\n\n<p>JSX \uc911\uad04\ud638\ub294 JS \ud45c\ud604\uc2dd\uc774\ub77c \uba54\uc11c\ub4dc \uccb4\uc774\ub2dd \uc790\uc720\ub86d\uac8c. \ud544\ud130 \ud6c4 \uc815\ub82c \ud6c4 \ub80c\ub354.<\/p>\n\n<div class=\"code-block\">function ProductList({ products, category }) {\n  return products\n    .filter(p =&gt; p.category === category)\n    .sort((a, b) =&gt; b.price &#8211; a.price)\n    .map(p =&gt; (\n      &lt;li key={p.id}&gt;{p.name} \u2014 {p.price.toLocaleString()}\uc6d0&lt;\/li&gt;\n    ));\n}<\/div>\n\n<p>\uc774 \ud55c \uc904\uc774 SQL \uc758 <code>SELECT WHERE ORDER BY<\/code> \uc640 \uac19\uc740 \uc77c\uc744 \ud55c\ub2e4. \ub2e4\ub9cc \u2014 <strong>.sort() \ub294 \uc6d0\ubcf8 \ubc30\uc5f4\uc744 \ubcc0\uacbd<\/strong>\ud55c\ub2e4. props \ub85c \ubc1b\uc740 \ubc30\uc5f4\uc744 \uc9c1\uc811 sort \ud558\uba74 React \uc758 immutability \uc6d0\uce59 \uc704\ubc18. <code>[...products].sort(...)<\/code> \ucc98\ub7fc spread \ub85c \ubcf5\uc0ac\ubcf8\uc744 \uba3c\uc800 \ub9cc\ub4e4\uace0 \uc815\ub82c\ud574\uc57c \uc548\uc804.<\/p>\n\n<p>\uc774 \ud328\ud134\uc774 \uc190\uc5d0 \uc7a1\ud788\uba74 \ub3d9\uc801 UI \uc758 99% \uac00 \uac00\ub2a5. 10\ud3b8\uc5d0\uc11c <strong>Form<\/strong> \u2014 controlled vs uncontrolled \uc785\ub825 \uad00\ub9ac + \ub2e4\uc911 input \ucc98\ub9ac\ub85c \ub9c8\ubb34\ub9ac.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00<\/h3>\n<p>React \uad50\uc7ac 10\ud3b8 \u2014 Form \ub2e4\ub8e8\uae30. controlled vs uncontrolled, \ub2e4\uc911 input useState \ud328\ud134, \uc81c\ucd9c \ucc98\ub9ac.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-events-7\/\">7\ud3b8 \uc774\ubca4\ud2b8<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-conditional-rendering-8\/\">8\ud3b8 \uc870\uac74\ubd80<\/a> \u00b7\n<strong>9\ud3b8 \ub9ac\uc2a4\ud2b8<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>React \ub9ac\uc2a4\ud2b8 \u2014 .map() \uc73c\ub85c JSX \ubc30\uc5f4, key prop \uc9c4\uc9dc \uc5ed\ud560, index key \ud568\uc815, \uc815\ub82c\u00b7\ud544\ud130 \ud328\ud134. \uad50\uc7ac 9\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":746,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-771","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\/771","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=771"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/771\/revisions"}],"predecessor-version":[{"id":798,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/771\/revisions\/798"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/746"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=771"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=771"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}