react에서 조건적으로 스타일을 제공하는 방법 (classNames)

보통 html에서 스타일을 적용하기 위한 class 추가는 다음과 같은 형식으로 사용한다.

<div class="클래스이름"></div>

리액트에서는 JSX문법을 사용함으로써, class 대신 className을 사용하여 클래스명을 지정해준다.

return <div className="클래스이름"></div>;

여러개의 class를 사용할 때에도 그냥 나열하면 쉽다.

return <div className="클래스이름1 클래스이름2 클래스이름3"></div>;

 

---

className는 react에서 조건부로 스타일이 필요한 경우 className에서 손쉽게 사용하도록 도와주는 모듈이다.

https://www.npmjs.com/package/classnames

classnames

classnames는 크게 다음과 같은 상황에 많이 사용된다.

1. 여러 클래스를 추가 할 때,
2. 어떤 값의 true/false에 따라 class가 달라져야 할 때,
3. 특정 변수에 저장된 값을 class로 사용할 때,

하단 코드를 자세히 살펴보면 어떤말인지 이해가 쉽다. false, null, undefined, 0 등으로 false와 같은 취급을 당하는 class명을 모두 제거(주석)되어 적용된다.

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

이러한 특징들을 통하여 다음과 같이 사용할 수 있다.

const useMargin = true;

return <div className={classnames('클래스이름1', {'마진클래스이름': useMargin})}></div> ;
// html : <div class='클래스이름1 마진클래스이름'></div>

여기서 기본적으로 '클래스이름1'의 class가 적용되고, useMargin값이 true임에 따라 '마진클래스이름'이 적용된다.