Web/React
React - 배열 메소드 map을 이용한 반복
Yongari
2023. 1. 1. 15:38
자바스크립트에서 배열 안의 요소가 1개 또는 2개라면 하드코딩으로 {}표현식을 이용해서 표현해도 될것입니다. 하지만
배열 안의 요소가 100개, 1000개라면 어떨가요?? 이럴 경우에 하드코딩을 하는 것은 바보같은 짓입니다. 그래서 이런 경우에는
자바스크립트의 고차함수인 map을 사용하면 간단히 해결할 수 있습니다.
고차함수 map의 특징은 다음과 같습니다.
배열의 각 요소를 특정 논리(함수)에 의해 다른 요소로 지정(map)합니다.
- map의 디테일한 사항은 여기 mdn에서 보실 수 있습니다.
다음 코드를 예시로 들면 posts요소는 id, title, content로 나눌 수 있습니다.
여기서 map 메소드 사용시 key를 써야하는데 가장 적절한 데이터는 id입니다. 이유는 데이터마다 분별할 수 있고 예상할 수 있으며 유일한 값이기 떄문입니다. 리액트의 좀 더 자세한 사항은 다음 링크에서 확인할 수 있습니다. "https://ko.reactjs.org/docs/lists-and-keys.html#keys"
문제 코드 설명 >> 배열 메소드 map을 이용해서 포스트를 화면에 보여주기
const posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React!" },
{ id: 2, title: "Installation", content: "You can install React via npm." },
{ id: 3, title: "Practice", content: "Practice React via npm run start" }
];
export default function Blog() {
return (
<div>
<div>
<h3>{posts[0].title}</h3>
<p>{posts[0].content}</p>
</div>
<div>
{/* TODO : 배열 메소드 map을 이용하여 포스트를 화면에 보여주세요. */}
</div>
</div>
);
}
풀이 코드 설명 >> map을 이용하여 포스트를 화면에 보여줌
const posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React!" },
{ id: 2, title: "Installation", content: "You can install React via npm." },
{ id: 3, title: "Practice", content: "Practice React via npm run start" }
];
export default function Blog() {
const postToElement = posts.map((post)=>(
<div key={post.id}>
<h3>{post.title}</h3>
<p> {post.content}</p>
</div>
))
return (
<div>
<div>
<h3>{posts[0].title}</h3>
<p>{posts[0].content}</p>
</div>
<div>
{/* TODO : 배열 메소드 map을 이용하여 포스트를 화면에 보여주세요. */}
{postToElement}
</div>
</div>
);
}