[TypeScript] 인터페이스로 함수의 타입 정의

오른쪽처럼 그냥 함수를 쓰면 되는건데 왜 타입스크립트에서는 저 타입 지정 Interface를 만들고 함수에 타입을 지정해주는 걸까? 

=> react에서 props로 함수를 넘겨줄 때 많이 사용되는 방식이다.

부모 자식간에 컴포넌트로 props로 데이터가 넘어갈 때 생기는 타입 오류를 사전에 막아준다.

 

 

1. 같은 타입의 매개변수를 사용하는 함수가 여러개일 때 매개변수 타입을 안적어도된다.

// [방식 A] 타입을 지정하지 않은 경우: 매번 타입을 적어야 함 (귀찮음)
const add = (x: number, y: number) => x + y;
const sub = (x: number, y: number) => x - y;

// [방식 B] 타입을 미리 지정한 경우: 구현할 때 깔끔함!
interface MathFunc {
  (x: number, y: number): number;
}

const add: MathFunc = (x, y) => x + y; // x, y가 number라고 자동으로 알음!
const sub: MathFunc = (x, y) => x - y;

 

2. 동일한 형식의 함수를 규격화할 때 일관성을 부여한다. 

예를들어 모든 계산함수는 2개의 숫자를 받아 1개의 숫자를 반환한다라는 규칙이 있다면 아래와같은 에러를 발생시켜 함수의 일관성을 부여할 수 있다. 

interface Calculator {
  (a: number, b: number): number;
}

// 개발자 A가 실수로 문자열을 반환하게 짬 -> 바로 에러 발생! 빨간 줄!
const multiply: Calculator = (a, b) => {
  return "결과: " + (a * b); // Error: Type 'string' is not assignable to type 'number'.
};

 

 

 

 

 

3. react에서 컴포넌트 생성시 interface로 만들어두면 props로 데이터를 넘겨줄 때 생기는 타입 에러를 줄일 수 있음 

예시 1 :  부모 -> 자식 간의 Props 검증

Mybutton.tsx : 하위컴포넌트 예시 (onClick 의 타입을 명시해두었다), 어떤 함수가 넘어와야하는지 명시 

부모컴포넌트 예시 

 

예시 2 
자식 -> 부모 데이터를 보내는 경우

자식 컴포넌트 (UserForm.tsx)

interface UserFormProps {
  // "문자열(username)을 받아서 아무것도 반환하지 않는 함수"
  onSave: (username: string) => void;
}

const UserForm = ({ onSave }: UserFormProps) => {
  const [name, setName] = useState("");

  const handleSave = () => {
    // 여기서 onSave를 호출할 때, 문자열을 안 넣으면 TS가 에러를 냅니다!
    // "Argument of type 'string' is expected."
    onSave(name); 
  };

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={handleSave}>저장</button>
    </div>
  );
};

부모 컴포넌트 

const App = () => {
  // 자식이 데이터를 담아서 호출해줄 함수
  const handleUserSave = (name: string) => {
    console.log("새로운 유저 이름: ", name);
  };

  return (
    // onSave 자리에 handleUserSave를 전달
    <UserForm onSave={handleUserSave} />
  );
};

 

 

작동원리

부모 컴포넌트 (App.tsx)

부모쪽에서 handleUserSave를 만들 때 name이 string으로 정해주지 않으면 에러가 발생됨 
handleUserSave가 자식 컴포넌트의 onSave라는 자리(변수)에 할당 Assigned되었기 때문

react는 단방향 데이터 흐름의 원칙이 있다. 부모 -> 자식으로만 데이터가 흘러야한다는 것인데, 자식컴포넌트에서 부모에게 전달하는 방식은 State 끌어올리기 (Lifting State Up) 패턴이 있다. 

함수참조 (함수 메모리의 주소를 전달하는 방식) 전달의 자바스크립트 기본원리를 이용한다. 
부모 -> 자식 : 함수(도구)전달
자식 -> 부모 : 그 함수를 실행(호출)하면서 데이터(인자)를 실어 보냄

부모에서 지정한 함수의 실체인 handleUseSave는 자식에게 전달되었을 때
자식에서 지정된 인터페이스 (string을 받아 void리턴) UserFormProps를 따른다. 

매개변수 타입과 반환 타입이 동일하면 에러가 안난다 (이름이 다른건 상관 X).
부,자 사이의 props 전달 과정에서 타입이 맞지 않으면 에러가 발생한다