{"id":126,"date":"2025-07-16T15:03:17","date_gmt":"2025-07-16T06:03:17","guid":{"rendered":"http:\/\/34.64.61.65\/?p=126"},"modified":"2025-07-16T15:03:17","modified_gmt":"2025-07-16T06:03:17","slug":"javascriptlist%ec%99%80object_%eb%8d%b0%ec%9d%b4%ed%84%b0_%ec%b6%94%ec%b6%9c","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=126","title":{"rendered":"[JavaScript]List\uc640Object_\ub370\uc774\ud130_\ucd94\ucd9c"},"content":{"rendered":"\n<h2 class=\"wp-block-heading is-style-text-subtitle is-style-text-subtitle--1\">JavaScript\ub85c \ubcf5\uc7a1\ud55c \ub370\uc774\ud130 \uad6c\uc870 \ub2e4\ub8e8\uae30: List\uc640 Object \ub370\uc774\ud130 \ucd94\ucd9c \uc804\ub7b5 \ud83d\udca1<\/h2>\n\n\n\n<p>\ub370\uc774\ud130 \ub9ac\uc2a4\ud2b8\ub97c \ud65c\uc6a9\ud558\ub294 \ubc29\ubc95\uc740 \ub2e4\uc591\ud558\uba70, \uadf8\ub9cc\ud07c \uc78a\uc5b4\ubc84\ub9ac\uae30 \uc26c\uc6c0.<br>\n\uc774 \uae00\uc5d0\uc11c\ub294 <strong>List \uc548\uc5d0 List \uc548\uc5d0 Object<\/strong> \ud615\ud0dc\uc758 \ubcf5\uc7a1\ud55c \ub370\uc774\ud130\ub97c \ucd94\ucd9c\ud558\ub294 \uc804\ub7b5\uc744 \ub2e4\ub8f8<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcda \ub370\uc774\ud130 \uad6c\uc870 \uc774\ud574<\/h3>\n\n\n\n<p>\ub2e4\uc74c\uacfc \uac19\uc740 JSON \ud615\ud0dc\uc758 \ub370\uc774\ud130 \uad6c\uc870\ub97c \uc608\uc2dc\ub85c \ub4e4\uaca0\uc74c.<br>\n\uc774\ub294 \uc5ec\ub7ec \uce74\ud14c\uace0\ub9ac\ub97c \ud3ec\ud568\ud558\uace0, \uac01 \uce74\ud14c\uace0\ub9ac \uc548\uc5d0 \uc9c8\ubb38\uacfc \ub2f5\ubcc0 \uac1d\uccb4 \ub9ac\uc2a4\ud2b8\ub97c \uac00\uc9c0\uace0 \uc788\uc74c<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;\n  \"1\ubc88 \uce74\ud14c\uace0\ub9ac \": &#91;\n    {\n      \"id\": 1,\n      \"question\": \"\uc9c8\ubb381\",\n      \"answer\": \"\ub2f51\"\n    },\n    {\n      \"id\": 2,\n      \"question\": \"\uc9c8\ubb382\",\n      \"answer\": \"\ub2f52\"\n    }\n  ],\n  \"2\ubc88\uce74\ud14c\uace0\ub9ac\": &#91;\n    {\n      \"id\": 3,\n      \"question\": \"\uc9c8\ubb383\",\n      \"answer\": \"\ub2f53\"\n    },\n    {\n      \"id\": 4,\n      \"question\": \"\uc9c8\ubb384\",\n      \"answer\": \"\ub2f54\"\n    }\n  ],\n  \"7\ubc88\uce74\ud14c\uace0\ub9ac\": &#91;\n    {\n      \"id\": 25,\n      \"question\": \"\uc9c8\ubb3826\",\n      \"answer\": \"\ub2f526\"\n    },\n    {\n      \"id\": 26,\n      \"question\": \"\uc9c8\ubb3827\",\n      \"answer\": \"\ub2f527\"\n    }\n  ]\n]<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\uc704 \ub370\uc774\ud130\uc5d0\uc11c \uac01 \uce74\ud14c\uace0\ub9ac\ubcc4 \uc9c8\ubb38\uacfc \ub2f5\ubcc0\uc744 \ucd94\ucd9c\ud558\ub294 \uac83\uc774 \ubaa9\ud45c\uc784.<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd11 \uce74\ud14c\uace0\ub9ac \ud0a4 \ucd94\ucd9c\ud558\uae30<\/h3>\n\n\n\n<p>\uba3c\uc800 \ub370\uc774\ud130\ub97c <code>dataList<\/code> \ubcc0\uc218\uc5d0 \ub2f4\uc74c.<br>\n\uce74\ud14c\uace0\ub9ac \uc774\ub984\uc744 \ud0a4\ub85c \uc0ac\uc6a9\ud558\uace0 \uc788\uc73c\ubbc0\ub85c, <code>Object.keys()<\/code>\uc640 <code>map()<\/code>\uc744 \ud65c\uc6a9\ud558\uc5ec \ud0a4\ub97c \ucd94\ucd9c\ud560 \uc218 \uc788\uc74c<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const nameList = Object.keys(dataList&#91;0]).map((data) =&gt; (\n  &lt;span\n    key={data}\n    style={{\n      display: \"inline-block\",\n      fontSize: \"1.5rem\",\n      fontWeight: \"bold\",\n      padding: \"0.25rem 0\",\n    }}\n  &gt;\n    {data}\n  &lt;\/span&gt;\n));<\/code><\/pre>\n\n\n\n<p>\ud558\uc9c0\ub9cc \uc704 \ucf54\ub4dc\ub97c \ubc14\ub85c \uc2e4\ud589\ud558\uba74 \uc624\ub958\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub2e4<br>\nReact \ud658\uacbd\uc5d0\uc11c \uccab \ub80c\ub354\ub9c1 \uc2dc <code>dataList<\/code>\uac00 <code>undefined<\/code>\ub85c \ub098\uc62c \ub54c\uac00 \uc788\uc5b4 <code>map()<\/code> \ud568\uc218\ub97c \uc2e4\ud589\ud560 \uc218 \uc5c6\ub2e4\ub294 \uc624\ub958\uac00 \ubc1c\uc0dd\ud568<br>\n\uc774\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 <code>if<\/code> \ubb38\uc744 \uc0ac\uc6a9\ud558\uc5ec <code>dataList<\/code>\uac00 \uc815\uc758\ub418\uc5c8\ub294\uc9c0 \ud655\uc778\ud558\ub294 \uc870\uac74\ubb38\uc744 \ucd94\uac00\ud588\uc74c<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const nameList = dataList !== undefined ? Object.keys(dataList).map((key, index) =&gt; &lt;div key={index}&gt;&lt;\/div&gt;) : null; \/\/ \uc608\uc2dc \ucf54\ub4dc, \uc2e4\uc81c \uad6c\ud604\uc740 \uc704 span \ud0dc\uadf8\ub97c \ud65c\uc6a9<\/code><\/pre>\n\n\n\n<p><strong>\uacb0\uacfc\uac12:<\/strong> <code>[\"1\ubc88\uce74\ud14c\uace0\ub9ac\", \"2\ubc88\uce74\ud14c\uace0\ub9ac\", ..., \"7\ubc88\uce74\ud14c\uace0\ub9ac\"]<\/code> \ud615\ud0dc\ub85c \uce74\ud14c\uace0\ub9ac \ud0a4\ub4e4\uc774 \ucd94\ucd9c\ub428<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcdd \uc9c8\ubb38\uacfc \ub2f5\ubcc0 \ub370\uc774\ud130 \ucd94\ucd9c\ud558\uae30<\/h3>\n\n\n\n<p>\uce74\ud14c\uace0\ub9ac \ud0a4\ub97c \ucd94\ucd9c\ud55c \ud6c4, \uc774\uc81c \ud574\ub2f9 \ud0a4\uc758 \uac12\uc744 \ucc3e\uc544 \uc9c8\ubb38\uacfc \ub2f5\ubcc0 \ub370\uc774\ud130\ub97c \ucd94\ucd9c\ud574\uc57c \ud568<br>\n<code>Object.values()<\/code>\uc640 \uc911\ucca9\ub41c <code>map()<\/code>\uc744 \uc0ac\uc6a9\ud558\uba74 \uac00\ub2a5\ud568<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const dataDetail = Object.values(dataList&#91;0]).map((data) =&gt;\n  data.map((data2) =&gt; (\n    &lt;div key={data2.id}&gt;\n      &lt;p&gt;\n        {data2.question} \/ {data2.answer}\n      &lt;\/p&gt;\n    &lt;\/div&gt;\n  ))\n);<\/code><\/pre>\n\n\n\n<p>\uc774 \ucf54\ub4dc\ub294 <code>dataList<\/code>\uc758 \uac12(\uc989, \uac01 \uce74\ud14c\uace0\ub9ac\uc758 \ub9ac\uc2a4\ud2b8)\uc744 \uc21c\ud68c\ud558\uace0,<br>\n\uac01 \ub9ac\uc2a4\ud2b8 \ub0b4\ubd80\uc758 \uac1d\uccb4(<code>data2<\/code>)\uc5d0\uc11c <code>question<\/code>\uacfc <code>answer<\/code> \uc18d\uc131\uc744 \ucd94\ucd9c\ud568.<\/p>\n\n\n\n<p><strong>\uacb0\uacfc\uac12:<\/strong><br>\n<code>[\"\uc9c8\ubb381\", \"\ub2f51\",\"\uc9c8\ubb382\",\"\ub2f52\"]<\/code><br>\n<code>[\"\uc9c8\ubb383\", \"\ub2f53\",\"\uc9c8\ubb384\",\"\ub2f54\"]<\/code><br>\n<code>[\"\uc9c8\ubb3826\", \"\ub2f526\",\"\uc9c8\ubb3827\",\"\ub2f527\"]<\/code><br>\n\uc640 \uac19\uc774 \uac01 \uce74\ud14c\uace0\ub9ac\ubcc4 \uc9c8\ubb38\uacfc \ub2f5\ubcc0 \ub370\uc774\ud130\uac00 \ucd94\ucd9c\ub428.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript\ub85c \ubcf5\uc7a1\ud55c \ub370\uc774\ud130 \uad6c\uc870 \ub2e4\ub8e8\uae30: List\uc640 Object \ub370\uc774\ud130 \ucd94\ucd9c \uc804\ub7b5 \ud83d\udca1 \ub370\uc774\ud130 \ub9ac\uc2a4\ud2b8\ub97c \ud65c\uc6a9\ud558\ub294 \ubc29\ubc95\uc740 \ub2e4\uc591\ud558\uba70, \uadf8\ub9cc\ud07c \uc78a\uc5b4\ubc84\ub9ac\uae30 \uc26c\uc6c0. \uc774 \uae00\uc5d0\uc11c\ub294 List \uc548\uc5d0 List \uc548\uc5d0 Object \ud615\ud0dc\uc758 \ubcf5\uc7a1\ud55c \ub370\uc774\ud130\ub97c \ucd94\ucd9c\ud558\ub294 \uc804\ub7b5\uc744 \ub2e4\ub8f8 \ud83d\udcda \ub370\uc774\ud130 \uad6c\uc870 \uc774\ud574 \ub2e4\uc74c\uacfc \uac19\uc740 JSON \ud615\ud0dc\uc758 \ub370\uc774\ud130 \uad6c\uc870\ub97c \uc608\uc2dc\ub85c \ub4e4\uaca0\uc74c. \uc774\ub294 \uc5ec\ub7ec \uce74\ud14c\uace0\ub9ac\ub97c \ud3ec\ud568\ud558\uace0, \uac01 \uce74\ud14c\uace0\ub9ac \uc548\uc5d0 \uc9c8\ubb38\uacfc \ub2f5\ubcc0 \uac1d\uccb4 \ub9ac\uc2a4\ud2b8\ub97c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[47],"tags":[121,122,123,120],"class_list":["post-126","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript","tag-list","tag-object","tag-120"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=126"}],"version-history":[{"count":1,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/126\/revisions"}],"predecessor-version":[{"id":132,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/126\/revisions\/132"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}