React:classnames(cn) 함수

classnames(cn) 함수가 모얌?

인자에 들어간 값이 true면 class로 넣어주고, false면 안넣어준다 !

예를 들어,

<div className={cn('checkbox', { checked })}>
  

className에 true에 해당하는 값은 추가로 표시가 되고, false가 된다면 className에 적용되지 않는다.

checkbox 를 checked에서 나온 true 또는 false의 값을 갖도록 하나로 묶어준 뒤, 하나의 묶음으로 조건부 스타일링을 할 수 있도록 도와주는 것이다.

따라서, 이 부분이 체크표시가 됐다면 checkbox checked라고 표시가 되는 것이고, checked가 false라면 checked가 적용이 되지 않아서 checkbox만 className에 적용될 것이다.

추가적인 cn 예시

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

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