[TIL] React/Next 로딩 화면 및 클립보드 구현

[TIL] React/Next 로딩 화면 및 클립보드 구현

날짜

• 2022.06.29.

목표

• 로딩 및 클립보드 기능 구현

내용

Next.js - 로딩 화면 구현

// _app.tsx
import Router from "next/router";
import {useState, useEffect} from 'react'

export default function App({ Component, pageProps }) {
  const [loading, setLoading] = useState(false);

  const start = () => {
    setLoading(true);
  };
  const end = () => {
    setLoading(false);
  };

  useEffect(() => {
    Router.events.on("routeChangeStart", start);
    Router.events.on("routeChangeComplete", end);
    Router.events.on("routeChangeError", end);
    return () => {
      Router.events.off("routeChangeStart", start);
      Router.events.off("routeChangeComplete", end);
      Router.events.off("routeChangeError", end);
    };
  }, []);
  return (
    <>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <Component {...pageProps} />
      )}
    </>
  );
}

React - copy clipboard

...
return(
    <button onClick={(e) => {
                **navigator.clipboard.writeText(userInfo.address);**
              }}
  >복사하기</button>
);
...

• 참조

Navigator - Web API | MDN

결론

• React/Next로 프로젝트를 진행하면서 로딩 화면 및 클립보드를 구현하면서 최적화 작업을 진행했다.