page와 레이아웃

계획한 프로젝트의 상단 메뉴 구성은 e도서관(Home), 책추천 및 구매(books), 커뮤니티(community), 실시간 대화방(chatRoom),
로그인(login), 회원가입(signup)으로 구성되어 있다.

먼저 front/components/Applayout.js 를 만든다. (상단 메뉴바는 따로 만들어 component를 분리함)

import React from 'react';
import PropTypes from 'prop-types';

const AppLayout = ({ children }) => {
  return (
    <>
      <header>
        <nav>
        <h1>
          <Link href="/">
            <a>e도서관</a>
          </Link>
        </h1>
        <ul>
          <Link href="/books">
            <a>
              <li>
                <div>책추천 및 구매</div>
              </li>
            </a>
          </Link>
          <Link href="/community">
            <a>
              <li>
                <div>커뮤니티</div>
              </li>
            </a>
          </Link>
          <Link href="/chatRoom">
            <a>
              <li>
                <div>실시간 대화방</div>
              </li>
            </a>
          </Link>
        </ul>
        </nav>
      </header>
      <main>
        <div>{children}</div>
      </main>
      <footer>
         footer
      </footer>
    </>
  );
};

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
}; // props로 받아온 children의 propType을 설정해준다.

export default AppLayout;

각 버튼을 클릭 시 해당 페이지를 렌더링 해줄것인데 이 때 그려줄 페이지를 children으로 받아온다. 이 후 그려줄 페이지는 현재 만든
AppLayout으로 html 부분을 감싸준다.

이제 각 버튼을 클릭 시 상단 메뉴 바 밑으로  페이지가 나올 것이다. pages 폴더 안에 각각 Home.js, books.js, community.js,
chatRoom.js, login.js, signup.js 파일을 생성

pages/Home.js

import React from 'react'

import AppLayout from './components/AppLayout'

const Home = () => {
	return (
    	<AppLayout>
	    	<div>Home</div>
        </AppLayout>
    );
};

export default Home;

pages/books.js

import React from 'react'

import AppLayout from './components/AppLayout'

const Books = () => {
	return (
    	<AppLayout>
	    	<div>Books</div>
        </AppLayout>
    );
};

export default Books;

pages/community.js

import React from 'react'

import AppLayout from './components/AppLayout'

const Community = () => {
	return (
    	<AppLayout>
	    	<div>Community</div>
        </AppLayout>
    );
};

export default Community;

pages/chatRoom.js

import React from 'react'

import AppLayout from './components/AppLayout'

const ChatRoom = () => {
	return (
    	<AppLayout>
	    	<div>ChatRoom</div>
        </AppLayout>
    );
};

export default ChatRoom;

pages/login.js

import React from 'react'

import AppLayout from './components/AppLayout'

const Login = () => {
	return (
    	<AppLayout>
	    	<div>Login</div>
        </AppLayout>
    );
};

export default Login;

pages/signup.js

import React from 'react'

import AppLayout from './components/AppLayout'

const Signup = () => {
	return (
    	<AppLayout>
	    	<div>Signup</div>
        </AppLayout>
    );
};

export default Signup;

이제 각 페이지 별로 기능들을 구현하면 된다.