20.4.7 User, UserContainer 컴포넌트 준비하기

이제 특정 사용자의 정보를 보여 줄 User 컴포넌트를 만들어 보겠습니다.

components/User.js

import React from 'react';

const User = ({ user }) => {
  const { email, name, username } = user;
  return (
    <div>
      <h1>
        {username} ({name})
      </h1>
      <p>
        <b>e-mail:</b> {email}
      </p>
    </div>
  );
};

export default User;

---

 

이전에 만들었던 Users 컴포넌트에서는 users 값이 null인지 배열인지 확인하는 유효성 검사를 해 주었던 반면, 위 User 컴포넌트에서는 user 값이 null인지 객체인지 확인하는 유효성 검사를 해 주지 않았습니다. 컨테이너 컴포넌트에서 유효성 검사를 할 때는 어떻게 해야 하는지 알아보겠습니다.