[nextjs+ts]( 번외) join과 tailwind를 활용하여 동적 css 구현

[nextjs+ts]( 번외) join과 tailwind를 활용하여 동적 css 구현

 

#join 함수를 활용하여 손쉽게 조건문을 적용 가능하다.

 

#조건을 위한 스테이츠 생성

const [loginState, setLoginState] = useState<"email" | "phone">("email");

 

#함수생성

function changeclass(...classnames: string[]) {
  return classnames.join(" ");
}

 

#조건 적용

 <button
              className={changeclass(
                "font-medium",
                method == "email"
                  ? "border-b border-red-500"
                  : "border-transparent"
              )}>
              클릭
            </button>

 

#nextjs #ts #TailwindCSS  #css #js #react #join #func #change view