궁금증

<aside> 💡 JSX 안에서 변수를 선언하는 것은 성능과 가독성 어떻게 고려해야할까?

</aside>

결론

<aside> 💡

• 조건이 간단하고, 성능에 큰 영향을 주지 않는 경우 JSX 내부에서 변수를 선언하여 사용하는 것이 좋다.
• 복잡한 계산이나 비싼 연산이 필요한 경우, 이를 컴포넌트 외부로 빼거나 useMemo 훅을 사용하여 최적화한다. </aside>

고민 시발점

export default function IntakePurposeCards({
  item,
  mid,
}: {
  item: z.infer<typeof NutrientIntakePurposes.findAllV1.outputRs>;
  mid: string;
}) {
  return (
    <Link
      className="cursor-pointer text-center font-bold"
      href={`/intake-purpose/${item.intake_purpose_id}?mid=${mid}`}
    >
      <Card
        className={`relative flex min-h-40 flex-col items-center justify-center rounded ${item.is_enabled !== IsEnabled.ENABLED ? 'bg-gray-100' : ''}`}
      >
        <div className="absolute right-2 top-1">
          {item.is_enabled === IsEnabled.ENABLED ? (
            <Badge variant="activeImpact"></Badge>
          ) : (
            <Badge variant="deActiveImpact"></Badge>
          )}
        </div>
        <div className={cn(`${item.is_enabled !== IsEnabled.ENABLED && 'text-nutrisync-300'}`, 'text-xl md:text-2xl')}>
          {item.intake_purpose_name}
        </div>
      </Card>
    </Link>
  );
}

위 코드에 대한 코드 리뷰이다.

• IntakePurposeCards 컴포넌트의 className 속성에서 조건부 렌더링이 인라인 스타일링으로 사용되고 있습니다.
• 개선 방법: 모든 스타일링을 className으로 통일하여 Tailwind CSS의 유틸리티 클래스를 사용하는 것이 좋습니다. 인라인 스타일링을 최소화하고, 가능한 한 Tailwind CSS의 유틸리티 클래스로 대체합니다.
• 리팩토링 후

const cardClasses = item.is_enabled !== IsEnabled.ENABLED ? 'bg-gray-100 text-nutrisync-300' : '';

return (
  <Card className={`relative flex min-h-40 flex-col items-center justify-center rounded ${cardClasses}`}>

JSX 안에서 변수를 선언하는 것에 대한 고려 사항:

1. 가독성:
   • JSX 내부에서 변수를 선언하면 코드가 깔끔하고 읽기 쉬울 수 있습니다. 특히 조건부 스타일링이나 특정 값을 재사용하는 경우, 그 값을 변수로 빼서 사용하는 것이 코드를 더 명확하게 만듭니다.
   • 예를 들어, 여러 군데에서 동일한 조건을 사용하는 경우, 그 조건을 변수로 선언해서 코드가 반복되지 않도록 하는 것이 좋습니다.
2. 성능:
   • 성능 측면에서 변수가 컴포넌트 렌더링마다 재선언되는 것에 대한 부담은 일반적으로 미미합니다. 대부분의 경우 이는 최적화 관점에서 크게 문제가 되지 않습니다.
   • 다만, 비싼 연산(예: 복잡한 계산, 큰 배열이나 객체를 다루는 경우)을 JSX 안에서 변수로 선언하면, 컴포넌트가 리렌더링될 때마다 해당 연산이 반복적으로 수행되기 때문에 성능에 영향을 미칠 수 있습니다. 이런 경우, 해당 변수를 컴포넌트 외부로 빼거나 useMemo 훅을 사용하여 최적화할 수 있습니다.
3. 관리 측면:
   • 변수를 JSX 안에 선언하면 해당 변수의 유효 범위(scope)가 컴포넌트 내부로 제한되기 때문에, 다른 곳에서 의도치 않게 사용되거나 수정될 염려가 없습니다. 이는 오히려 코드 관리 측면에서 이점이 될 수 있습니다.

그렇다면?