컨테이너 컴포넌트를 다음과 같이 만들어 보세요. API를 요청할 때 사용할 id 값은 props를 통해 받아 오겠습니다. 이번에는 connect 함수를 사용하지 말고, useSelector와 useDispatch Hooks를 사용해 봅시다.

containers/UserContainer.js

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import User from '../components/User';
import { Preloader } from '../lib/PreloadContext';
import { getUser } from '../modules/users';

const UserContainer = ({ id }) => {
  const user = useSelector(state => state.users.user);
  const dispatch = useDispatch();

  useEffect(() => {
    if (user && user.id = = = parseInt(id, 10)) return; // 사용자가 존재하고, id가 일치한다면 요청하지 않음
    dispatch(getUser(id));
  }, [dispatch, id, user]); // id가 바뀔 때 새로 요청해야 함

  // 컨테이너 유효성 검사 후 return null을 해야 하는 경우에
  // null 대신 Preloader 반환
  if (!user) {
    return <Preloader resolve={() => dispatch(getUser(id))} />;
  }
  return <User user={user} />;
};

export default UserContainer;

---

 

컨테이너에서 유효성 검사를 할 때 아직 정보가 없는 경우에는 user 값이 null을 가리키므로, User 컴포넌트가 렌더링되지 않도록 컨테이너 컴포넌트에서 null을 반환해 주어야 합니다.

하지만 이번에는 서버 사이드 렌더링을 해야 하기 때문에 null이 아닌 Preloader 컴포넌트를 렌더링하여 반환하겠습니다. 이렇게 해 주면 서버 사이드 렌더링을 하는 과정에서 데이터가 없을 경우 GET_USER 액션을 발생시킵니다.