리액트 프레임워크

Ant-Design

https://ant.design/components/overview/
이 사이트는 리액트 UI 프레임워크이다. 버튼, 아이콘, 모달, 메뉴 등 여러 UI에 대한 컴포넌트가 있다.
(라이브러리를 사용할 때는 검증된 것을 사용하는것이 좋다👍)

Ant-Design 설치 방법
https://ant.design/docs/react/introduce -> Installation 부분 참조!
vsCode 터미널에서 $ yarn add antd 하고 _app.tsx에서 import 'antd/dist/antd.css'한다.(필요할 때마다 css를 import해줘야 하지만 _app.tsx에 적용시킬 경우 모든 페이지에서 적용되기 때문)
그 후 ant-design에서 icon만 사용할 경우 $ yarn add @antd-design/icons를 설치하면 된다.
여러 디자인을 사용하는 것이 아닌 경우 필요한 디자인만 설치하는게 용량관리에 좋다👌

---

Ant-Design UI 사용 예시

import { AndroidOutlined } from '@ant-design/icons'

export default function LibraryIconPage(){
  return <AndroidOutlined />
}

↓ style을 적용할 경우 아래의 코드처럼 사용하면 된다.

import { AndroidOutlined } from '@ant-design/icons'
import styled from '@emotion/styled'

const MyIcon = styled(AndroidOutlined)`
  font-size: 2rem;
  color: red;
`

export default function LibraryIconPage(){
  return <MyIcon />
}

---

Material-UI

https://mui.com/
이것 또한 ant-design과 같은 리액트 프레임워크이다. ant-design과는 다른 디자인 모음이 있다.

MUI 설치 방법
https://mui.com/getting-started/installation/ -> Installation 부분 참조!

---

React Player

https://www.npmjs.com/package/react-player
youtube등 url을 사용하여 player를 렌더링한다.

React Player 설치 방법
https://www.npmjs.com/package/react-player -> Usage 참조!
$ npm install react-player 또는 $ yarn add react-player을 설치하면 된다.

설치 후

import ReactPlayer from 'react-player'

<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

url = ''에 원하는 url을 넣으면 된다.