[React] 9. 리스트 데이터 출력하기

안녕하세요. 박기린 입니다.

이번엔 리스트 데이터를 목록형태로 출력하는 방법에 대해 알아보겠습니다.

 

 

 

List 데이터 렌더링

{props.items.map((expense) => (
  <ExpenseItem
    title={expense.title}
    amount={expense.amount}
    date={expense.date}
  />
))}

JS에 내장된 Array.prototype.map()을 이용해서 Array로 이루어진 props를 한 번에 컴포넌트로 렌더링할 수 있습니다.

map()은 Array를 return하는데, React는 jsx(컴포넌트)를 element로 하는 Array를 자동으로 나란히 렌더링한다.

 

 

 

렌더링한 결과물

 

 

 

 

원본 데이터 형태 (접은 글 펼치기)

  const expenses = [
    {
      id: "e1",
      title: "Car Insurance",
      amount: 294.67,
      date: new Date(2022, 2, 20),
    },
    {
      id: "e2",
      title: "Car Insurance",
      amount: 294.78,
      date: new Date(2022, 2, 20),
    },
    {
      id: "e3",
      title: "Car Insurance",
      amount: 294.89,
      date: new Date(2022, 2, 20),
    },
  ];

 

 

 

 

 

---

"Key" prop 이해하기

리스트형 컨텐츠를 mapping할 때는 항상 "Key" prop을 추가해야 한다.

{props.items.map((expense) => (
  <ExpenseItem
    title={expense.title}
    amount={expense.amount}
    date={expense.date}
  />
))}

이런 식으로 컴포넌트를 구성하면, UI 상에는 잘 표시가 되지만, 콘솔창에는 경고 문구가 나온다.

 

 

 

 

 

key prop이 필요하다고 경고를 합니다.

 

 

 

 

 

---

key prop이란?

React는 데이터의 목록을 렌더링 하는데 있어서 고유한 key prop을 각 element마다 가집니다. Key prop은 React에서 발생하는 문제를 방지하기 위해 필요합니다.

 

 

 

 

---

key prop이 없으면 발생하는 문제

1. 매핑된 컴포넌틀이 죄다 유사하게 생겼기에 그 차이를 구분하기 위해 React엔진이 일을 하느라 성능 손실이 발생합니다.

 

 Array로부터 mapping된 여러 개의 컴포넌트들을 어디에 렌더링해야 할 지를 React 엔진이 알지 못합니다. 그래서 일단 새로운 컴포넌트를 <div> 목록의 맨 마지막에 렌더링 한 후, <div> 안에 있는 모든 컴포넌트를 업데이트해서 맨 위로 새 컨텐츠를 올립니다. 왜냐하면 차이를 구분하기 위해 각 컴포넌트들을 하나씩 비교하기 때문입니다. 비교하면서 서로 다른 점이 발견되면, 기존에 있던 컴포넌트는 새 컴포넌트의 밑으로 내려버럽니다.

반면에, key가 있으면 다른 걸 재렌더링하지 않고 key 순서에 따라 바로 맨 위에 차곡차곡 쌓습니다. key는 컴포넌트가 어디에 위치해야 할지도 지정해줍니다. 그래서 성능 손실을 막습니다.

 

 

 

2. 모든 값이 동일한 컴포넌트가 추가될 경우, 새로 DOM을 생성하지 않고 덮어씌우기만 할 수도 있습니다.

 

 

 

 

 

 

---

{props.items.map((expense) => (
  <ExpenseItem
    title={expense.title}
    amount={expense.amount}
    date={expense.date}
    key={expense.id}
  />
))}

그래서 위 코드처럼, key prop을 추가해줘야 합니다.

그리고 key prop은 꼭 고유한 값이어야 합니다.

 

 

 

 

 

 

 

---

HTML Key

      <ul>
        {props.users.map((user) => (
          <li key={user.id}>
            {user.name} ({user.age} years old)
          </li>
        ))}
      </ul>

key prop은 React 컴포넌트 뿐만 아니라, 위 코드처럼 HTML element에도 추가할 수 있습니다.

HTML element의 key prop도 마찬가지로 React 엔진이 개별 아이템들을 인식할 수 있도록 도와줍니다.