[react] Ant Design

https://ant.design/

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

 

 

react프로젝트를 열고 터미널에 

npm i antd

를 입력 후 install 해준다.

 

Ant Design에는 대부분은 예쁘게 만들어진 컴포넌트가 있는데 그 컴포넌트를 사용하면 자동으로 스타일도 적용되고, 동작도 되어야 한다.

 제작자 입장에서는 컴포넌트 소스, 별도로 스타일 파일도 제공을 해야 한다.

 react에서는 css모듈 방식이 더 범용적인 방식이다. 

 

그렇기 때문에 대표적인 방식인 css방식을 제공하고 있다.

 

그래서 ant design의 css파일을 우선 포함시키는 과정이 필요하다.

 

 

import "./index.css"; 위에 

import "antd/dist/antd.css"; 를 적고 import 해주자

: 전역으로 줄 수 있는 css를 작성하였다.  전역적으로 들어있기 때문에 분할해서 사용하는 것도 가능하다. 

분할로 사용하는 건 아래에 작성하겠다.

 

 

그리고 위 사이트에 들어가서 어떤 디자인을 사용할지 확인 후 가져오면 된다.

 

어떤 디자인을 넣을지 정하고 show code 부분을 클릭해 코드를 확인한다.

 

code를 확인하고 참고하여 사용하면 된다. 

 

---

 

import "antd/dist/antd.css";

전역적으로 불러오게 되면 그 데이터량이 커지기 때문에 부분적으로 불러올수도 있다.

import DatePicker from "antd/es/date-picker";
import "antd/es/date-picker/style/css";

 

 만약 DatePicker에 대해 작성을 하고 있다면 

이런식으로 DatePicker에 관한것만 불러올수 있기 때문에

용량을 줄이길 원한다면 해당하는것만 import해볼수 있도록 하자

 

 

 

Ant Design에서는 아이콘도 제공한다.

 

아이콘을 사용하기 위해서는 위 사진에 있는 명령어를 terminal에 입력 후 설치가 필요하다.

npm install --save @ant-design/icons

 

사용할 아이콘을 클릭하면 <GithubOutlined /> 이런 식으로 복사가 된다.

 

넣을 위치에 붙여 넣어주고 위에 import 해주자

import { GithubOutlined } from "@ant-design/icons";

 

 

이렇게 아이콘과 달력을 넣어보았다.

 

---

 

 

Ant Design에 있는 레이아웃 잡는 것에 대해 알아보자

import { Row, Col } from 'antd';

function MyCol({ span }) {
  return (
    <Col span={span}>
      <div style={{ height: 50, backgroundColor: 'red', opacity: 0.7 }} />
    </Col>
  );
}

export default function App() {
  return (
    <div className="App">
      <Row gutter={16}>             // <Row>는 한줄을 의미
        <Col span={12} />         //한줄을 어떻게 나누었는지 의미
        <Col span={12} />         // span의 값은 한줄에 총 24를 맞춰줘야 한다.
      </Row>
      <Row gutter={16}>             //gutter는 콜론사이 이 gutter만큼 띈다는 의미
        <Col span={8} />          // gutter는 px단위
        <Col span={8} />
        <Col span={8} />
      </Row>
      <Row gutter={16}>
        <Col span={6} />
        <Col span={6} />
        <Col span={6} />
        <Col span={6} />
      </Row>
    </div>
  );
}

 

 

<Row gutter={16 + 8n 의 정수} /> 

span이 총 24이기때문에 위 방식으로 줘야 비율적으로 맞는 구성이 나오기 때문에 이 계산에 따라 넣어줄 수 있다.

 

 

export default function App() {
  return (
    <div className="App">
      <Row gutter={16}>
        <MyCol span={12} offset={12} />           // 12칸을 띄고 12칸을 차지 
      </Row>                                      // offset이 먼저 진행
      <Row gutter={16}>
        <MyCol span={8} />
        <MyCol span={8} offset={8} />
      </Row>
      <Row gutter={16}>
        <MyCol span={6} />
        <MyCol span={6} offset={3} />
        <MyCol span={6} offset={3} />
      </Row>
    </div>
  );
}

col에 offset을 줄수 있다.

offset는 띄어쓰기? 라고 생각하면 될듯하다.

col이 시작할때 offset만큼 비우고 그다음 span만큼 채운다.

그래서 한줄(Row)에 있는  span, offset의 값이 총 24를 맞춰야 한다.  

 

import { Row, Col } from 'antd';

function MyCol({ span, offset }) {
  const opacity = Math.round(Math.random() * 10) / 10;
  return (
    <Col span={span} offset={offset}>
      <div style={{ height: 50, backgroundColor: 'red', opacity }} />
    </Col>
  );
}

export default function App() {
  return (
    <div className="App">
      <Row
        style={{
          height: 300,
        }}
        justify="start"
        align="top"
      >
        <MyCol span={4} />
        <MyCol span={4} />
        <MyCol span={4} />
        <MyCol span={4} />
      </Row>
    </div>
  );
}

Col을 감싸고 있는 Row부분에 justify나 align 의 props를 줘서 위에서 정렬, 좌에서 정렬을 선택할 수 있다.

 

 

<Row (type="flex") justify="좌우정렬" align="위아래정렬" />

type부분은 지금은 생략가능하다고 한다.

 

 

 

---

패캠 공부중

https://slides.com/woongjae/react2021#/33/17