React.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} />
      ))}
    </div>
  );
}

export default UserList;

 

배열 에 담긴 변수들을 컴포넌트에 props로 넣어주려 할 때 map함수를 쓰면 깔끔하게 여러개의 컴포넌트에 각기 다른 props를 넣어주고 선언할 수 있다.