Next.js (2) - 컴포넌트 공유, 레이아웃

joker·2020년 3월 23일
0

NEXT.js

목록 보기
3/4

Using Share Components

우리는 Next.js가 모두 페이지에 관한 것임을 알고 있습니다. React 컴포넌트를 내보내고 그 컴포넌트를 pages디렉토리 안에 넣어서 페이지를 만들 수 있습니다 . 그런 다음 파일 이름을 기준으로 고정 URL을 갖습니다.

내 보낸 페이지는 JavaScript 모듈이므로 다른 JavaScript 구성 요소도 가져올 수 있습니다.
이것은 모든 JavaScript 프레임 워크에서 기대할 수있는 기능입니다.
이 레슨에서는 공통 헤더 컴포넌트를 작성하여 여러 페이지에서 사용합니다. 마지막으로 Layout 구성 요소를 구현하고 여러 페이지의 모양을 정의하는 데 어떻게 도움이되는지 살펴 보겠습니다.

헤더 컴포넌트 생성하기

components폴더를 만들고 그 안에 Header.js 파일을 생성해주세요. 이후
components/Header.js 안에 아래와 같은 코드를 작성해 주세요

import Link from 'next/link';

const linkStyle = {
  marginRight: 15
};

const Header = () => (
  <div>
    <Link href="/">
      <a style={linkStyle}>Home</a>
    </Link>
    <Link href="/about">
      <a style={linkStyle}>About</a>
    </Link>
  </div>
);

export default Header;

헤더 컴포넌트 사용하기

위에서 만든 헤더 컴포넌트를 사용해보도록 하겠습니다.

pages/index.js

import Header from '../components/Header';

export default function Index() {
  return (
    <div>
      <Header />
      <p>Hello Next.js</p>
    </div>
  );
}

pages/about.js

import Header from "../components/Header";

export default function About() {
  return (
     <div>
	<Header />
	<p>This is the about page</p>
     </div>
	);
}

The Component Directory
컴포넌트를 특별한 디렉토리에 넣을 필요 없이 /pages 디렉토리 안에 컴포넌트를 작성 할 수 있습니다.

레이아웃 컴포넌트 생성하기

components/MyLayout.js를 생성한후 아래의 코드를 작성해보세요.

Method1 - HOC(Higher Order Component) 고차 컴포넌트

import Header from "./Header";

const layoutStyle = {
	margin: 20,
	padding: 20,
	border: "1px solid #DDD"
};

const withLayout = Page => {
	return () => (
		<div style={layoutStyle}>
			<Header />
			<Page />
		</div>
	);
};

export default withLayout;

pages/index.js

import withLayout from "../components/MyLayout";

const Page = () => <p>Hello Next.js</p>;

export default withLayout(Page);

pages/about.js

import withLayout from "../components/MyLayout";

const Page = () => <p>This is the about page</p>;

export default withLayout(Page);

Method 2 - Page content as a prop

components/MyLayout.js를 생성한후 아래의 코드를 작성해보세요.

import Header from './Header';

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
};

const Layout = props => (
  <div style={layoutStyle}>
    <Header />
    {props.content}
  </div>
);

export default Layout;

pages/index.js

import Layout from '../components/MyLayout.js';

const indexPageContent = <p>Hello Next.js</p>;

export default function Index() {
  return <Layout content={indexPageContent} />;
}

pages/about.js

import Layout from '../components/MyLayout.js';

const aboutPageContent = <p>This is the about page</p>;

export default function About() {
  return <Layout content={aboutPageContent} />;
}

profile
개발자입니다.

0개의 댓글