상황

리액트에서 컴포넌트 Test가 있다고 해보자.
이 Test 컴포넌트는 props로 a,b를 받을 수 있다.
근데 a를 props으로 받으면 b를 props으로 받지 못하고
b를 받으면 a를 props으로 받을 수 없다.

이러한 상황에서 type으로 props으로 컴포넌트를 제어하고 싶다.

Test 컴포넌트

const Test = ({a,b}) => {
  return <div>test</div>
}

우선 이런 컴포넌트를 대충 만들어봤다 저기서 받는 a,b 따로 쓰지는 않지만 props의 type를 선언하면 props을 받는것을 제어할 수 있다.

타입 잡기

interface TestPropsWithA {
  a: string;
  b?: undefined;
}

interface TestPropsWithB {
  a?: undefined;
  b: string;
}

이런식으로 type을 잡고
props 에 넣어준다

const Test = ({ a, b }: TestPropsWithA | TestPropsWithB) => {
  return <div>test</div>;
};

여기서 꼭 |유니언 타입으로 넣어줘야한다.

결과

이제 저 컴포넌트를 써보자

export default function App() {
  return <Test />;
}

props으로 아무것도 안넣었을때

타입 에러가 난다.

a 만 넣었을때

에러가 없다 !

b 만 넣었을때

마찬가지로 에러가 없다 !

a,b 둘 다 넣었을때

타입 에러가 생겼다.

이렇게 타입으로 컴포넌트를 막을 수도 있고
다른 방법도 있다.

error를 발생시켜 막는법

const Test = ({ a, b }: any) => {
  if (a && b) {
    console.error("a와 b중에 하나만 사용가능 합니다 :)");
    return null;
  }
  return <div>test</div>;
};

이런식으로 a와 b가 둘 다 존재하면 error를 던지고 null을 return하게 만들었다.

다른 좋은 방법이 있으면 댓글로 알려주시면 감사하겠습니다 :)