React Props 제한하기: & 와 | 연산자 활용

React Props 제한하기: & 와 | 연산자 활용

상황

• 예를들어 A라는 prop이 있을 때, B라는 prop을 가졌으면 좋겠고, C라는 prop이 있을 때, D라는 prop을 가졌으면 좋겠다.
• 다음과 같이 하면 제한이 되지 않는다.

import React from "react";

/**
 * 상황 1
 * money가 won or dollor 값을 가지고, won일때는 KR이라는 prop이, dollar일 때는 US라는 prop이 오기를 기대한다.
 */

type ChildProps = {
  name: string;
  money: "won" | "dollar";
  KR?: string;
  US?: string;
};

const Child = ({ name, money, KR, US }: ChildProps) => {
  return <div>Child</div>;
};

const Parent = () => {
  return <Child name="tom" money="won" KR="1000₩" US="1$" />;
};

export default Parent;

• 다음과 같이 수정할 수 있다.

import React from "react";

/**
 * & 와 |을 적절히 사용하여 타입을 제한할 수 있다.
 * won일 때는 KR이라는 prop이, dollar일 때는 US라는 prop이 오게된다.
 */

type ChildProps = {
  name: string;
} & ({ money: "won"; KR: string } | { money: "dollar"; US: string });

const Child = ({ name, money }: ChildProps) => {
  return <div>Child</div>;
};

const Parent = () => {
  return <Child name="tom" money="won" KR="1000₩" />;
};

export default Parent;