[REACT] 라이브러리

*node_modules에서 라이브러리 불러오기

@import '../../../node_modules/libray/style';

 

위처럼 경로를 사용하다 보면 불편하기 때문에 

@import '~/libray/styles';

 

위와 같이 ~(물결 문자)를 사용하면 자동으로 node_modules디렉터리를 탐지하여 스타일을 불러올 수 있다.

---

include-media

반응형 디자인에 적용

open-color

색상을 편리하게 적용

 

설치

이런식으로 같이 설치 할 수 있다.

yarn add open-color include-media

---

 

classnames

CSS클래스를 조건부로 설정할 매우 유용한 라이브러리

설치

yarn add classnames

 

EX

import classNames from 'classnames';
classNames('one', 'two'); //one two
classNames('one', {two:ture}); //one two
classNames('one', {two:false}); //one

const MyComponent = ({a,b}) => (
	<div className={classNames('Mycomponent', {a}, b)}>Hello</div>
)

 

---

 

style-comonents

자바 스크립트 안에서 스타일을 선언하는 방식

CSS-in-JS방식이라고 한다.

 

장점

라이브러리가 풍부. 

이 라이브러리를 이용하여 컴포넌트를 만들면 따로 css나 scss확장자를 가진 스타일 파일을 생성하지 않아도 됨

 

설치

yarn add styled-components

 

---

react-icons

 

 

설치

yarn add react-icons

https://react-icons.github.io/react-icons/#/icons/md

React Icons