React로 nodebirdSNS 만들기 (인프런)/#1 Hello, Next.js

#1-5 기본 페이지틀 만들기

정중식 2020. 1. 4. 15:31

- front폴더-> pages폴더-> profile.js

import React from "react";
import AppLayout from "../components/AppLayout";
import Head from "next/head";

const Profile = () => {
  return (
    <>
      <Head>
        <title>NodeBird</title>
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.25.3/antd.min.css"
        />
      </Head>
      <AppLayout>
        <div>내 프로필</div>;
      </AppLayout>
    </>
  );
};

export default Profile;

- front폴더-> pages폴더-> signup.js

import React from "react";
import AppLayout from "../components/AppLayout";
import Head from "next/head";

const Signup = () => {
  return (
    <>
      <Head>
        <title>NodeBird</title>
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.25.3/antd.min.css"
        />
      </Head>
      <AppLayout>
        <div>회원가입</div>;
      </AppLayout>
    </>
  );
};

export default Signup;

- front폴더-> pages폴더-> AppLayout.js

import React, { children } from "react";
import Link from "next/link";
import { Menu, Input, Button } from "antd";

const AppLayout = ({ children }) => {
  return (
    <div>
      <Menu mode="horizontal">
        <Menu.Item key="home">
          <Link href="/">
            <a>노드버드</a>
          </Link>
        </Menu.Item>
        <Menu.Item key="profile">
          <Link href="/profile">
            <a>프로필</a>
          </Link>
        </Menu.Item>
        <Menu.Item key="mail">
          <Input.Search enterButton style={{ verticalAlign: "middle" }} />
        </Menu.Item>
      </Menu>
      <Link href="/signup">
        <a>
          <Button>회원가입</Button>
        </a>
      </Link>
      {children}
    </div>
  );
};

export default AppLayout;

 

문제점

- 각 파일마다 중복코드 발생 ( head와 <AppLayout> )

 

해결방안

- 

저작자표시