NextJS의 핵심기능과 장점(2)

● 파일 기반 라우팅이란

• 기존의 React에는 라우터가 아예 없다.
• 라우팅이란 사용자에게 여러 개의 페이지가 있는 듯한 착각을 불러일으키는 것으로 탐색하며 페이지를 로드하는게 라우터의 역할임. 일반적으로 React Router를 사용한다. 
• 라우터는 URL을 확인해 URL이 변경될 때 브라우저가 요청을 서버로 보내는 기본 동작을 방지하고, 그 대신에 React를 통해 페이지 상에 다른 콘텐츠를 렌더링한다. 즉, 다른 컴포넌트를 보여주는 것으로 라우팅이다. 서버에 추가 요청을 보내지 않고도 URL에 기반해 화면에 나타나는 내용을 변경하는 것이다. 일반적으로, React를 통해 구축되는 SPA 상에 계속 머무르고 있는 것이다.
• React를 사용하면 라우팅은 통상적으로 코드에 설정되게 된다.

• React Router도 훌륭한 패키지이만 별도의 코드를 따로 작성해야 한다. 그리고 개별 폴더에 페이지로서 작동하는 컴포넌트를 저장하는데 이 컴포넌트가 코드 내에서 라우트 설정을 모방한다고 볼 수 있다. 페이지와 코드로 설정된 페이지가 있다면 페이지 폴더에 페이지 컴포넌트가 있다.

• 하지만 NextJS로는 이런 코드 내 라우트 정의를 사용할 필요가 없다.NextJS를 사용하면, 파일과 폴더에 페이지와 라우트를 정의하게 됨. NextJS앱에는 이름이 pages라고 설정되어야만 하는 폴더가 있다. 페이지가 지원하는 라우트(Route)와 경로(Path)를 정의하는 이 폴더를 구조화하게 됨. 이를 통해 추가적인 코드를 작성하지 않아도 되니 작업이 간결해진다. 그러면서도 NextJS는 우리에게 필요한 중첩 라우트, 혹은 동적 매개변수를 샤용하는 동적 라우트 등을 모두 지원한다.

 

 

2023.11.23 - [Front-End/NextJs] - NextJS의 핵심기능과 장점(3)

NextJS의 핵심기능과 장점(3)