예제 라우터 : user/1, user/2... 등 유저 상세페이지 만들기
next에서 실행시켜주는 getInitialProps를 _app.js에 추가
RgProject.getInitialProps = async (context) => {
const { ctx, Component } = context;
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await context.Component.getInitialProps(ctx);
}
return {pageProps};
};- Component(pages들)에 getInitialProps가 있으면 getInitialProps를 실행을 한다
user 페이지에서 context query를 받는다
import React from 'react';
import PropTypes from 'prop-types';
const User = ({ id }) => {
return (
<>
user 정보 {id}
</>
)
};
User.PropTypes = {
id : PropTypes.number.isRequired,
};
User.getInitialProps = async (context) => {
console.log('user id getInitialProps', context.query.id)
return { id : parseInt(context.query.id, 10)}
};
export default User;- _app.js getInitialProps가 보내준 context에서 query.id를 받고 이 부분을 컴포넌트의 props({id})로 만들어준다.
- 과정을 자세히 보자면, User.getInitialProps에서 { id : parseInt(context.query.id, 10)} 이 부분을 리턴하는데 그 값은
다시 _app.js getInitialProps의 pageProps로 넘어간다
RgProject.getInitialProps = async (context) => {
console.log('context', context)
const { ctx, Component } = context;
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await context.Component.getInitialProps(ctx);
}
return {pageProps};
};- 이 pageProps를 RgProject의 props로 넘긴다.
pageProps를 RgProject의 props 로 받음
const RgProject = ({ Component, store, pageProps }) => {
return (
<Provider store={store}>
<Head>
<title>냉장고 지도</title>
</Head>
<AppLayout>
<Component {...pageProps} />
</AppLayout>
</Provider>
)
};- pageProps가 RgProject의 props가 되었기 때문에 User 페이지에서 id 를 props로 받을 수 있었던 것이다.
const User = ({ id }) => {
return (
<>
user 정보 {id}
</>
)
};
블로그 이전했습니다