추가로 중복 요청을 방지하는 과정에서 user 값이 존재하는지 확인하고, id가 일치하는지도 확인했습니다. id 값은 추후 URL 파라미터를 통해 받아 오기 때문에 문자열로 이루어져 있습니다. 반면 user 객체 안에 들어 있는 id는 숫자 형태입니다. 그러므로 이 두 값을 비교할 때는 props로 받아 온 id 값을 parseInt를 사용하여 숫자로 변환해 준 다음에 비교해야 합니다.

컨테이너 컴포넌트를 다 만들었다면 UsersPage 컴포넌트에서 렌더링해 보겠습니다.

pages/UsersPage.js

import React from 'react';
import UsersContainer from '../containers/UsersContainer';
import UserContainer from '../containers/UserContainer';
import { Route } from 'react-router-dom';

const UsersPage = () => {
  return (
    <>
      <UsersContainer />
      <Route
        path="/users/:id"
        render={({ match }) => <UserContainer id={match.params.id} />}
      />
    </>
  );
};

export default UsersPage;

---