삼항연산자를 사용해야 할 때는?

  const renderChart = () => {
    if (chartType === "area") {
      return <SubAreaChart data={data} />;
    }
    if (chartType === "bar") {
      return <SubBarChart />;
    }
    return <p className="text-xs text-[rgb(var(--nav-text))]">Unknown Chart</p>;
  };

가독성을 위해 삼항연산자를 활용해야 할까?

내 생각은 No이다.

조건이 두 개(A 아니면 B)일 때는 삼항 연산자가 유리하지만, 지금처럼 조건이 세 개 이상일 때 삼항 연산자를 사용하면 중첩 삼항 연산자 가 되어 오히려 코드를 읽기 힘들어진다.

const renderChart = () => {
  return chartType === "area" ? (
    <SubAreaChart data={data} />
  ) : chartType === "bar" ? (
    <SubBarChart />
  ) : (
    <p className="text-xs text-[rgb(var(--nav-text))]">Unknown Chart</p>
  );
};

이런식으로 말이다.

찾아보니 Javascript의 Object를 활용한 매핑방식도 있다.

const renderChart = () => {
  // 조건에 따른 컴포넌트를 미리 매핑
  const chartMap = {
    area: <SubAreaChart data={data} />,
    bar: <SubBarChart />,
  };

  // 일치하는 차트가 있으면 반환, 없으면 기본값을 반환
  return chartMap[chartType] || <p className="text-xs text-[rgb(var(--nav-text))]">Unknown Chart</p>;
};