React 시작하기 8. Array Rendering

 

App.js

import React from 'react';
import UserList from './UserList';

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

export default App;

 

 

UserList.js

import React from "react";

// * 한개의 파일 내에서 여러 Component를 선언해도 문제 X

// User 정보 출력
function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  )
}

// User 리스트를 모두 출력
function UserList() {
  // 유저 정보
  const users = [
    {
      id: 1,
      username: 'UserA',
      email: 'usera@gmail.com'
    },
    {
      id: 2,
      username: 'UserB',
      email: 'userb@gmail.com'
    },
    {
      id: 3,
      username: 'UserC',
      email: 'userc@naver.com'
    }
  ];

  return (
    <div>
      {/* React에서 동적 배열을 렌더링 하는 경우 map함수를 사용. (리액트 엘리먼트로 이루어진 배열로 변환) */}
      {/* Rendering의 효율성을 위해 key값을 배정 */}
      { users.map((user) => ( <User user={user} key={user.id} /> )) }
    </div>
  );
}

export default UserList;