React #4

map을 이용한 반복

React에서 반복하는 데이터를 렌더링 할 때 사용

• map

  배열의 각 요소가 함수에 의해 다른 요소로 지정(map) 되는 메소드

예1)

function Blog() {
  const postToElement = (post) => (
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  const blogs = posts.map(postToElement);

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

블로그의 내용을 담은 post 객체를 인자로 받아
내용을 각각 div 태그에 담고 리턴하는 함수

• key 속성

map을 통해 반복되는 요소들을 각각 구분하기 위한 것
없으면 경고가 뜸 (실행은 된다)

• key 속성 값이 반드시 id가 되어야 하나요? id가 존재하지 않으면 어떻게 해야 하나요?

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

예2)

function Blog() {
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}