classnames 라이브러리를 사용하여 동적 class 추가하기

공부 계기 📚

https://byolsfolio.netlify.app/

인터랙티프 포트폴리오를 만드는 중, hover를 하면 데이터에 있는 원하는 배경화면 색상이 나오지 않는 상황이 발생했다.

 

문제 원인 📃

Tailwind CSS 설정은 맞은 상태인데, Tailwind CSS의 ‘hover’상태 클래스는 직접 문자열 템플릿으로 동적으로 추가할 때 원활히 추가되지 않는 경우가 있다.

 

Tailwind CSS가 빌드 과정에서 동적으로 생성되는 클래스를 미리 인식하지 못하기 때문이다. Tailwind CSS는 빌드 시, 사용되는 클래스를 분석하여 CSS를 생성한다. 만약 클래스 이름이 문자열 템플릿이나 동적 변수로 지정된 경우, Tailwind는 이를 감지하지 못하고 CSS를 생성하지 않을 수 있다.

 

 

해결 방법 📃

classnames 라이브러리를 사용하여 문제를 해결할 수 있었다.

 

classnames 라이브러리는 동적으로 클래스 이름을 결합하거나, 조건부로 클래스를 추가하기 위해 사용된다. 특히 React와 같은 프레임워크에서 유용하게 사용된다.

 

 

활용 예시 🪄

npm install classnames

 

1. 라이브러리 설치

 

 

import classNames from "classnames";

 

2. 사용할 곳에 해당 라이브러리 임포트

 

 

3. 수정 전 코드

<div
	className={`transition duration-300 ease-in-out font-NanumSquareNeo hover:text-customBlack grid grid-cols-1 sm:grid-cols-[1fr_2fr] group mb-8 hover:${project.hoverColor}`}
>

 

 

4. 수정 후 코드

            <div
              className={classNames(
                "transition",
                "duration-300",
                "ease-in-out",
                "font-NanumSquareNeo",
                "hover:text-customBlack",
                "grid",
                "grid-cols-1",
                "sm:grid-cols-[1fr_2fr]",
                "group",
                "mb-8",
                project.hoverColor // Apply the dynamic hover color class
              )}
            >

 

 

이렇게 하면 데이터가 반영된 호버 기능이 동작되는 것을 알 수 있다.