라우팅
"http://a.com/dashboard/analytics/"라는 주소가 있을 때, "/dashboard/analytics/" 부분을 'path'라고 한다. 그리고 'dashboard'와 'analytics'는 각각 'segment'라고 부른다.
이 때 사용자가 접속한 URL의 path에 따라서 콘텐츠를 응답해주는 작업을 라우팅이라고 한다. 어떤 프레임워크든 그 중심에는 반드시 라우팅이 있다. 이것은 웹개발의 가장 중요한 요소 중 하나다.
이제 NextJS에서 라우팅을 다뤄보자.
우선 처음에 프로젝트를 만들었을 때 app폴더 안에 layout.js와 page.js가 있는것을 확인할 수 있다. 저기있는 layout.js 파일이 웹페이지의 기본적인 골격을 가리킨다. 그리고 그 layout안에 있는 {children} 코드 위치에 page.js에 작성한 컨텐츠가 위치하게 된다. 따라서 위처럼 코딩하면 오른쪽에 있는 옹졸한 페이지가 완성된다.
이는 http://localhost:3000/ 즉 path가 없을 때의 구성이고 이제 저기에 있는 각 a태그에 라우팅 기능을 부여해보자.
절차
-
app폴더 안에 세그먼트와 같은 이름의 폴더를 만든다. 예를 들어 http://localhost:3000/create 로 갔을 때의 페이지를 만들려면 app 폴더 안에 create 폴더를 만든다.
-
그 다음, create/page.js 파일을 생성한다.
-
그리고 http://localhost:3000/create 로 접속하면
위와 같이 정상적으로 페이지가 출력된다.
즉 app 폴더 안의 폴더들은 세그먼트를 의미하고 해당 폴더에 page.js 파일이 있다면 그 파일의 반환값을 화면에 출력한다.
만약 app/layout.js를 이용하여, app/create/page.js를 감싸는 하위 레이아웃을 만들고 싶다면, create 폴더 내에 새로운 layout.js 파일을 만들면 된다.
위 처럼 app/create/layout.js가 있다면, 이 파일로 app/create/page.js를 포장한 후에 app/layout.js로 포장한다. 이는 레이아웃의 중첩을 허용한다.
NextJS는 URL 경로의 세그먼트에 따라 콘텐츠를 찾고, 해당 콘텐츠가 위치한 폴더의 layout.js를 시작으로 상위 폴더를 탐색하면서 layout.js로 감싸준다. 이는 NextJS의 라우팅 로직을 잘 나타내는 특징이다.
이런 방식으로 Next.js는 간단하고 직관적인 라우팅을 제공하며, 프로젝트의 복잡성을 효과적으로 관리할 수 있도록 도와준다.
