[React] React map을 이용한 반복?

2022.11.25

💡 React Map( ) 함수를 이용한 반복

🧐 map( ) 왜 써야 하는데?

내 블로그 데이터를 코드로 작성한다고 생각해보자

내 블로그에는 약 60개? 정도의 블로그가 존재한다. 이를 코드로 받아오면

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 : 60, 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[60].title}</h3>
         <p>{posts[60].content}</p>
      </div>
   </div>
  );
}

…부분을 모두 하드코딩하려면 생각만해도 머리가 아프다. 이런 문제를 해결하기 위해서 React에서는 배열 메서드 map을 활용한다.

우선 위 코드가 어떻게 간결해지는지 확인해보자

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

이 얼마나 간단한가? 이렇게 유지보수도 쉽고 가독성도 뛰어나며 작성도 쉬워진다.

map( ) 함수는 1. 배열의 각 요소를 2. 특정 논리함수에 의해 3. 다른요소로 지정(매핑)한다.

배열의 각 요소 post를 특정논리 postToElement 에 의해 다른 요소로 map 하는 것이다.

하지만 이렇게만 코드를 작성하면 에러가 뜰 것이다. 아래에서 내용을 확인하자

### 💡 React key 속성

React에서 map 메서드를 사용할 때 key 속성을 넣지 않으면 각 항목에 key를 넣어야 한다는 경고가 뜬다. key를 설정하지 않으면 불필요한 렌더링이 발생함. 때문에 고유값인 id를 key속성으로 넣어주어야한다.

key 속성은 map 메서드 내부에 있는 첫번째 엘리먼트에 넣어주면 된다.

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

key 속성값에 id가 존재하지 않으면 어떻게 해야할까?

key 속성값은 가능하면 데이터를 제공하는 id를 할당해야 한다. key 속성값은 id와 마찬가지로 변하지 않고 예상 가능하며 유일해야 하기 때문이다. id가 없는 경우엔 배열 인덱스를 넣어서 해결할 수 있긴 하지만 가능하면 id를 넣어주자