리액트 - classnames로 CSS 스타일 조건부 렌더링하기

리액트 전체 링크

 

참고

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

 

- styled-components로 타이핑 효과 만들기

- module.css로 CSS 스타일 관리하기

- classnames로 CSS 스타일 조건부 렌더링하기

 

classnames를 이용하면 리액트에서 조건부로 css를 적용할 수 있다.

 

먼저 classnames 라이브러리를 설치한다.

npm install classnames

 

module.css로 관리할 CssTest.module.css 파일은 다음과 같다.

.blue_input {
    border: 0;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: blue;
}

.input {
    border: 0;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
}

.red {
    background-color: red;
}

.active {
    background-color: black;
}

 

리액트의 예시 코드는 다음과 같다.

import React, { useState } from "react";

import classnames from 'classnames/bind';
import styles from "./CssTest.module.css";

const mycss = classnames.bind(styles);

const CssTest = () => {
  const [toggle, setToggle] = useState(false);

  const blue = mycss("blue_input");
  const red = mycss("input", "red"); // or mycss(["input", "red"]);
  const activeInput = mycss(styles.blue_input, {
    active: toggle,
  });

  return (
    <div>
      <input className={blue} type="text" placeholder="CSS TEST 1" />
      <input className={red} type="text" placeholder="CSS TEST 2" />
      <input className={activeInput} type="text" placeholder="CSS TEST 3" />      
      <button onClick={() => setToggle(!toggle)}>toggle</button>
    </div>
  );
};

export default CssTest;

 

코드를 실행해 보자.

 

classnames의 bind 메서드로 styles를 가져온다.

import classnames from 'classnames/bind';
import styles from "./CssTest.module.css";

const mycss = classnames.bind(styles);

 

css 파일의 .blue_input은 아래와 같이 가져올 수 있다.

const blue = mycss("blue_input");

 

그리고 input의 className에 blue를 적용하면 된다.

<input className={blue} type="text" placeholder="CSS TEST 1" />

 

실제 css 파일의 .blue_input이 그대로 잘 적용된다.

.blue_input {
    border: 0;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: blue;
}

 

여러 css를 한 번에 적용할 수도 있다.

아래와 같이 기본 input과 red를 ","로 합치거나 배열로 넣어준다.

  const red = mycss("input", "red"); // or mycss(["input", "red"]);

 

.input과 .red가 합쳐서 적용되는 것을 확인해 보자.

.input {
    border: 0;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
}

.red {
    background-color: red;
}

 

마지막으로 조건부 렌더링도 가능하다.

toggle을 useState로 선언한 후, 버튼으로 on / off하면 active가 적용되거나 해제된다.

  const [toggle, setToggle] = useState(false);

  const activeInput = mycss(styles.blue_input, {
    active: toggle,
  });

 

toggle이 true가 되어 .active가 적용된 경우 input의 배경색이 검은색으로 변한다.

.blue_input {
    border: 0;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: blue;
}

.active {
    background-color: black;
}