0719_(TIL)_01. React UI 컴포넌트 라이브러리 , 프레임워크

> '프레임워크' 란?

소프트웨어 어플리케이션이나 솔루션의 개발을 수월하게 하기 위해 소프트웨어의 구체적 기능들에 해당하는 설계와 구현을 재사용 가능하도록 협업화된 형태로 제공하는 소프트웨어 환경

많이 쓰게 될 CSS Framework의 종류

Material UI

• 가장 많이 쓰이고 있는 React UI 컴포넌트 라이브러리 중 하나.
  요새 ant-design을 많이 쓰긴 하지만 아직 다수의 기업들이 material사이트를 사용 함.

Fontawesome

• icon위주의 프레임워크

Ant Design

• 중국 알리바바 그룹에서 만든 css 프레임워크로, 최근 많이 쓰기 시작
  → 최신 트렌드 디자인 多
• 다른 css 프레임워크에 비해 편함.
• 기본적으로 javascript에 설치되기 때문에 typescript에서는 타입을 찾지 못한다고 에러가 뜰 수 있음.
  → yarn add @types/antd
  

- 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)

Ant-Design 사용방법

• ICON 사용 방법
  1) 원하는 ICON소스를 클릭해 코드를 복사한다. (수정 가능)
  • 형광펜으로 표시한 <> 을 누르면 해당 component의 코드를 볼 수 있다.
    2) 원하는 부분의 코드를 복사해서 JSX 부분에 붙여넣는다.
    
    3) 복사한 코드명을 수정없이 그대로 import해준다.

import { SkypeOutlined } from '@ant-design/icons';
   4) style을 줄 때에도 복사했던 코드명을 그대로 불러준다.
   ex)
       const Skype = styled(SkypeOutlined)`
         color: skyblue;
         font-size: 50px;      
       `;

icon은 inline 요소이므로 크기조절을 font-size로 한다.

width, height 조절 시 아이콘의 영역만 넓어질 뿐 아이콘의 크기는 변하지 않음. 
ex)

icon 외에도 menu, radio, button, checkbox등 효과도 가능함.

1) 원하는 컴포넌트를 찾고, 해당 컴포넌트의 디자인 코드를 복사한다.

( ' <> ' 버튼을 누르면 해당 컴포넌트의 코드가 뜬다. )

2) 코드를 붙여넣고 ant-design화면의 하단 API 메뉴에서 원하는 효과의 태그를 넣고 값을 정해준다.
ex) <Wrapper><Rate tooltips={desc} /></Wrapper>

3) 불러온 소스의 이름 그대로 import해준다
ex) import { Rate } from 'antd';