정중식의 개발공부로그

react,next 01. ant design적용하기

09 Jul 2020 | react next

react,next 03. ant design적용하기

ant design과 styled-components를 이용하여 레이아웃 구성을 합니다.
ant design은 리액트 코드로 되어있고, 그리드와 반응형까지 지원해줍니다.

ant design install

npm i antd를 해버릴경우 나중에 회원가입폼 onSubmit에서 console.log할때 작동을 안한다.
꼭 버전을 맞춰줄것

npm i antd@3.23.1

ant design 활용하여Layout 구성하기

  • front 폴더에 component폴더생성후 안에 AppLayouts.js파일 생성

  • ant design에서 참고하여 소스코드를 가져온다.

  • AppLayouts.js

    여기서 사용된 key 는 Unique ID of the menu item라고 공식홈페이지에 명시되있는데, className이라고 생각하면 될것같다.

import React 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="email">
          <Input.Search enterButton />
        </Menu.Item>
      </Menu>
      {children}
    </div>
  );
};

export default AppLayout;
  • front>pages>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;

결과

views
css적용이 안되어있다.

next에서 antDesign에 css적용하기

  • head에 css파일을 넣어주어야한다. 다음 코드를 삽입해주자
<Head>
  <title>NodeBird</title>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.23.1/antd.css"
  />
</Head>
  • front>pages>index.js
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.23.1/antd.css"
        />
      </Head>
      <AppLayout>
        <Link href="/about">
          <a>about</a>
        </Link>
        <div>Hello,Next!</div>
      </AppLayout>
    </>
  );
};

export default Home;

결과

views
css적용완료. 사진은 mode를 써서 검색창의 위치를 변화시켜준 모습임

ant grid 적용해보기

xs:모바일, sm: 작은 화면, md: 중간 화면,lg:큰 화면
화면 폭에 따라서 화면 레이아웃을 설정할수 있습니다.
gutter={}는 Col간의 간격을 말 합니다.

<Row gutter={8}>
  <Col xs={24} md={6}>
    {/* 유저정보 */}
  </Col>
  <Col xs={24} md={12}>
    {children}
  </Col>
  <Col xs={24} md={6}>
    세번째
  </Col>
</Row>

Related Posts