Layout
우리는 NextJS를 쓰면서 앞으로 Layout 이라는 패턴을 많이 쓰게 될겁니다.
위 그림처럼 components에 넣어서 말이죠
왜냐면!!!
_app.js를 잘 사용하지 않기 위해서입니다
얘는 global로 선언을 해야하는 경우들이 많기 때문에 위험부담이 있습니다
그래서 줄이기 위해서
아래처럼 Layout을 사용합니다
_app.js 는 아래처럼 수정해주면됩니다
import Layout from "@/components/Layout";
import NavBar from "@/components/NavBar";
import "@/styles/globals.css";
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}Layout.js
import NavBar from "./NavBar";
export default function Layout({children}) {
return (
<>
<NavBar />
<div>{children}</div>
</>
)
}그러면 위 코드 내용에서 우리가 알아야할건 children 입니다
왜냐?!
얘가 앞에 _app.js에서 설명했던 pageProps 라고 보면되니까요
그 page들이 여기 children 으로 들어와서 동작을 하게됩니다
똑같이 생겼어요 _app.js 를 쓴거처럼!!
Head를 만들어 봅시다
아주 간단합니다
import 하고 넣기만 하면 끝
import Head from 'next/head'
export default function Home() {
return (
<div>
<Head>
<title>Home | Next Movies</title>
</Head>
<h1>Hello</h1>
</div>
);
}
근데 이거도 component로 따로 빼서 쓰면 편하니깐
그렇게 씁시다
하루에 집중을