매개변수의 초과 허용 및 콜백 함수의 호환성

1. child 컴포넌트는 인자를 2개를 사용한다.

 

2. parent 컴포넌트는 인자 1개만 부른다.

 

3. 의문은 인자를 2개를 자식에서 전달해도 부모에서 한개만 받아도 에러가 안난다. 이유는?

구조적 타이핑의 유연성

 

chat gpt 물어본 결과

타입스크립트에서 함수 타입의 호환성을 다룰 때, 특정 상황에서는 부모 함수(콜백 함수)를 자식 함수에 전달할 때 에러가 발생하지 않을 수 있습니다. 이는 타입스크립트가 구조적 타이핑(Structural Typing)을 사용하기 때문입니다. 구조적 타이핑은 타입의 이름이 아니라 실제 구조에 따라 타입을 판단합니다. 따라서, 함수의 매개변수와 반환 타입이 부분적으로 호환될 경우 타입 불일치 에러가 발생하지 않을 수 있습니다.

자세히 살펴보면, 타입스크립트는 함수 타입의 호환성을 다음과 같이 처리합니다:

1. 매개변수의 초과 허용

자식 함수가 부모 함수에 전달된 콜백 함수를 호출할 때, 콜백 함수가 필요로 하는 매개변수보다 더 많은 매개변수를 전달하는 것은 허용됩니다. 즉, 콜백 함수는 필요한 매개변수만 사용하고 나머지는 무시할 수 있습니다.

 

interface ParentProps {
  onChange: (textContent: string) => void;
}

const ParentComponent: React.FC<ParentProps> = ({ onChange }) => {
  return <ChildComponent onChange={onChange} />;
};

interface ChildProps {
  onChange: (textContent: string, contentId: string) => void;
}

const ChildComponent: React.FC<ChildProps> = ({ onChange }) => {
  const handleChange = (textContent: string) => {
    onChange(textContent, "someContentId"); // "someContentId"는 추가된 매개변수
  };

  return <input onChange={(e) => handleChange(e.target.value)} />;
};

2. 콜백 함수의 호환성

자식 컴포넌트에서 사용하는 콜백 함수가 부모 컴포넌트에서 정의된 콜백 함수와 호환되기만 하면 타입스크립트는 에러를 발생시키지 않습니다. 즉, 자식 컴포넌트에서 추가된 매개변수가 부모 컴포넌트에서 정의된 콜백 함수에 영향을 미치지 않는 경우 타입스크립트는 이를 허용합니다.

const ParentComponent = () => {
  const handleChange = (textContent: string) => {
    console.log(textContent);
  };

  return <ChildComponent onChange={handleChange} />;
};

interface ChildProps {
  onChange: (textContent: string, contentId: string) => void;
}

const ChildComponent: React.FC<ChildProps> = ({ onChange }) => {
  const handleChange = (textContent: string) => {
    onChange(textContent, "someContentId");
  };

  return <input onChange={(e) => handleChange(e.target.value)} />;
};

위 코드에서는 ParentComponent에서 handleChange 함수가 하나의 매개변수(textContent)만 받습니다. 하지만 ChildComponent는 두 개의 매개변수(textContent와 contentId)를 받는 onChange 함수를 기대합니다. ChildComponent에서 onChange 함수를 호출할 때 추가 매개변수를 전달하지만, ParentComponent의 handleChange 함수는 첫 번째 매개변수만 사용합니다. 타입스크립트는 이를 허용합니다.

정리

타입스크립트의 함수 호환성은 매개변수의 개수와 관계없이, 필요한 매개변수만 사용하는 것을 허용합니다. 따라서, 부모 함수가 적은 매개변수를 필요로 하는 경우에도 자식 함수에서 더 많은 매개변수를 전달할 수 있습니다. 이는 구조적 타이핑의 유연성 때문입니다. 이로 인해 에러가 발생하지 않으며, 코드가 정상적으로 작동합니다.