[React JS] classnames 모듈 활용

 

 리액트 프로젝트에서 클래스 이름을 조건에 따라 설정할 수 있는 방법이 있다.

바로 classnames 모듈을 사용하는 것이다.

 

리액트에서는 class를 사용하는 대신 className을 사용한다.

return(
  <div className = "todo-box">
  </div>
)

위와 같이 리액트에서 className을 활용할 수 있다.

 

 

classnames 모듈

classnames 모듈은 특정 class 이름을 가진 값이 true 혹은 false인 상황에 따라 클래스명 추가하거나, 여러 클래스를 추가할 때 등 조건부로 클래스를 설정할 때 유용하다.

 

우선 classnames 모듈을 사용하기 위해서 명령어를 입력해 해당 모듈을 설치해야 한다.

npm install classnames

 

설치가 완료하면 import 문을 이용해 classnames를 불러온다.

import cn from 'classnames';

위 예시는 cn 함수의 인수로 객체를 사용하여 조건부로 클래스명을 입력하도록 하려 한다.

 

return(
  <div className = {cn('checkbox', {checked})}>
    {checked ? <CheckBox /> : <CheckOutline />
  </div>
)

checkbox 클래스는 조건 없이 기본으로 추가되고, checked 값이 true이면 <CheckBox>가 false이면 <CheckOutline>이 실행되도록 조건을 추가하였다.