Ant Design

nam2350·2021년 9월 4일
0

React

목록 보기
13/14

#Ant Design
ant design은 컴포넌트를 가져다 쓸 수 있는 ui tool 입니다.
과거 BootStrap으로 대변되던 프론트 엔드 ui tool이 최근 몇년 사이에는 다양하게 등장하여 선택지가 굉장히 많아 졌습니다.
그중에 Ant Design은 리액트에 친화적으로 개발되어 있기 때문에 호환성이 매우 좋으며 redux로 만들어진 Dva 프레임 워크를 통해 관리가 가능하기 때문에 개발 세팅도 편리합니다.

Ant Design은 10가지 디자인 원칙을 얘기하고 각 원칙을 사례 중심으로 설명합니다

  1. 근접성 (Proximity)
  2. 정렬 (Alignment)
  3. 대조 (Contrast)
  4. 반복 (Repetition)
  5. 직관적으로 만들어라 (Make it Direct)
  6. 화면에 머물러라 (Stay on the Page)
  7. 가볍게 유지하라 (Keep it Lightweight)
  8. 가이드를 제공해라 (Provide an Invitation)
  9. 트랜지션을 사용하라 (Use Transition)
  10. 즉각적인 반응 (React Immediately)

예를 들어 6번의 Stay on th Page 원칙은 다음과 같습니다.

새로운 페이지로 이동하지 말고 같은 페이지에서 해결해라. 페이지 갱신이나 이동은 사용자를 장님으로 만들고 의식의 흐름를 방해한다. (Solve most of problems on the same page and avoid a new one, because the page refresh and forwarding can lead to change blindness, in addition to disrupting the user’s mental flo

And Design 설치

npm install antd 

ex) button 컴포넌트 import

ReactDOM.render(
  <>
    <Button type="primary">Primary Button</Button>
    </>,
  mountNode,
);

버튼을 import 해준 다음 원하는 디자인의 버튼의 타입을 지정해주면 됩니다.

Ant Design에는 많은 종류의 컴포넌트들이 있기 때문에 잘 활용한다면 디자인에 신경쓰지 않고 개발에만 집중 할 수 있게 됩니다.

profile
호잇호잇

0개의 댓글