react Spread 문법 (...) 질문있어요

Question

스프레드 문법을 이용하여서 다음과 같은 구조의 json 중 content 내부의 내용 (14개) 만 가져오고 싶은데요왜 console.log(SkillItemsC); 이렇게 콘솔출력해보면 0번부터 6번까지 7개만 출력되네요왜 내용이 잘려보이나요?(스프레스 문법에서 소괄호 지워도 동일하네요..)[ { "category":"Frontend", "cid":1, "content": [ { "id": 1, "title": "Javascript", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/Javascript.svg" }, { "id": 2, "title": "TypeScript", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/TypeScript.svg" }, { "id": 3, "title": "React", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/React.svg" }, { "id": 4, "title": "Next.js", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/Nextjs.svg" }, { "id": 5, "title": "Html", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/Html.svg" }, { "id": 6, "title": "Css", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/Css.svg" }, { "id": 7, "title": "JQuery", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/JQuery.svg" } ] }, { "category":"Backend", "cid":2, "content": [ { "id": 8, "title": "Java", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/Java.svg" }, { "id": 9, "title": "MySQL", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/MySQL.svg" }, { "id": 10, "title": "React", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/React.svg" } ] }, { "category":"Design", "cid":3, "content": [ { "id": 11, "title": "Figma", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/Figma.svg" }, { "id": 12, "title": "Photoshop", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/Photoshop.svg" }, { "id": 13, "title": "Illustrator", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/Illustrator.svg" }, { "id": 14, "title": "Indesign", "imgUrl": "https://hyerikim.000webhostapp.com/portfolio/img/Indesign.svg" } ] } ]import './Skill.css'; import SkillItems from './mockSkill.json'; function SkillResult() { let userInput = 're'; let SkillItemsC = {...(SkillItems[0].content), ...(SkillItems[1].content), ...(SkillItems[2].content)}; console.log(SkillItemsC); let filteredData = SkillItems.filter((SkillItems) => { return SkillItems.title.toLowerCase().includes(userInput.toLowerCase()); }); //console.log(filteredData); return ( <> {filteredData.content.map((subItem) => { return(

{subItem.title}

); })} ); } export default SkillResult;

벼랑끝에서올라오는중 · Accepted Answer

우선 오해가 있습니다. spread 문법은 react의 문법이 아니라 ES6의 문법입니다.그리고 skillItems는 배열이라서 객체로 펴면 안됩니다. 배열로 펴야죠. 그럼 14개 원하는만큼 보입니다. let SkillItemsC &#61; [...(SkillItems[0].content), ...(SkillItems[1].content), ...(SkillItems[2].content)];객체로 쓰면 안되는 이유는 js는 배열도 객체로서 작동하기 때문입니다. let SkillItemsC &#61; {...(SkillItems[2].content),...(SkillItems[1].content)}; console.log(SkillItemsC);배열의 index가 key가 되는 형태로 변합니다. 배열의 요소는 총 4개 있기 때문에, key가 0부터 3까지 있게 되고, 마지막 객체로 취급된 SkillItems[1].content가 0,1,2번째 요소를 대체하게 됩니다. { &#34;0&#34;: { &#34;id&#34;: 8, &#34;title&#34;: &#34;Java&#34;, &#34;imgUrl&#34;: &#34;https://hyerikim.000webhostapp.com/portfolio/img/Java.svg&#34; }, &#34;1&#34;: { &#34;id&#34;: 9, &#34;title&#34;: &#34;MySQL&#34;, &#34;imgUrl&#34;: &#34;https://hyerikim.000webhostapp.com/portfolio/img/MySQL.svg&#34; }, &#34;2&#34;: { &#34;id&#34;: 10, &#34;title&#34;: &#34;React&#34;, &#34;imgUrl&#34;: &#34;https://hyerikim.000webhostapp.com/portfolio/img/React.svg&#34; }, &#34;3&#34;: { &#34;id&#34;: 14, &#34;title&#34;: &#34;Indesign&#34;, &#34;imgUrl&#34;: &#34;https://hyerikim.000webhostapp.com/portfolio/img/Indesign.svg&#34; } }따라서 위와 같은 결과가 출력됩니다. JS에 대해 더 공부하시면 도움이 될 것으로 보입니다. JS는 배열도 객체의 일부로 취급되는데, 단지 특수한 객체일 뿐입니다. 반드시 배열은 배열로 spread하셔야 합니다. 아니면 위와 같은 의도치 않은 결과가 발생합니다.

dpndhc · Answer

많은 도움이 되었습니다 답변 감사드립니다

react Spread 문법 (...) 질문있어요

2개의 답변

Q&A 목록