11. 배열 렌더링하기

출처 - 벨로퍼트

https://react.vlpt.us/basic/11-render-array.html

 

리액트에서 배열을 렌더링 할 때에는 key 라는 props를 설정해야한다.

key 값은 각 원소들마다 가지고 있는 고유의 값으로 설정을 해야하는데 아래의 경우에는 id 이다.

UserList.js

import React from 'react';

// {user} : props를 통해 컴포넌트에 값 전달
function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];

  return (
    <div>
      {users.map(user => (
        <User user={user} key = {id} />
      ))}
    </div>
  );
}

export default UserList;

만약 배열 안의 원소가 가지고 있는 고유한 값이 없다면 map 함수(배열 내장함수)를 사용할 때 설정하는 콜백함수의 두번째 파라미터 index 를 key 로 사용

key 가 있어야만 하는 이유는 배열이 업데이트 될 때 효율적으로 렌더링하기 위함