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

#1-4 Ant design 적용

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

엔트디자인

 

Ant Design - A UI Design Language and React UI library

AntV Simple, professional, with unlimited possibilities for data visualization solutions Learn more

ant.design

*실무에서는 그대로 잘 안쓰임(디자인을 커스터마이징해서 쓰임)

*코드가 다 리액트라 바로 갖다붙임

 

- npm i antd

 ( cd front 후 설치 ★)

레이아웃작업

 

- front폴더-> components폴더-> AppLaout.js 

import React, { children } from "react";
import { Menu, Input } from "antd";

const AppLayout = (({ children })) => {
  return (
    <div>
      <Menu>
        <Menu.Item key="home">노드버드</Menu.Item>
        <Menu.Item key="profile">프로필</Menu.Item>
        <Menu.Item key="mail">
          <Input.Search enterButton />
        </Menu.Item>
      </Menu>
      {children} {/* props인데, 리액트에서 정보를 넘겨주는 방식* index.js에서 AppLayout사용/}
    </div>
  );
};

export default AppLayout;

- front폴더-> index.js

import React from "react";
import Link from "next/link";
import AppLayout from "../components/AppLayout";

const Home = () => {
  return (
    <>
      <AppLayout>   { /*칠드런 사용 안의 정보들이 칠드런으로 들어감, 그리드 활용에 좋음 */}
        <Link href="/about">
          <a>about</a>
        </Link>
        <div>Hello, Next!</div>
      </AppLayout>
    </>
  );
};

export default Home;

 

- css 적용해야함 

 * head에 css를 넣어줘야함 *

 

- 링크는 엔트 디자인 사이트에서 가져왔음

import React from "react";
import Link from "next/link";
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.25.3/antd.min.css"
        />
        />
      </Head>
      <AppLayout>
        <Link href="/about">
          <a>about</a>
        </Link>
        <div>Hello, Next!</div>
      </AppLayout>
    </>
  );
};

export default Home;

 

저작자표시