버튼 컴포넌트 1차

 

 

버튼 컴포넌트

"use Client";

import  { useRouter } from "next/navigation";

interface ButtonProps{
    text: string;
    onClick?: () => void;
    href?: string;
    className?: string;
}

export function Button({ text, onClick, href, className }: ButtonProps){
    const router = useRouter();

    // href가 있으면 버튼 클릭 시 페이지 이동
    const handleCLick = () => {
        if(onClick) onClick();
        if(href) router.push(href);
    };

    return(
        <button
            type="button"
            onClick={handleCLick}
            className={`btn ${className || ""}`}
        >
            {text}
        </button>
    )
}

 

💻 props class 안전 처리

✔ className={`btn ${className}`}

렌더링 => class="btn undefined"

✔  className={`btn ${className || ""}`}

렌더링 => class="btn "

✔  clsx 라이브러리 사용

import clsx from "clsx";

className={clsx("btn", className)}

=> undefined, null, false 자동 무시 → 깔끔하게 클래스 합치기 가능