[웹 포트폴리오 만들기] 2편 - NEXT 로딩화면 구현하기

사이트에 접속했을때 로딩되는 모습이 그대로 보이는게 별로였다.

그래서 처음 들어왔을때 로딩화면이 사이트를 가리고있다가 로딩이 끝나면 올라가는 형식으로 만들기로 했다.

간단하게 구현할거라고 생각했는데 많이 헤맸다....

일단 NEXTJS에서 로딩을 구현하는 방법이 여러가지인데

첫번째로 loading.tsx를 써서 구현하려했다.

loading.tsx로 구현

loading.tsx는 page.tsx, layout.tsx 와 같이 Next.js의 특수파일이다.

그냥 app폴더에 loading.tsx 파일을 두면 되기에 제일 편한 방법이다.

그런데

이 경우에는 모든 로딩상황에서 해당 컴포넌트가 나오기때문에 다른 방법을 찾아야했다.

난 초기 로딩만 만들려고 한건데 이미지나 아이콘 로딩이 스크롤 도중에 생겼기때문...

import React from "react";
import styles from "../styles/loading.module.css";

export default function Loading() {
  return (
    <>
      <div className={styles.loader}>
        <img src="assets/loading.png" />
      </div>
    </>
  );
}

Suspense

react의 suspense와 fallback를 이용한 방법도

loading.tsx로 구현한 것과 똑같았다.

useState

결국 useState로 구현했다.

useState로 로딩 상태를 만들고 그 상태값이 true인 경우에만 화면에 로딩창이 보이도록 만들었다.

"use client";
import { useEffect, useState } from "react";
import Header from "../components/header";
import "../styles/global.css";
import Loading from "./loadingWindow";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [isloading, setisLoading] = useState(true);

  useEffect(() => {
    setisLoading(false);
  }, []);
  return (
    <html lang="en">
      <body>
        <Loading isloading={isloading} />
        <Header />
        {children}
      </body>
    </html>
  );
}

이게 저 초기로딩창을 구현하는 제대로된 방법인지는 잘모르겠으나.. 일단 이 문제 때문에 며칠간 고민했는데

어찌하든 내 의도대로 로딩창을 결국 만들어내서 약간 뿌듯하다....

혹시나 나와 비슷한 고민을 하고있는 사람들을 위해 글을 썼다..

'PROJECT' 카테고리의 다른 글

[웹 포트폴리오 만들기] 6편 - 모바일 반응형 구현과 ..최종 완성 (0)	2024.05.31
[웹 포트폴리오 만들기] 5편 - next로 모달 라우팅 구현하기 (0)	2024.05.21
[웹 포트폴리오 만들기] 4편 - fullpage 구현하기 (0)	2024.05.20
[웹 포트폴리오 만들기] 3편 - 디자인 갈아엎기 (0)	2024.05.07
[웹 포트폴리오 만들기] 1편 - 디자인 구상하기 (1)	2024.04.12

우사기 코딩 블로그

[웹 포트폴리오 만들기] 2편 - NEXT 로딩화면 구현하기

'PROJECT' 카테고리의 다른 글

티스토리툴바

[웹 포트폴리오 만들기] 2편 - NEXT 로딩화면 구현하기

'PROJECT' 카테고리의 다른 글

관련글

티스토리툴바