Next.js 는 File System Routing 을 제공한다.
즉, pages 경로에 위치한 폴더 및 파일명 자체가 접속 경로로 라우팅된다.
1. pages/파일명.tsx : /파일명 접속 라우팅
2. pages/폴더/파일.tsx : /폴더/파일 접속 라우팅
3. pages/폴더/[쿼리].tsx : /폴더/모든경로 접속 다이나믹 라우팅. useRouter().query 로 경로 취득
* index.tsx 는 파일명을 제외한 / 경로로 인식.
* 타입스트립트 확장자는 tsx, 자바스크립트 확장자는 js를 사용
그런데 라우팅되는 파일의 파일명과 컴포넌트 명은 달라도 상관없다.
이 글에서는 이에 대해 간략하게 정리한다.
# pages 라우팅 파일명, 컴포넌트 이름 작성 방법
- pages 경로의 라우팅 용 컴포넌트 작성 시,파일명과 컴포넌트명은 같을 필요가 없다
1. 파일명
파일명은 접속경로가 될 이름으로 작성해주면 되며, 어떤 파일 이름을 사용해도 된다.
- index.js, about.js, auth.js, mainPage.tsx 등으로 자유롭게 작성해주면 된다.
2. 컴포넌트명
컴포넌트 이름은 파일 이름과 달라도 된다.
컴포넌트명은 접속 경로와 무관하다.(오직 파일명에 의해서만 접속경로가 정해진다.)
어떤 컴포넌트 이름을 사용해도 되지만, 보통 대문자로 시작한다.
* 단, 컴포넌트는 export default 로 익스포트 되어야만 한다.
예를 들어 index.js 파일 생성시,
컴포넌트 명은 HomePage 등으로 다르게 작성해도 된다.(export default 는 꼭 해줘야 한다.)
// pages/index.js 파일
// 컴포넌트 명은 파일명과 달라도 되지만, 대문자로 시작하는게 권장된다.
function HomePage() {
return <div>홈페이지입니다.</div>;
}
// 반드시 default 로 export 해줘야 한다.
export default HomePage;
공식문서의 원문을 첨부한다.
The component can have any name, but you must export it as a default export.
'개발(Development) > React(리액트)' 카테고리의 다른 글
[React] Next.js + ReduxToolkit + TypeScript 설정 방법 (next-redux-wrapper HYDRATE 사용 이유) (0) | 2022.08.23 |
---|---|
[Next.js] Link 컴포넌트에 속성 설정 방법(className, target, rel 등) (0) | 2022.08.21 |
[React] 모달창(Modal) 초간단 구현 방법(리덕스, 라이브러리 X) (0) | 2022.08.16 |
[React] useLocation 으로 쿼리 파라미터 취득 방법(URLSearchParams 활용) (0) | 2022.08.16 |
[Next.js] getServerSideProps 에서 undefined 반환 이유 (0) | 2022.08.16 |
댓글