[NextJS] 20260405 Catch-all 라우팅 구성

주말이 끝나간다. 

내일 출근이 너무 너무 싫다.

출근이 싫지만 공부는 해야 한다.

 

너무 하기 싫을때는 반드시 해라.

 

퇴사한 녀석의 핸드폰에서 본 글귀를 잊지 못하겠다.

너무 하기 싫으니까 학습을 해야 할것 같다.

 

어려운 개념이 나오기 시작한다.

Catch-all 라우팅 구성이라...

총 두개의 구문이 있는것 같다.

[...folder], [[...folder]]

 

내가 이해한 바로는 모든 경로는 폴더를 만들어 주어야 한다.

하지만 동적 경로를 사용할수 있게 해주는것이 [slug] 동적 세그먼트이다.

동적 세그먼트가 있고, catch-all segment가 있고, optional catch-all segment가 존재하는 것으로 보인다.

 

. Catch-all Segments ([...folder])

대괄호 안에 점 세 개를 쓰는 전개 연산자(Spread Operator) 문법을 사용합니다.

• 파일명 예시: app/shop/[...slug]/page.js
• 작동 방식: /shop/shoes, /shop/shoes/nike, /shop/shoes/nike/v2 등 /shop 뒤에 오는 모든 경로를 이 페이지 하나가 잡아냅니다(Catch).
• 매개변수 형태: params는 배열 형태로 전달됩니다.
  • URL: /shop/clothes/tops → params: { slug: ['clothes', 'tops'] }

2. Optional Catch-all Segments ([[...folder]])

대괄호를 두 번 감싸면 해당 경로가 선택 사항이 됩니다.

• 파일명 예시: app/shop/[[...slug]]/page.js
• 차이점: 일반 Catch-all은 /shop 경로 자체는 인식하지 못하지만(404 발생), Optional은 /shop 경로까지 포함하여 처리합니다.
  • URL: /shop → params: { slug: undefined } (또는 빈 배열)
  • URL: /shop/shoes → params: { slug: ['shoes'] }

 

위 개념은 아직 정확히 이해는 못하겠다.

정리되면 다시 글을 보완하겠다.

 

[[...folder]]는 해당 page.js가 해당 라우트 이하 모두를 받아주는 형태라고 한다.

도메인/abcd/folder/2021/3/2

이런식으로 들어온다면, params값은 folder: [ '2021', '3', '2' ]와 같이 들어온다.

    const selectedYear = filter?.[0];

 

보통은 삼항 연산을 쓰는데, 이건 옵셔널 체이닝 문법이네..

filter가 undefined이거나 null일 경우에도 에러를 발생시키지 않고 undefined를 반환하는 문법

 

오늘은 여기까지 학습 결과를 작성한다.

 

상반기 내 NextJS 완료후 CSS로 넘어간다!!