usePreloader 함수는 Preloader 컴포넌트와 코드가 매우 유사합니다. 컴포넌트가 아닌 그냥 함수일 뿐이죠. 이 Hook을 UserContainer 쪽에서 사용해 봅시다.

containers/UserContainer.js

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

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

  usePreloader(() => dispatch(getUser(id))); // 서버 사이드 렌더링을 할 때 API 호출하기
  useEffect(() => {
    if (user && user.id = = = parseInt(id, 10)) return; // 사용자가 존재하고, id가 일치한다면 요청하지 않음
    dispatch(getUser(id));
  }, [dispatch, id, user]); // id가 바뀔 때 새로 요청해야 함

  if (!user) return null;
  return <User user={user} />;
};

export default UserContainer;

---