Css 라이브러리와 리액트

리액트 프로젝트를 할때 우리는 직접 css를 쓸것인지 아니면 css 라이브러리를 쓸것인지 선택해야한다. 사실 모든 css를 직접 쓷것은 조금 귀찮고 시간을 낭비할수있다.(그리고 무엇보다 안예쁠수있다...) 그래서 우리는 css 라이브러리를 쓴다. 많은 라이브러리들이 있지만 그중에서도 많이 쓰이는것은 Material UI, Bootstrap, Semantic, and Bulma 정도가 되겠다.

1. Material UI
   특징 : 머테리얼 UI는 구글에서 만들고 관리하는 라이브러리다. 포멧팅과 syntax에 있어서 매우 특정되지만 아주 유용한 라이브러리이다. 또한 사용자가 쓰려는 많은 jsx/html 태그들에 대한 많은 커스텀 옵션들이있다.자주 업데이트되며 버그가 많지 않다.머테리얼 UI는 리액트에서 가장 많이 사용되는 프레임워크이다.

// 터미널에서 이런식으로 라이브러리를 설치할수있다
npm install @material-ui/core
//또는
yarn add @material-ui/core

2.Bootstrap
특징 :부트스트랩은 가장 흔하게 사용되고 사용자의 포트폴리오를 웹 개발자만큼 보이도록 도와주는 프레임워크 이다.많은 회사들이 이력서에 부트스트랩을 써본 경력이 있는것을 선호한다고 한다. 사용하기에 쉽다고 얘기할수는 없으나 개발자에게 많은 디자인 옵션을 주고 매력적인 디자인을 선보인다고 할수있다.

npm install react-bootstrap bootstrap
// 또는
yarn add react-bootstrap bootstrap
//then you'll want to import it and any other Component to your //components
import Button from 'react-bootstrap/Button';

3. Semantic UI
   특징 : Semantic UI 는 사용하고 설치하기에 상대적으로 간단한 라이브러리다. 하지만 개발자에게 적은 옵션을 제공하고 이 라이브러리만의 절대적인 특정스타일이 있다.

npm install semantic-ui --save
//또는
yarn add semantic-ui --save

4. Bulma
   특징 : Bulma 는 css를 써서 프로젝트를 만들기에 아주 심플하고 쉽다. 하지만 사용감이 썩 좋지는 않은데 그 이유는 사용자에게 컴포넌트에서 아주 디테일한 부분까지 신경써서 바꿔주기를 바라기 떄문이다. 벌마 라이브러리는 다른 라이브러리들처럼 많이 개발되지는 않았지만 아주 유니크한 모습의 앱을 만들수있게 해준다.

$ npm install --save react-bulma-components
//또는
$ yarn add react-bulma-components