코딩애플 - 예외적인 페이지들

loading.js

로딩 중 UI를 만들 때 해당 라우터 폴더 안, page.js 옆에 loading.js 파일을 만들어주면

자동으로 페이지 이동 시 로딩이 필요할 때 화면에 노출된다.

서버 컴포넌트 뿐만 아니라 클라이언트 컴포넌트로도 가능하며

 

리액트의 Suspense 컴포넌트로 감싸주면 가능한 것을

Next.js 에선 정해진 파일명을 만들어줌으로써 Suspense 없이도 가능하게끔 해준다.

<Suspense fallback={<h2>로딩 컴포넌트 내용</h2>}>
	// 보여줄 페이지 내용
</Suspense>

 

Suspense 컴포넌트

• Suspense 컴포넌트로 감싸주면, 컴포넌트의 렌더링을 특정 작업 이후로 미루고 그 작업이 끝날 때까지 fallback 속성으로 넘겨준 컴포넌트를 대신 보여준다!
• useEffect 와 setTimeout, useState-loading 으로 처리해주던 작업을 간편화할 수 있게 된 것임

  useEffect(() => {
    fetch(`url`)
      .then((response) => response.json())
      .then((user) => {
        setTimeout(() => {
          setUser(user);
          setLoading(false);
        }, 3000);
      });
  });

 

 

error.js

서버나 DB가 죽어버릴 때 처리해줄 에러 페이지

page.js 옆에 error.js 컴포넌트를 만들어주면 에러가 발생했을 때 자동으로 보여주게 된다.

서버 컴포넌트X -> 클라이언트 컴포넌트만 가능!

'use client'
import React from 'react'

export default function Error({error, reset}) {
  return (
    <div>
    	<h4>{error}</h4>
        <button onClick={() => reset()}>새로고침</button>
    </div>
  )
}

props 로는 error와 reset 을 받아올 수 있음

• error : 어떤 에러인지 정보가 담겨있음
• reset : 페이지를 새로고침 처리해주는 함수

 

다만 error.js 는 임시방편이고 서버딴에서 if문 처리를 하여 예외처리를 해놓는게 정석이다.

error.js 의 한가지 이점은 페이지 전체를 에러처리 해주는 것이 아닌, page.js 의 부분만 에러처리를 해주므로 옛날 웹사이트처럼 페이지 전체가 다운되지 않는다. (단, latout.js 의 에러는 체크 못하므로 ---> global-error.js 를 만들어줘서 에러를 체크한다!)

 

에러가 났는데 page.js 옆에 error.js 가 없으면 상위폴더로 이동하면서 error.js 를 찾기 시작하며 계층 상위로 올라간다.
이는 loading.js 도 동일하게 작동된다.

 

 

not-found.js

404 에러, Next.js 는 잘못된 url 일 때 아래처럼 사전에 페이지가 설정된 것이 보이게된다.

다만 게시글의 id 쿼리스트링, dynamic router 같은 경우... DB에서 해당 정보를 읽어오지 못할 때 잘못된 url 처리가 되지 않으므로

error.js 가 실행되게 되는데 이때 not-found.js 파일을 만들어주고 DB 같은 곳에서 id가 달라서 정보를 못 가져왔을 때

export default function NotFound() {
  return (
    <div>Not Found - 404</div>
  )
}

  if(commentList === null) {
  	// 1 직접 작성
  	return <div> 없는 페이지 html </div>
    
    // 2 컴포넌트 사용
    return notFound();
  }
  // notFound() 함수를 사용하면 자동으로 not-found.js 가 보여진다.