테일윈드를 사용하여 스타일링을 하면서 비효율적인 방식으로 className을 사용하다 프로젝트를 통해 코드를 줄일 수 있는 방법에 대해 알게되었다.
기존에는
<div className={clickState? 'text-lg bg-white' : 'text-lg bg-black'}></div>이런 식으로 동일한 부분을 중복해서 코드를 작성했었다.
className이 짧으면 크게 상관이 없을지는 몰라도 길어지면 불편해지는 상황이 생긴다.
<div className={clickState? 'text-lg outline ouline-1 shadow outline-[#eee] bg-white' : 'text-lg outline ouline-1 shadow outline-[#eee] bg-black'}></div>프로젝트를 하다가 팀원들과 코드를 공유하며 이러한 문제점을 해결 할 수 있게되었다.
그 방법에 대해서 알아보자.
<div classname=`text-lg outline ouline-1 shadow outline-[#eee] ${clickState? bg-white : bg-black}`></div>이처럼 벡틱(``)을 사용하고 조건문이 필요한 부분을 ${}안에서 삼항연산자를 활용하여 해결하면 된다.
chill~