NextJS에서 컴포넌트 사용예제

Props로 받은 값을 컴포넌트 내에서 분기를 해야하는 경우에 대해서 사용한 예제임
아래 예제에서 분기는 2패턴이 존재함
조건이 2개일때랑 조건이 3개일때

1. 조건이 2개인 경우

const borderColor = color === "blue" ? "border-blue-600" : "border-gray-900";

2. 조건이 3개인 경우

const sizeClass = {
        small: "h-6 w-6",
        normal: "h-8 w-8",
        big: "h-12 w-12",
}[size];

아래는 실제 사용예제

type LoadingProps = {
    color?: "gray" | "blue";
    display?: "" | "inline-block";
    size?: "small" | "normal" | "big";
};

export default function Loading({
    color = "blue",
    display = "",
    size = "normal",
}: LoadingProps) {
    // 1. 조건이 2개일때
    const borderColor =
        color === "blue" ? "border-blue-600" : "border-gray-900";
    const displayClass = display === "inline-block" ? "inline-block" : "";
  
    // 2.조건이 3개일때
    const sizeClass = {
        small: "h-6 w-6",
        normal: "h-8 w-8",
        big: "h-12 w-12",
    }[size];

    return (
        <div
            className={`animate-spin rounded-full border-t-2 border-b-2 mx-auto ${borderColor} ${displayClass} ${sizeClass}`}
        />
    );
}