Defining Routes

영어공부도 할겸, 나만의 언어로 바꾸면서 나중에 잊어버릴때마다 찾아볼겸 겸사겸사 작성하는 글입니다.
따라서 오타 및 오역이 있을 수 있으며, 글의 구조가 공식문서와 약간씩 다를 수 있습니다.

 

Defining Routes

route(경로)를 어떻게 정의하는지, routes(경로들)어떻게 조직할 것인지 알려주는 글입니다.

 

Defining Routes

Next.js는 폴더를 사용하여 경로를 정의하는 파일 시스템 기반 라우터를 사용합니다. 

각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타냅니다. 중첩된 경로를 만들려면 폴더를 서로 중첩할 수 있습니다.

page.js(타입스크립트라면 ts확장자)파일이 route경로로 접근 가능하도록 만들어줍니다.

 이미지가 직관적이므로 이해가 쉽지만, 이런식의 접근방식(파일명이 기능에 영향을 미친다는 점)이 다소 난해할 수 있기때문에 다시 풀어 설명해보겠다.

 app폴더안에"이름아무거나"라는 폴더가 있다면 그 안에 page.js(jsx or ts or tsx)이 주소창에 입력될 path역할을 하는 것이다.만약 "이름아무거나"라는 폴더가 있어도 그 안에 page.js(jsx or ts or tsx)이 없거나, pages.js 혹은 Pages.ts와 같이 이름컨벤션을 지키지 않을시에는 주소창에 입력될 path역할을 수행하지 못하므로 이는 중요하게 기억하고 넘어가야할 부분이다.

 Next.js에서는 이런식의 파일명을 통해 특정기능을 수행하도록 Special file conventions를 정의해놓았는데 궁금하다면 한번 참고해보길 바란다. 참고로,  파일명만 page.js와 같은식으로 작성하면 되고, 함수명 - 컴포넌트명은 팀원간의 컨벤션만 유지시킨다면 아무렇게나 작성해도 된다.

 

아래는 내가 두달 전 프로젝트때 만들었던 컴포넌트이다.

파일명은 page.tsx이지만, 그 파일안에 작성된 컴포넌트명은 "ReservationPage"이다. 파일명에 주의하자.