👀 map을 이용한 반복

블로그를 개발한다고 가정했을 때, 블로그 포스팅이 늘어날 때 마다(데이터가 변경될 때마다) 알아서 렌더링할 수 있도록 하려면 배열 메서드 map()을 활용한다.

• map( )은 배열의 각 요소를 특정 논리(함수)에 의해 다른 요소로 지정하는 것이다.

현재 posts(포스팅된 글들)의 요소는 블로그 포스트의 id, title, content로 나눌 수 있다.

단순한 문자열에 불과했던 posts의 요소를 HTML 엘리먼트로 이 정보의 구조를 잘 짜 놓은 모습으로 매핑하려면 아래의 의사코드를 따라 코드를 작성한다.

배열의 각 요소(post)를 특정 논리(postToElement 함수)에 의해 다른 요소로 지정(map) 합니다.

위의 의사코드를 기반으로 코드를 작성하면, 아래와 같이 작성할 수 있으며, 반복적으로 작성해야하는 부분만 골라서 배열의 요소로 넣으면 React가 이를 인지하고 모든 요소를 렌더링한다.

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>;
}

✔ key 속성

React에서 map() 메서드 사용 시, key 속성을 넣지 않으면 경고가 표시된다. 따라서, map() 메서드 내부에 있는 element 중 첫 element에 넣어준다.

key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야하기 때문에 id로 설정해야한다. 단, 고유한 id가 없을 경우 배열 인덱스를 넣을 수 있다.

아래는 바로 위의 코드와 같은 동작을 하는 코드로, key 속성값을 할당해준 예시이다.

function Blog() {
  // postToElement라는 함수로 나누지 않고 아래와 같이 써도 무방합니다.
  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>;
}

Reference: 코드스테이츠