React/NodeBird(ZeroCho)

page와 레이아웃

느리지만 꾸준하게 2021. 9. 16. 16:03

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 만들기>

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC/dashboard

 

[리뉴얼] 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