pages폴더안에서 profile페이지, signup페이지도 만들자(profile.js , signup.js)
// profile.js
import React from 'react';
const Profile = () => {
return <div>내 프로필</div>
};
export default Profile;
// signup.js
import React from 'react';
const Signup = () => {
return <div>회원가입 페이지</div>
};
export default Signup;
만약 next가 인식을 잘못한다면 ctrl로 서버끄고 다시 npm run dev를 해준다.
http://localhost:3060/profile 또는 http://localhost:3060/signup을 해주면 알아서 페이지가 바뀌게 된다.
pages폴더안에 about폴더를 만들고 zerocho파일을 만들어서 실행을 해줄 수도 있다.
http://localhost:3060/about/zerocho
pages가 아니지만 components인 것들은 components폴더를 하나 만들어서 작업한다.
(꼭 components이름명으로 안해도 된다. pages는 pages라고 next에서 해주자.)
AppLayout.js를 만들어준다. index.js와 profile.js signup.js가 공통적으로 사용할 것이다.
children은 node(리액트의 node 즉 return에 들어갈 수 있는 모든 것들이 node)라는 타입이다.
// AppLayout.js
import React from 'react';
import PropTypes from 'prop-types';
const AppLayout = ({ children }) => {
return (
<div>
<div>공통메뉴</div>
{children}
</div>
);
};
AppLayout.propTypes = {
children: PropTypes.node.isRequired,
};
export default AppLayout;
prop-types도 설치를 해준다. props로 넘기는 것들은(children) props로 검사를 해주는 것이 좋다.
npm i prop-types
이제 index.js에서 AppLayout을 불러와주자.
// index.js
import React from 'react'; // Next는 이 구문이 필요가 없다.
const Home = () => {
return (
<AppLayout>
<div>Hello, Next!</div>
<AppLayout>
);
};
export default Home;
즉 AppLayout으로 감싸는 것이다. 각 페이지별로 layout을 다르게 적용하고 싶으면 다르게 적용할 수가 있다.
아래와 같이 컴포넌트 부분은 마음대로 만드는 부분이라고 생각하자. children 부분은
index.js의 Hello Next!부분이라고 보면 된다. (index.js에서 AppLayout으로 감싸줬기 때문에)
// AppLayout.js
import React from 'react';
import PropTypes from 'prop-types';
const AppLayout = ({ children }) => {
return (
<div>
<div>공통메뉴</div>
{children}
</div>
);
};
AppLayout.propTypes = {
children: PropTypes.node.isRequired,
};
export default AppLayout;
<출처 조현영: [리뉴얼] React로 NodeBird SNS 만들기>
[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의
리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다., 새로 만나는 제로초의 리액트 노드버
www.inflearn.com
'React > NodeBird(ZeroCho)' 카테고리의 다른 글
_app.js & Head (0) | 2021.09.16 |
---|---|
antd & styled-components (0) | 2021.09.16 |
Link & eslint (0) | 2021.09.16 |
Next.js 역할 & 실행 (0) | 2021.09.16 |
Front-end 기본적인 흐름 (0) | 2021.09.13 |