React - 배열 메소드 map을 이용한 반복

자바스크립트에서 배열 안의 요소가 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>
  );
}