React - (8) 컴포넌트 반복 렌더링

ToDo 서비스는 여러개의 메모를 같은 형식으로 보여줘야한다.
하나의 컴포넌트를 반복문을 사용해서 나타내는 방법을 알아보자.

ToDoList 컴포넌트 생성

메모의 레이아웃이 되는 컴포넌트를 생성하고, App 컴포넌트에서 불러오자.
배열 todos 는 화면에 나타날 예시 데이터이다.

// ToDoList.js
import React from 'react' 
const ToDoList = () => {
  const todos = [
    {
      id: 1,
      content: "내용 1"
    },
    {
      id: 2,
      content: "내용 2"
    },
    {
      id: 3,
      content: "내용 3"
    }, 
  ];

  return (
    <div> 
    </div>
  )
}


export default ToDoList

// App.js
import ToDoList from "./ToDoList";

function App() {
  return (
    <div>
      <ToDoList />
    </div>
  );
}

Item 컴포넌트 생성

실제로 메모의 내용을 보여줄 컴포넌트를 생성하자.

// ToDoList/Item.js
import React from 'react'

const Item = ({ item }) => {
  return (
    <div>
      <h3>{item.id} - {item.content}</h3>
    </div>
  )
}

export default Item

배열 렌더링

배열 메서드 map 을 사용해서 Item 컴포넌트를 배열의 길이만큼 생성하자.

// ToDoList.js
return (
  <div>
    {
      todos.map(todo => (
        <Item item={todo} />
      ))
    }
  </div>
)

결과를 확인해보면 내용이 모두 나오는 것을 확인할 수 있다.
하지만 개발자도구 - 콘솔 을 확인하면

index.js:1 Warning: Each child in a list should have a unique "key" prop.

라는 에러 문구를 확인할 수 있다.
리액트에서는 배열을 렌더링 하기위해서는 key props 를 설정해야하기 때문이다.
key 는 배열의 각 원소들이 모두 가지는 고유값 이여야만 한다.
이번 예제에서는 id 를 key 로 설정해보자.

{
  todos.map(todo => (
    <Item item={todo} key={todo.id} />
  ))
}

코드를 수정 후 확인해보면 에러 문구가 나타나지 않는 것을 알 수 있다.

key

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
출처 : 공식문서

리액트에서는 key 를 이용해서 좀 더 효율적인 리렌더링 작업을 수행하기 때문에 key 가 필수이다.
만약 설정하지 않으면 배열의 인덱스가 key 로 들어가게 된다.
더 자세한 사항은 공식문서를 참고하자