정중식의 개발공부로그

react,next 01. 기본 페이지틀 생성 및 변경

09 Jul 2020 | react next

react,next 04. 기본 페이지틀 생성 및 변경

  • pages>index.js ,AppLayout 변경

  • pages>profile.js, pages>signup.js 파일 생성

index.js

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

const Home = () => {
  return (
    <>
      <Head>
        <title>NodeBird</title>
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.23.1/antd.css"
        />
      </Head>
      <AppLayout>
        <div>Hello,Next!</div>
      </AppLayout>
    </>
  );
};

export default Home;

AppLayout.js

import React 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="email">
          <Input.Search enterButton style= />
        </Menu.Item>
      </Menu>

      <Link href="/signup">
        <a>
          <Button>회원가입</Button>
        </a>
      </Link>

      {children}
    </div>
  );
};

export default AppLayout;

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.23.1/antd.css"
        />
      </Head>
      <AppLayout>
        <div>프로필</div>
      </AppLayout>
    </>
  );
};

export default profile;

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.23.1/antd.css"
        />
      </Head>
      <AppLayout>
        <div>회원가입</div>
      </AppLayout>
    </>
  );
};

export default signup;

  • Head코드가 중복적으로 들어간다.

  • 페이지가 한두개면 상관없지만 수십개,수백개로 불어날경우 유지보수가 힘들다.

  • 회원가입페이지에서 input에 값을 입력시 헤더도 같이 리렌더링된다.

  • 이 문제를 해결하기위해 이후 강좌에서 _app.js로 레이아웃을 분리한다.

_app.js란?

  • next안에 내장된 레이아웃파일이다.

  • pages폴더안에있는 모든 파일들이 _app.js파일을 부모컴포넌트로 인식한다.

  • _app.js 외에도 _document.js와 _error.js이 있다

    • _document.js: html,head,body를 담당(서버사이드 렌더링을 할때 커스텀마이징 해줌)
    • _error.js는 에러발생시 나올것 예정

_app.js사용

next에 내장된 레이아웃 파일인 _app.js를 커스텀마이징 해준것입니다.

  • pages>_app.js
import React from "react";
import Head from "next/head";
import AppLayout from "../components/AppLayout";

const NodeBird = ({ Component }) => {
  return (
    <>
      <Head>
        <title>NodeBird</title>
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.23.1/antd.css"
        />
      </Head>
      <AppLayout>
        <Component />
      </AppLayout>
    </>
  );
};

export default NodeBird;

바뀐 코드들

중복된 레이아웃코드들을 _app.js파일에 집중시켜 클린코드를 만들었다.

  • pages>index.js
import React from "react";

const Home = () => {
  return (
    <>
      <div>Hello,Next!</div>
    </>
  );
};

export default Home;
  • pages>profile.js
import React from "react";

const profile = () => {
  return (
    <>
      <div>프로필</div>
    </>
  );
};

export default profile;
  • 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.23.1/antd.css"
        />
      </Head>
      <AppLayout>
        <div>회원가입</div>
      </AppLayout>
    </>
  );
};

export default signup;

Related Posts