리엑트 입문 6 - 배열 랜더링하기

리엑트에서 여러개의 데이터를 랜더링이 필요할 때가 있습니다.
다음과 같이 users 배열이 3개로 이루어져 있을때 map 내장함수를 통해 랜더링 할 수 있습니다.

이때 props로 key값이 필수로 들어가야 하며, key 값은 고유한 값이여야 합니다.

UserList.js

import React from 'react';

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={user.id} />
      ))}
    </div>
  );
}

export default UserList;

참고 사항

key가 없을 경우

배열이 업데이트 될 때 key 가 없을 때 처럼 비효율적으로 업데이트 하는 것이 아니라, 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제하기 때문입니다.

참고자료 : https://react.vlpt.us/basic/11-render-array.html