더북(TheBook)

20.4.2 Users, UsersContainer 컴포넌트 준비하기

이제 사용자에 대한 정보를 보여 줄 컴포넌트를 준비하겠습니다.

components 디렉터리에 Users 컴포넌트를 다음과 같이 만들어 보세요.

components/Users.js

import React from 'react';
import { Link } from 'react-router-dom';

const Users = ({ users }) => {
  if (!users) return null; // users 유효하지 않다면 아무것도 보여 주지 않음
  return (
    <div>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.username}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Users;

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.