antd 사용방법중에 리액트와 연결하는 방법을 알아보자. (참고)
Next는 기본적으로 webpack이 들어있는데 webpack이 css를 보는 순간 style 태그로 바꿔서 html에다가 넣어준다.
webpack은 이미지 이러한 것들도 따로 처리를 해서 넣어준다. 여러가지 파일들을 확장자 상관없이(loader 필요) 합쳐준다.
모든 페이지에 antd를 쓰기 때문에 pages폴더안에 _app.js를 만들어서 여기안에 넣어준다. 여기서 페이지들의 공통적인 것들을 처리해 준다.
props(여기서는 Component)가 있으면 propType를 통해서 점검을 해준다. 서비스의 안정성을 높이기 위해서 이다.
// _app.js
import React from 'react';
import Head from 'next/head';
import PropTypes from 'prop-types';
import 'antd/dist/antd.css';
import wrapper from '../store/configureStore';
const NordBird = ({ Component }) => {
return (
<Component />
);
};
NordBird.propTypes = {
Component: PropTypes.elementType.isRequired,
};
export default NodeBird;
index.js의 return 부분이 _app.js의 component로 들어가서 <Component / > 부분이 되는 것이다.
즉 index.js의 부모라고 볼 수 있다. npm run dev를 돌려 확인해보면 디자인이 되있는 것을 확인할 수 있다.
// index.js
return (
<AppLayout>
<div>Hello, Next!</div>
</AppLayout>
);모든 페이지에서 다 공통인 것들은 _app.js에 넣으면 되고 특정 컴포넌트끼리 공통인 것들은 AppLayout으로 만들어서 개별 컴포넌트를 감싸면 된다. layout과 _app.js의 역할이 다르다는 것을 알고있도록 한다.
즉, _app.js는 완전히 공통힌 것들, 레이아웃은 일부애들이 공통인 애들이라고 보면 된다.
next에서 head라는 컴포넌트를 제공한다. import 해주자. 공통된 head라면 _app.js에 아니라면 index.js에 넣어주자.
// _app.js
import React from 'react';
import Head from 'next/head';
import PropTypes from 'prop-types';
import 'antd/dist/antd.css';
const NodeBird = ({ Component }) => {
return (
<>
<Head>
<meta charSet="utf-8"/>
<title>NodeBird</title>
</Head>
<Component />
</>
);
};
profile.js 같은 것들은 아래와 같이 작성해 줄 수가 있다.
// profile.js
import React from 'react';
import Head from 'next/head';
import AppLayout from '../components/AppLayout';
const Profile = () => {
return (
<>
<Head>
<title>내 프로필 | NodeBird</title>
</Head>
<AppLayout>내 프로필</AppLayout>
</>
);
};
export default Profile;signup.js도 아래와 같이 해주자.
// signup.js
import React from 'react';
import Head from 'next/head';
import AppLayout from '../components/AppLayout';
const Signup = () => {
return (
<>
<Head>
<title>회원가입 | NodeBird</title>
</Head>
<AppLayout>회원가입 페이지</AppLayout>
</>
);
};
export default Signup;
npm run dev를 돌려서 확인해보자. 초반에 느린거는 개발모드 일때는 느린거지만 배포모드일때는 이미 다 빌드를 해놨기 때문에 느린현상이 없어서 괜찮다.
<출처 조현영: [리뉴얼] React로 NodeBird SNS 만들기>
[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의
리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다., 새로 만나는 제로초의 리액트 노드버
www.inflearn.com
'React > NodeBird(ZeroCho)' 카테고리의 다른 글
| 로그인 폼 만들기 (0) | 2021.09.17 |
|---|---|
| 반응형 그리드 사용 (0) | 2021.09.16 |
| antd & styled-components (0) | 2021.09.16 |
| Link & eslint (0) | 2021.09.16 |
| page와 레이아웃 (0) | 2021.09.16 |