[22.05.06] TIL

classnames 라이브러리 추가 내용

어제 개인 과제 리팩토링 과정에서 classnames 적용에 어려움이 있었다.
CSS Module을 이용해 스타일링을 하고 있었는데, 조건부 스타일링 과정에서 true일 때 styles.checked가 들어갈 수 있게 하는 방법을 몰랐다... 구글링해서 나온 답변은 다음과 같았는데

import classNames from 'classnames.bind'

const cx = classNames.bind(styles)

<p className={cx('title1', 'title2')} />

멘토님이 이 부분에 대한 커멘트를 남겨주셨다. 당장의 이점은 윗줄 한줄 추가하고 styles.를 안붙여도 된다는 장점 아닌 장점?이 있는데 저렇게 사용하기 위해 한 줄을 희생하면서까지 해야하나 싶나...라는 내용이다.

그래서 쓸 수 있는 방법은 무엇일까를 올려주셨다.

classNames={cx(styles.title, styles.bold)}
classNames={cx(styles.title, styles.bold, {[styles.show]: isShow})}

간단히 대괄호로 감싸주면 되는걸 왜 못찾아서 그랬는지... 사소한 것이라도 알아가서 적어본다.

git && github

깃과 깃헙은 정말 중요하다... 그동안은 팀 프로젝트를 해도 프론트를 혼자 맡아 큰 문제를 직면하지 못했지만, 오늘 팀원들과 각자 branch를 merge하는 과정에서 엄청 많은 conflict를 만날 수 있었다. 오늘은 연습이라 생각하고 하나씩 고쳐나갔지만 공부의 필요성을 느꼈다... 그리고 앞으로 리뷰를 주고받을 수 있다는 점이 기대된다.