[Next.js] Navigation part.3, Template, Loading, Error

Navigating programmatically

지금까지와는 다르게 코드를 사용해서 navigation을 사용하는 방법입니다.

 

useRouter와 redirect를 이용한 방법입니다.

 

1. useRouter hook

사용할 때 주의할 사항을 'next/navigation'에서 가져온다는 점입니다. 이전에는 'next/router'에서 가져와서 사용했기 때문에 주의해야 합니다. 또한 클라이언트 컴포넌트에서만 사용할 수 있다는 점입니다.

'use client';

import { useRouter } from 'next/navigation';

export default function Test() {
  const router = useRouter();
  const handleClick = () => {
    router.push('/');
    // 이외에도
    router.back(); // 뒤로가기
    router.replace('/'); // Link의 replace 옵션과 동일
    router.refresh(); // 새로고침
    router.forward(); // 다음 페이지
  }
  
  return <button onClick={handleClick}> Move Home </button>;
}

 

2. redirect

redirct 시키는 함수입니다. redirect는 사용자가 처음 요청한 URL이 아닌 다른 URL로 보내는 것을 의미합니다.

import { redirect } from 'next/navigation';

export async function Test({params}:{ Promise<{id:string}>) {
  const {id} = await params;
  
  if(id > 100) {
    redirect('/');
  }
  
  return <h1> ID: {id} </h1>;
}

 

Template

layout과 유사하게 template.js 혹은 tempalte.tsx 내부에서 children을 통해 기존 컴포넌트들에게 틀을 제공합니다.

 

layout의 경우 경로 간에 지속되고 상태를 유지합니다. 예를 들어 useState를 사용해서 상태를 작성한다면 같은 layout 내부에서는 경로가 달라져도 상태가 유지됩니다.

 

template의 경우 새로운 경로로 이동하면 children의 새로운 인스턴스를 생성합니다. 이 말은 layout과 달리 탐색할 때마다 children의 새 인스턴스가 마운트 되고, DOM이 재생성되며, 상태가 초기화되고 이펙트(useEffect)가 재동기화됩니다.

 

또한 template은 layout과 중첩해서 사용할 수 있습니다. 중첩해서 사용하는 경우에는 layout 아래 template 그 아래 children이 있는 형태로 생각하면 됩니다.

 

Loading UI

loading.tsx 페이지를 생성하고 해당 페이지에 로딩 화면 UI를 구현하면 됩니다.

로딩 화면을 보여주게 되면 사용자는 화면이 동작하고 있다는 것을 인지할 수 있기 때문에 UX 측면에서 좋습니다.

 

Error Handling

에러마다 처리되는 화면 UI를 구현하는 것은 중요합니다. 그래야 어떤 에러가 발생했는지 대처 방법은 있는지 사용자에게 안내해 줄 수 있기 때문입니다.

 

해당 파트에서 말하는 에러는 Uncaught Exceptions를 의미합니다.

 

error.tsx 페이지를 생성하고 UI를 구현할 수 있습니다. 해당 컴포넌트는 클라이언트 컴포넌트이고, error와 reset 파라미터를 가지고 있습니다.

'use client'; // 클라이언트 컴포넌트

export default function ErrorBoundary({ error, reset }: {
  error: Error;
  reset: () => void;
}) {
  return (
    <>
      <div> error.message </div>
      <button onClick={() => reset()}> reset </button>
    </>
  );
}

 

현재까지 계층구조

<Layout> // layout.tsx
  <Template> // template.tsx
    <ErrorBoundary fallback={<Error />}> // error.tsx
      <Suspense fallback={<Loading />}> // loading.tsx
        <ErrorBoudary fallback={<NotFound />}> // not-found.tsx
          <Page /> // page.tsx
        </ErrorBoudary>
      </Suspense>
    </ErrorBoundary>
  </Template>
</Layout>

 

참고

https://nextjs-ko.org/docs/app/building-your-application/routing/loading-ui-and-streaming

https://nextjs-ko.org/docs/app/building-your-application/routing/layouts-and-templates#%ED%85%9C%ED%94%8C%EB%A6%BF

https://nextjs-ko.org/docs/app/api-reference/functions/use-router

https://nextjs-ko.org/docs/app/building-your-application/routing/redirecting

https://www.youtube.com/watch?v=b4ba60j_4o8&list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY