20.4.9 usePreloader Hook 만들어서 사용하기

    지금까지 만든 컨테이너 컴포넌트에서는 Preloader 컴포넌트를 사용하여 서버 사이드 렌더링을 하기 전 데이터가 필요한 상황에 API를 요청했습니다.

    이번에는 usePreloader라는 커스텀 Hook 함수를 만들어서 이 작업을 더욱 편하게 처리해 보겠습니다.

    lib/PreloadContext.js

    import { createContext, useContext } from 'react';
    
    // 클라이언트 환경: null
    // 서버 환경: { done: false, promises: [] }
    const PreloadContext = createContext(null);
    export default PreloadContext;
    
    // resolve는 함수 타입입니다.
    export const Preloader = ({ resolve }) => {
      const preloadContext = useContext(PreloadContext);
      if (!preloadContext) return null; // context 값이 유효하지 않다면 아무것도 하지 않음
      if (preloadContext.done) return null; // 이미 작업이 끝났다면 아무것도 하지 않음
    
      // promises 배열에 프로미스 등록
      // 설령 resolve 함수가 프로미스를 반환하지 않더라도, 프로미스 취급을 하기 위해
      // Promise.resolve 함수 사용
      preloadContext.promises.push(Promise.resolve(resolve()));
      return null;
    };
    
    // Hook 형태로 사용할  있는 함수
    export const usePreloader = resolve => {
      const preloadContext = useContext(PreloadContext);
      if (!preloadContext) return null;
      if (preloadContext.done) return null;
      preloadContext.promises.push(Promise.resolve(resolve()));
    };

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