[NextJS] routing, 공통 layout 작업
이번 게시글에서는 NextJS에서 routing 작업을 하는 방법, 공통 layout을 잡는 방법을 알아보도록 하겠습니다. (css 설명은 없습니다.)
routing & 공통 layout
◆ routing
NextJS에서 routing 작업 하는 방법은 매우 간단합니다. 그냥 pages 폴더 아래 폴더 및 파일을 내가 원하는 url 형식으로 생성해주면 됩니다.
예를들어 /test/intro/a 와 같은 url을 만들고 싶으면 pages 폴더 아래 test 폴더 -> intro 폴더 -> a.js 파일을 만들면 됩니다. 그럼 해당 url로 접속할 경우 a.js 컴포넌트가 보여집니다. 그럼 예시로 /intro url를 생성해봅시다. 아래 이미지와 같이 pages 폴더 아래 intro 파일만 생성해주면 됩니다.
해당 컴포넌트 코드는 아래와 같이 간단하게 작성하였습니다.
export default function Intro() {
return <div>Intro 페이지</div>;
}그럼 /intro url로 접속해보겠습니다. 우리가 만든 컴포넌트가 정상적으로 표시되는 것을 확인할 수 있습니다.
그런데 위와 같이 url을 직접 입력하면 불편하니 간단하게 header menu를 만들어줍시다.
◆ 공통 layout 작업
header menu는 모든 페이지에서 보여야합니다. 그렇다면 어떻게 해야할까요? 우선 가장 무식한 방법인 모든 컴포넌트에 header menu를 작성하는 것입니다. 우선 메인 페이지인 pages/index.js 파일을 아래와 같이 수정해줍니다.
import Head from "next/head";
import Link from "next/link";
export default function Home() {
return (
<div>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ul>
<li>
<Link href="/">홈</Link>
</li>
<li>
<Link href="/intro">소개</Link>
</li>
</ul>
<p>메인 페이지</p>
</div>
);
}NextJS에서 다른 페이지로 이동하는 작업을 할 땐, 위에서 볼 수 있듯이 제공하는 Link를 사용하시면 됩니다. 메인 페이지에 접속하면 아래와 같은 결과가 나옵니다.
그럼 소개 페이지로 이동을 해보겠습니다.
위 결과를 보면 알 수 있듯이 정상적으로 이동은 되었지만 header menu가 없는 것을 확인할 수 있습니다. 그럼 intro 페이지에도 해당 header menu 코드를 넣어줍니다. (코드 생략) 그럼 아래와 같이 정상적으로 header menu가 표시됩니다.
그런데 이렇게 되면 확장성이 없습니다. header menu를 컴포넌트로 생성한다고 하여도 모든 page 컴포넌트에 넣어주어야 합니다. 이럴 때 사용하는 것이 공통 layout입니다. header menu는 모든 페이지에서 보여주어야 하기 때문에 공통 layout으로 작업해주면 됩니다. 이러한 공통으로 모든 페이지에서 필요한 작업은 pages/_app.js 에서 하시면 됩니다.
intro.js, index.js에 작업해둔 header menu 코드를 삭제하고 _app.js에 추가하시면 됩니다. _app.js 코드는 아래와 같습니다.
import Link from "next/link";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return (
<div>
<ul>
<li>
<Link href="/">홈</Link>
</li>
<li>
<Link href="/intro">소개</Link>
</li>
</ul>
<Component {...pageProps} />
</div>
);
}
export default MyApp;위와 같이 작업하면 홈, 소개 페이지 어디에 이동을 하여도 정상적으로 header menu가 표시되는 것을 확인할 수 있습니다. (결과 이미지 생략)
그런데 위 코드를 보면 한 가지 더 알 수 있는 것이 있습니다. globals.css도 해당 파일에서 import 한 것을 확인할 수 있습니다. 이렇게 공통 layout 뿐만이 아니라 공통적으로 필요한 작업은 모두 _app.js 파일에서 하시면 됩니다.
이번 게시글에서는 NextJS에서 공통으로 필요한 작업을 하는 방법, routing 작업을 하는 방법을 알아보았습니다. 다음 게시글에서는 routing 작업에 대해 조금 더 자세히 알아보도록 하겠습니다.
참고자료
마지막
해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.
'공유 > React, Next' 카테고리의 다른 글
| [React, Next] React, Next JS, TS 프로젝트 생성 (0) | 2022.03.30 |
|---|---|
| [NextJS] 동적 routing 작업하기 (0) | 2022.03.28 |
| [Next.js] Next.js 소개 (0) | 2022.03.24 |
| [React] useCallback, useMemo 잘 쓰기 (0) | 2022.03.11 |
| [React] input onChange 함수 확장성 있게 사용하기 (0) | 2022.01.15 |
