[TIL]

CSS

: CSS를 작성하게 될 때 가장 중요한 점은 중복되는 클래스명 생성하지 않기

classNames

: classNames는 CSS클래스를 조건부로 설정 할 때 사용하는 라이브러리이다. CSS Module을 사용할 때 이 라이브러리를 함께 사용하면 여러 클래스를 적용할 때 편해진다.

$ yarn add classnames

import classNames from 'classnames';

classNames('one', 'two');	// 'one two'
classNames('one', { two: true });	// 'one two'
classNames('one', { two: false });	// 'one'
classNames('one', [ 'two', 'three']);	// 'one two three'

const myClass = 'hello';
classNames('one', myClass, { myCondition: true });	// 'one hello myCondition'

: boolean값을 이용해서 스타일을 적용할 수 있다. 이 라이브러리를 사용하게 되면 props의 값에 따라 다른 스타일을 적용시킬 때 유용하다.

// classNames 사용하기 전 props 변화값에 따른 스타일 적용 방식
const MyComponent = ({ highlighted, theme }) => {
  <div className={`MyComponent ${theme} ${highlighted ? 'highlighted' : ''}`}>Hello</div>

// classNames 사용 후 
const MyComponent = ({ highlighted, theme }) => {
  <div className={classNames('MyComponent', { highlighted }, theme)}>Hello</div>
}
// highlighted 값이 true이나 false에 따라 highlighted라는 클래스가 바뀌게 된다. 

classNames를 불러올 때 classnames/bind를 사용하면 클래스를 넣어줄 때마다 styles.[클래스] 형식으로 할 필요 없이, 사전에 미리 styles에서 받아와서 사용하게끔 설정해두고 cx('class1', 'class2')형태로 사용할 수 있게 된다.

// src/CSSModule.js

import React from 'react';
import classNames from 'classnames/bind';
import styles from './CSSModule.module.css';

const cx = classNames.bind(styles); // 미리 styles 에서 클래스를 받아오도록 설정

const CSSModule = () => {
  return (
    <div className={cx('wrapper', 'inverted')}>
    	Hello, <span className="something">CSS Module</span>
    </div>
   );
};

export default CSSModule;

[참고] https://velog.io/@velopert/react-component-styling