TypeScript에서 구성 요소의 소품을 재사용하는 방법

실제로 해당 구성 요소의 일부가 아니고 다른 구성 요소에서 사용되는 소품에 대한 유형을 정의하는 경우가 종종 있습니다.

간단한 예를 들어 보겠습니다.
다음 소품이 있는 부모 및 자식 구성 요소가 있다고 가정합니다.

import React from 'react';
import { Child } from './Child';

type Props = {
  greeting: string;
  firstName: string;
  lastName: string;
};

export const Parent: React.FC<Props> = ({ greeting, firstName, lastName }) => {
  return (
    <>
      <span> {greeting}</span>
      <Child firstName={firstName} lastName={lastName} />
    </>
  );
};

import React from 'react';

type Props = {
  firstName: string;
  lastName: string;
};

export const Child: React.FC<Props> = ({ firstName, lastName }) => {
  return (
    <>
      <div>{firstName}</div>
      <div>{lastName}</div>
    </>
  );
};

⚠️ 문제 설명:

반복되는 소품

firstName 및 lastName에 대한 유형도 하위 구성 요소로 전달되어야 하기 때문에 상위에서 정의됩니다.

코드 동기화 문제

한 부분이 변경되면 다른 부분도 동기화 상태를 유지해야 합니다.

하위 구성 요소가 다른 곳에서 유사한 패턴으로 사용되는 경우 그곳에서도 소품을 업데이트해야 합니다.

💡 솔루션:

ComponentProps를 사용하여 구성 요소 유형에서 직접 Props를 추출하고 나머지 및 확산 구문을 사용하여 반복을 피할 수 있습니다.

import React, { ComponentProps } from 'react';
import { Child } from './Child';

type Props = ComponentProps<typeof Child> & {
  greeting: string;
};

export const Parent: React.FC<Props> = ({ greeting, ...childProps }) => {
  return (
    <>
      <span> {greeting}</span>
      <Child {...childProps} />
    </>
  );
};

이익:

부모의 소품을 자식 소품과 병합하여 생성하면 코드 동기화 문제가 해결됩니다.

고유한 정보 소스를 만듭니다.

추신: 하위 구성 요소의 소품 중 일부만 필요한 경우 Partials를 사용할 수 있습니다.
#coding #softwareengineering #productivity #webdeveloper #cleancode #codingtips #javascript #webdev #devlife #programming #computerscience