ant Design 사용하기

ant Design

-공식 사이트

https://ant.design/

Ant Design - The world's second most popular React UI framework

이 사이트에는 버튼, 메뉴 스타일 등의 css가 있다. 

장점으로는 디자이너가 없을 때, 디자인 고민 할 시간을 덜어줄 수 있다.

단점으로는 페이지가 다른 사이트와 겹치는 스타일이 많아 질수도있다.

 

사용법

import { Menu, Input, Row, Col } from "antd";

이렇게 사용하고 싶은 스타일을 import로 가져와준다.

 

      <Menu mode="horizontal">
        <Menu.Item>
          <Link href="/">
            <a>노드버드</a>
          </Link>
        </Menu.Item>
        <Menu.Item>
          <Link href="/profile">
            <a>프로필</a>
          </Link>
        </Menu.Item>
        <Menu.Item>
          <SearchInput enterButton />
        </Menu.Item>
        <Menu.Item>
          <Link href="/signup">
            <a>회원가입</a>
          </Link>
        </Menu.Item>
      </Menu>

이렇게 컴포넌트를 활용해서 사용하면된다.

이 컴포넌트가 마음에 들지 않으면 커스텀 할 수 있다.

반응형(Grid)

https://ant.design/components/grid

Grid - Ant Design

ant Design에서 반응형을 하기 위해서는 Row, Col로 할 수 있다. 

Row를 24개로 나눠서 표현해줬다. 24개로 나눈 이유는 24가 2, 3, 4, 6, 8, 12 이렇게 많은 숫자로 나눠질 수 있기 때문이다.

      {/*컬럼 사이에 간격을 주는 것이 gutter*/}
      <Row gutter={8}>
        {/*xs: 모바일, sm: 테블릿, md: 작은 데스크탑*/}
        {/*xs인 24가 전체이다. 따라서 md에서는 25%만 차지하겠다는 의미*/}
        {/*만약 Col 2개를 같이 가로로 두고 싶으면 두 Col의 xs 합을 24 이하로 둬야한다.*/}
        <Col xs={24} md={6}>
          {isLoggedIn ? <userProfile /> : <LoginForm />}
        </Col>
        <Col xs={24} md={12}>
          {children}
        </Col>
        <Col xs={24} md={6}>
          <a
            href="https://shortcoding.tistory.com/"
            target={"_blank"}
            // 밑에 걸 해줘야 새창에서 띄울 때 보안상 안전하다
            rel={"_noreferrer noopener"}
          >
            made by 5hyun
          </a>
        </Col>
      </Row>

 

-gutter: column 사이에 간격을 주는 것이다.

• column

-xs: 모바일, sm: 테블릿, md: 작은 데스크탑

-2개의 Col을 가로로 두기 위해서는 두 개의 xs의 합이 24 이하여야 한다.

-target를 _blank로 하면 rel를 꼭 해줘야 보안상 위험이 없다.

gutter 문제점



gutter를 사용하면 웹 하단에 스크롤이 생기게 된다. 일종의 버그 같은 것이다.

해결법

import styled, { createGlobalStyle } from "styled-components";

const Global = createGlobalStyle`
  .ant-row {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  
  .ant-col:first-child {
      padding-left: 0 !important;
  }
  
  .ant-col:last-child {
    padding-right: 0 !important;
  }
`;

이 global style을 넣어준다면 해결할 수 있다.