4. 라우트 그룹

앞선 페이지에서 알아보았던 라우트 그룹에 대해 좀 더 정리해보았다.

 

라우트 그룹

일반적으로 App 폴더 하위에 폴더를 생성하는 경우 라우팅 경로 계산 시 포함이 된다. 하지만 그룹을 사용하게 되면 이 경로 계산 시 제외되게 된다. 이로써 폴더를 사용해 논리적 그룹을 구성할 수 있게 된다. 사용방법은 폴더 이름을 괄호로 감싸 준다. 예. (foldername)

 

활용 방법은 다음과 같다.

• 라우팅 경로에 포함되지 않으면서 경로들에 대한 논리적 그룹을 지정하고 싶을 때
• 다른 경로에 동일한 레이아웃, 로딩 등을 구성하고 싶을 때

 

논리적 그룹을 구성

경로에 포함되지 않으면서 논리적으로 폴더들을 구성하고 싶을 수 있다. 이러한 경우 그룹을 활용하면 된다.

ㄴapp
  ㄴ(markgeting)
    ㄴabout
    ㄴblog
  ㄴ(shop)
    ㄴaccount
    ㄴbank

 

다른 경로에 동일한 레이아웃 구성

예를 들어 로그인, 회원가입과 기타 다른 페이지들끼리 레이아웃이 다른 경우를 종종 볼 수 있다. 로그인, 회원가입에 하나의 레이아웃을, 나머지 페이지들에도 하나의 레이아웃을 구성하고 싶을 수 있다.

 

이때 그룹을 활용해 볼 수 있다. 아래와 같이 동일한 레이아웃을 구성하고 싶은 경로끼리 그룹으로 묶어주고 그룹 폴더 하위에 layout.js 파일을 만들어주면 된다.

ㄴapp
  ㄴ(auth)
    ㄴlogin
    ㄴjoin
    ㄴlayout.js
  ㄴ(common)
    ㄴboard
    ㄴintro
    ㄴlayout.js

 

레이아웃뿐 아니라 그룹안에 loading.js 파일을 생성한다면 동일 그룹에 동일 로딩 효과를 줄 수 있다.

✨ 최상위 레이아웃을 제거하고 각 그룹안에 레이아웃을 루트 레이아웃으로 활용할 수 있다. 이땐 html, body를 사용해야 한다.