-
#1-5 기본 페이지틀 만들기React로 nodebirdSNS 만들기 (인프런)/#1 Hello, Next.js 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> )
해결방안
-
'React로 nodebirdSNS 만들기 (인프런) > #1 Hello, Next.js' 카테고리의 다른 글
#1-7 회원가입 state와 custom hook (0) 2020.01.05 #1-6 회원가입 폼 만들기 (0) 2020.01.04 #1-4 Ant design 적용 (0) 2020.01.04 #1-3 Next 라우팅 시스템 (0) 2020.01.04 #1 프로젝트 구조 (0) 2020.01.04