쪼렙 as! 풀스택

React - Next.js 에서 공통 레이아웃 _app.js 사용하기. 본문

개발 일지/Web & Server

React - Next.js 에서 공통 레이아웃 _app.js 사용하기.

코코앱 2018.10.12 17:12


헤더나 푸터와 같이, 프로젝트에 전체에서 공동으로 쓰이는 레이아웃들이 있을 것이다. 


실제 프로젝트를 진행하다보면, 헤더, 푸터뿐 아니라, 여러가지 도구들 (전체를 감싸는 로딩 block 이라던지, Alert Modal 이라던지)을 공통으로 쓸 텐데, 이것들은 앱이 최초 한번만 로드되길 바란다.


create-react-app 으로 프로젝트를 만들면, 당연히 App 컴포넌트에 한번 정의해놓으면 될것이고,

Next.js 프로젝트를 한다면

_app.js 를 사용하면 되겠다.


뿐만아니라, 전체 페이지의 getInitialProps 를 후킹할 수 도 있다.


/pages/_app.js 


import React from 'react'
import App, { Container } from 'next/app'
import {Header, Footer} from '../comps/CommonComps';

export default class MyApp extends App {

constructor(props){
super(props)
console.warn("마이앱의 컨스트럭터.", props)
}

componentDidMount() {
console.warn("마이앱의 컴포넌트 디드 마운트.")
}

static async getInitialProps({ Component, router, ctx }) {
console.warn("마이앱의 겟 이니셜.", router)
let pageProps = {}

if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
console.warn("받은 props.", pageProps)

return { pageProps }
}

render () {
const { Component, pageProps } = this.props

return (
<Container>
<Header /> // 공통된 레이아웃을 여기다 넣을 수 있다. 헤더라던지...
<Component {...pageProps} />
<Footer /> // 공통된 레이아웃을 여기다 넣을 수 있다. 푸터라던지...
</Container>
)
}
}


Tag
,
0 Comments
댓글쓰기 폼