Nextjs vs React (Routing 관점에서)

NextJS 14 App Router 기준으로 작성하였습니다.

 

 

동기

최근 nextjs를 사용하면서 편리함을 많이 느끼고 있습니다. 기존 React와 비교했을 때 Nextjs는 프레임워크다 보니 자동으로 생성되는 기능이 많고, Nextjs에서 정해놓은 규칙만 따라서 코딩하면 쉽게 개발을 할 수 있었습니다. Nextjs를 사용하면서 기존 React와의 차이점을 Routing 관점에서 정리하고자 글을 작성하게 되었습니다.

 

 

---

 

React

리액트는 프레임워크가 아닌 UI 라이브러리기 때문에 라우터를 제공하지 않습니다. 따라서 흔히 react-router-dom 패키지를 설치해서 사용합니다.

 

<Route exact path="/" component={Home} />

React에서는 위와 같은 방식으로 라우팅을 구성하는데, 특정 url에 접근하면 특정 컴포넌트가 렌더링 되는 방식으로 구조를 설계했습니다. 개발자가 직접 라우터에 대한 코드를 작성했어야하고, 이 방법은 매우 수동적이고 실수도 잘 발생할 수 있다고 생각합니다. 

 

Dynamic Routes 

 <Route path="/blog/:id" component={BlogPost} />

리액트에서 동적 라우팅은 다음과 같이 작성할 수 있습니다. BlogPost컴포넌트에서 id값에 접근하기 위해서는 useParams, useLoacation과 같은 리액트 훅을 사용합니다. 

 

---

 

NextJS

Nextjs에서는 app폴더의 폴더들이 경로이고, page파일이 UI입니다. 

• 직접적인 page파일이 없는 폴더는 실제 페이지가 존재하지 않습니다. (경로의 일부로 존재함)
  • 예를들어, post/postDetail/page.tsx이면 /post/postDetail로 접속하면 page.tsx의 UI를 볼 수 있습니다. 이 경우 post디랙토리 안에 page.tsx가 존재하지 않기 때문에 post디랙토리는 경로를 만들기위해 만들어진 디랙토리입니다. 
• 또한 ()로 묶은 디랙토리는 경로에 포함되지 않고, 오직 그룹화하기 위한 목적입니다.
  • 예를들어, (blog)/blogs/blogDetail/page.tsx일 때 '/blogs/blogDetail' url로 접속하면 page의 UI를 볼 수 있고, (blog)디랙토리는 오직 관심사가 유사한 데이터를 그룹화하기위한 목적으로 사용되었습니다. 

즉 간단하게 말하면, 사용자가 url로부터 보게 될 요소는 page파일입니다. 

 

 

 

또 Nextjs의 앱라우터 구조에서는 특이한 파일들이 있습니다. 

• page.tsx: 이 파일을 통해서만 UI를 볼 수 있습니다. 즉, 페이지 파일을 통해 실제 UI를 렌더링합니다.
• layout.tsx: 레이아웃 컴포넌트는 먼저 방문되고, 컴포넌트가 렌더링된 후 URL을 확인하고 해당 URL에 해당하는 페이지 파일을 렌더링합니다. 따라서, URL에 해당하는 페이지 파일을 렌더링하기 전에 레이아웃이 먼저 렌더링되는 것입니다. 또한 그 페이지의 직계 부모로 동작하며, 중첩될 수 있다.
• not-found.tsx: not-found.tsx 파일은 경로가 없는 모든 요청에 대한 UI를 보여줍니다. 즉, 존재하지 않는 경로에 대한 페이지를 표시하는 역할을 합니다.
• error.tsx: 동일한 폴더에 error.tsx 파일을 추가하면, 에러가 발생할 때 해당 파일에 작성된 화면이 표시됩니다. 이는 페이지가 작동하지 않아도 에러 화면을 보여줌으로써 어플리케이션을 계속 작동시킬 수 있게 합니다. Next.js 앱 라우터에서 사용되는 파일입니다.

 

Dynamic Routes

Nextjs에서 동적라우팅은 []가 들어간 폴더를 만들면 해당 url로 동적라우팅이 생성됩니다. 

• ex) post/[id]/page.tsx → /post/123 에서 화면이 보여집니다.

useRouter를 이용하여 동적 세그먼트에 접근할 수 있습니다. 

 

 

---

정리

따라서, React는 외부 라이브러리인 React Router를 사용하여 클라이언트 사이드 라우팅을 구현하고, Next.js는 내장된 파일 시스템 기반의 라우팅 시스템을 제공하여 URL과 페이지를 매핑합니다.

Next.js의 라우팅은 파일 시스템 기반으로 작동하기 때문에 간단하고 직관적인 구조를지고 있습니다. 페이지를 생성하기 위해 파일을 생성하면 자동으로 경로와 매핑되기 때문에 개발자가 별도의 라우팅 설정을 하지 않아도 됩니다. 하지만 파일 시스템 기반으로 작동하기 때문에 복잡한 라우팅 구조를 가진 프로젝트에서는 관리가 어려울 수 있습니다.