[NextJS] 컴포넌트 재사용성을 높이자!! (ft. tailwind CSS)

서론

 

	<div className="py-[10px]">
          {/* 타이틀 */}
          <span className="py-[3px] text-ellipsis">배고프다</span>
          <div className="flex flex-row justify-between">
            <div>
              <span className="mr-[10px]">
                <span className="font-semibold">14,000</span>원
              </span>
              {/* 정가 */}
              <span className="text-[14px] text-[#999] line-through">
                <span>20,000</span>원
              </span>
            </div>
            <span className="text-blue-500 font-semibold text-[13px]">
              <span className="text-[17px]">35</span>%
            </span>
          </div>
        </div>

 

 

테일윈드 CSS를 사용하여 작업한 컴포넌트인데, 이 컴포넌트에서 반복이 너무 많고, 최대한 줄일 부분이 보여서 재사용성을 높여보자!

 

기준 정하기

 

먼저, 할인된 가격과 정가, 그리고 할인률. 이 세 가지의 기준으로 나눌 수 있으니, 조건부 스타일링으로 작업할 것이다.

 

이때, ES6의 템플릿 리터럴을 사용해야 tailwind css에서 제대로 조건부 스타일링이 적용된다. 

 

interface DisplayPriceProps {
  isListPrice: boolean;
  isDiscount: boolean;
  numVal: string;
}

function DisplayPrice({ isListPrice, isDiscount, numVal }: DisplayPriceProps) {
  return (
    <p>
      <span
        className={`text-[14px] ${
          isListPrice ? "text-[14px] text-[#999] line-through" : ""
        } ${isDiscount ? "text-blue-500" : "mr-[10px]"}`}
      >
        <span className={`${isListPrice ? "" : "font-semibold text-[17px]"}`}>
          {numVal}
        </span>
        {isDiscount ? "%" : "원"}
      </span>
    </p>
  );
}
export default DisplayPrice;

 

기준에 따라서 이렇게 작업하였고, 이제 적용을 해보자!

 

결과

 

	<div className="flex flex-row justify-between">
            <div>
              <DisplayPrice
                isDiscount={false}
                isListPrice={false}
                numVal="14,000"
              />
              {/* 정가 */}
              <DisplayPrice
                isListPrice={true}
                isDiscount={false}
                numVal="20,000"
              />
            </div>
            <DisplayPrice isListPrice={false} isDiscount={true} numVal="35" />
          </div>

 

렌더링된 화면은 변하지 않았고, 코드 가독성이 상당히 좋아졌다.

 

별 차이가 없는거 아냐? 라고 생각할 수 있지만, 다른 사람이 내가 짠 tailwind css를 해석할 때의 작업 능률이 올라갔다고 생각하면 편하다.

 

물론, numVal를 formatting해서 콤마를 찍을 수는 있으나, 지금은 더미 데이터를 넣는 중이므로 다음 기회에...