리액트에서 classnames 사용방법

classnames는 CSS 클래스를 조건부로 설정할 때 유용한 라이브러리이다.

 

yarn 혹은 apt-get으로

 

yarn add classnames

 

해준다.

 

간략하게 설명하자면 가독성이 좋게 여러가지 클래스를 넣어줄수도 있고,

 

문자열, 키밸류쌍으로된 객체, 배열등을 classNames()의 소괄호 안에 넣어서 사용할 수 있다.

 

객체안에 밸류값으로 true나 false값을 갖는 boolean을 줄 수 있기 때문에

 

리액트에서는 부모로부터 전달받은 props의 상태값에 따라 스타일의 변화를 줄때 사용하면 좋다.

 

const MyComponent = ({ highlighted, theme }) => {
	<div className={`MyComponent ${theme} ${highlighted ? 'highlighted' : ''}`}>
    	Hello
    </div>
};

예시 코드는 classnames를 사용하지 않고 순수 자바스크립트와 리액트만 가지고 조건부 클래스이름을 설정해준 예시이다.

 

리액트에서는 기본적으로 class="" 이런식이 아니라 className={} 형태를 사용한다.

 

이떄 이 안에 변수를 담으면서 띄어쓰기를 보이는대로 지켜주기 위해 백틱을 사용한 ES6 템플릿 문자열을 사용했다.

 

또 이 안에서 조건부 클래스명을 주기위해 삼항연사자까지 사용하였다.

 

이 코드는 classNames 라이브러리를 쓰게 되면 이렇게 변한다.

 

const MyComponent = ({ highlighted, theme }) => (
	<div className={classNames('MyComponent', { highlighted }, theme)}>Hello</div>
)

 

위의 두 코드 공통으로 props에서 highlighted와 theme값을 받아온다고 생각하면 된다.

 

가독성이 후자가 더 좋다. 하지만 classNames의 기능을 이해하지 못하면 이게 무슨말인가 이해를 못할 수 있다.

 

 

또 classnames의 bind를 이용해서 더 짧은 변수에 할당시켜놓고 사용할수도 있다.

 

예제 코드 출처:리액트를 다루는 기술中