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 : 'reusable component', content : 'render easy with reusable component.' },
    // ...
    { id : 100, title : 'I just got hired!', content : 'OMG!' },
  ];

function Blog() {
  return (
    <div>
      <div>
         <h3>{posts[0].title}</h3>
         <p>{posts[0].content}</p>
     </div>
      <div>
         <h3>{posts[1].title}</h3>
         <p>{posts[1].content}</p>
      </div>
      {// ...}
      <div>
         <h3>{posts[99].title}</h3>
         <p>{posts[99].content}</p>
      </div>
     {// ... 98 * 4 more lines !!}
   </div>
  );
}

위의 함수를 map을 활용해서 정리하자.

function Blog(){

    const blogs = posts.map((post) =>{
        <div key = {post.id}>
             <h3>{post.tilte}</h3>
             <p>{post.content}</p>
        </div>
    });

    return <div className="post-wrapper">{blogs}</div>;
}

 

# key속성에 id가 존재하지않으면?
- key속성값은 가능하면 데이터에서 제공하는 id를 할당해야 한다. key속성값은 id와 마찬가지로 변하지 않고 예상가능하며 유일해야하기때문이다
정 고유한 id가 없는 경우에만 배열인덱스를 넣어서 해결할수있다. 배열인덱스는 최후의 수단으로사용한다.