holajjm

본 포스팅은 NomadCoders(노마드 코더)의 NextJS 강의를 기반으로 작성되었습니다.

[Automatic Routing]

page.jsx(tsx) UI 렌더링이 되는 파일이고, page.jsx(tsx) 파일을 갖고 있는 app 폴더의 하위 폴더는 NextJS의 Automatic Routing에 의해서 url 구조에 포함되게 된다.

라우팅이란?

웹 개발 영역에서 의미하는 라우팅이란 간단히 말해 페이지 이동을 의미한다. url에 "/login"과 같이 특정 경로를 입력했을 경우 로그인 페이지로 이동하는 과정이라고 보면 된다.

기존에 React를 사용해서 라우팅을 구현할 때에는 "react-router-dom"이라는 라우팅 패키지를 설치하여 원하는 라우팅 방식(ex/ BrowserRouter, HashRouter etc.)으로 컴포넌트 별로 라우팅 구조를 설정하였다.

하지만 NextJS에서는 앞서 말한 라우팅을 별도의 설치 없이 자동적으로 폴더 구조에 따라 적용을 해준다. Next13 버전으로 업데이트 되면서 root에 "app" 폴더를 생성하여 내부에 폴더를 생성하면 생성한 폴더의 이름에 맞게 자동으로 라우팅 구조가 형성된다.

예를 들어, root 폴더인 "app"의 하위에 "login"이라는 이름으로 폴더를 생성한 후 그 하위에 "page.jsx(tsx)" 파일을 생성하면 자체적으로 url에 "/login"을 입력받으면 "login" 폴더 내부의 "page.jsx(tsx)" 파일의 내부 UI를 웹 브라우저에 렌더링해준다. 

간단히 보면 NextJS에서 폴더 구조는 url을 생성하고, page 파일은 UI를 그려주는 역할을 한다고 봐도 무방하다.

특정 폴더를 생성하여 url을 생성하도록 했지만 그 폴더 내부에 page 파일이 없다면 NextJS는 UI를 그려주는 파일이 없기 때문에 에러 페이지를 렌더링해준다. 따라서 자동으로 라우팅 기능을 구현해주는 부분은 정말 큰 장점이지만 NextJS는 프레임워크이기 때문에 프레임워크가 요구하는 방식에 맞지 않게 폴더나 파일을 생성한다면 오류 페이지를 맞이할 수 있다는 점을 주의해야 한다.

(추가적으로 에러 페이지에 해당하는 "not-found.jsx(tsx)"라는 파일도 root 폴더에 필수로 생성을 해주어야 하는데, 이 부분은 추후에 다루도록 하겠다.)

우리가 url 경로를 생성하기 위해 폴더를 생성하고 그 내부에 UI 렌더링을 위한 page 파일을 생성하였지만 렌더링을 위한 파일이 아닌 별도의 기능을 하는 컴포넌트를 만들기 위해 다른 폴더와 컴포넌트 파일을 만드는 경우도 분명 있을 것이다. page 파일은 UI 렌더링이 되는 파일이라고 해서 그 내부에 페이지 내부에 있는 모든 기능에 대한 컴포넌트를 작성할 수는 없을 것이다. 별도의 컴포넌트를 생성한 후 export 한 후 page 파일에서 import 해온 후 사용하는 방식을 사용할 것이다. 그 동작을 위해 폴더를 생성한 후 page가 아닌 특정 기능에 대한 이름으로 파일을 생성했을 때에는 NextJS 자체적으로 경로나 UI 파일로 인식하지 않는다. 

예를 들어 폴더 구조가 "app/home/user - page.jsx,login - Login.jsx, Create.jsx"와 같은 구조를 띄고 있을 때 

"localhost:3000/app/home/user" 링크는 "page.jsx" 파일을 렌더링 해주겠지만, 

"localhost:3000/app/home/login" 링크는 에러 페이지를 렌더링 해 줄 것이다.