React useSSR Hook

소개

이 랩에서는 React 에서 useSSR 훅의 사용법을 살펴봅니다. 이 훅을 사용하면 코드가 브라우저에서 실행되는지 서버에서 실행되는지 확인할 수 있으며, 작업자 (worker), 이벤트 리스너 (event listener), 뷰포트 (viewport) 의 가용성과 같은 환경에 대한 추가 정보를 제공합니다. 이 랩을 마치면, 서로 다른 환경에 최적화된 React 코드를 작성하는 방법에 대한 이해도가 높아질 것입니다.

React useSSR 훅

index.html과 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js와 style.css에만 코드를 추가하면 됩니다.

코드가 브라우저에서 실행되는지 서버에서 실행되는지 확인하려면, typeof, Window, Window.document, 그리고 Document.createElement()를 사용하여 DOM 의 가용성을 판단하는 사용자 정의 훅을 만듭니다. useState() 훅을 사용하여 inBrowser 상태 변수를 정의하고, useEffect() 훅을 사용하여 이를 업데이트하고 종료 시 정리합니다. useMemo() 훅을 사용하여 사용자 정의 훅의 반환 값을 메모이제이션 (memoization) 합니다.

다음은 코드입니다:

const isDOMavailable = !!(
  typeof window !== "undefined" &&
  window.document &&
  window.document.createElement
);

const useSSR = () => {
  const [inBrowser, setInBrowser] = React.useState(isDOMavailable);

  React.useEffect(() => {
    setInBrowser(isDOMavailable);
    return () => {
      setInBrowser(false);
    };
  }, []);

  const useSSRObject = React.useMemo(
    () => ({
      isBrowser: inBrowser,
      isServer: !inBrowser,
      canUseWorkers: typeof Worker !== "undefined",
      canUseEventListeners: inBrowser && !!window.addEventListener,
      canUseViewport: inBrowser && !!window.screen
    }),
    [inBrowser]
  );

  return useSSRObject;
};

const SSRChecker = (props) => {
  const { isBrowser, isServer } = useSSR();

  return <p>{isBrowser ? "Running on browser" : "Running on server"}</p>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<SSRChecker />);

오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음, Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! React useSSR Hook 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.