children 타입 보장하기

컴포넌트를 설계할 때 children을 많이 사용합니다. 그리고 일반적으로 children 의 타입으로는 ReactNode를 쓰는 케이스가 많은데요. 저도 습관적으로 children을 쓸 때마다 ReactNode 타입을 지정해서 쓰고 있었습니다. 그런데 어느 날 문득 매번 children을 쓸 때마다 ReactNode를 쓰는 것이 과연 최선의 선택이 맞는건가 하는 생각이 들더군요. 🤔

아시다시피 children에 ReactNode 타입을 사용하면 React에서 사용할 수 있는 모든 유형의 요소를 사용할 수 있습니다. (ReactElement, String, Number, Null, undefined, array 등) 약간 any와 비슷한 느낌이 나는데요. 이렇게 광범위한 타입을 지나치게 많이 사용하면 좋지 않습니다. 타입 보장이 되지 않는다는 문제가 있기 때문입니다.

만약 위 코드에서 MyComponent의 자식으로 Child 컴포넌트만 사용할 수 있게 타입 보장을 하고 싶다면 어떻게 하면 좋을까요?

아래처럼 하면 됩니다.

children의 타입을 ReactElement<typeof Child>로 지정했습니다.

이렇게 하면 MyComponent는 오직 Child 컴포넌트만 자식 컴포넌트로 쓸 수 있는, 타입보장이 된 안전한 컴포넌트로 만들 수 있습니다.

이번에는 실제 사례를 살펴보겠습니다.

여기에 Filter라는 컴포넌트가 있습니다. 이름에서 알 수 있듯이 필터링하는 용도에 사용하는 UI 컴포넌트입니다.

코드는 아래와 같습니다.

위 코드 패턴이 조금 낯설게 보일 수도 있습니다. 만약 해당 패턴에 대해 궁금하시다면 이 포스팅을 먼저 읽어보시면 좋을 것 같습니다.

Filter 컴포넌트는 아래와 같이 Chip 컴포넌트를 사용한다고 가정하고 컴포넌트 설계를 했습니다.

그렇기 때문에 children을 ReactElement<typeof Chip>[]; 타입으로 지정했습니다. 이렇게 타입을 좁히면 Chip가 아닌 다른 컴포넌트는 사용할 수 없습니다.

컴포넌트를 설계하는 사람과 그 컴포넌트를 사용하는 사람은 다른 사람인 경우가 많습니다. 직접 만든 컴포넌트를 본인만 혼자 쓰는 경우는 실무에서는 거의 찾아볼 수 없죠. 그렇기 때문에 직접 만들지 않은 컴포넌트를 가져다가 쓰는 사람은 사용하다가 실수를 할 수 있는데, 그런 경우를 방지하기 위해 타입 보장을 해 주면 훨씬 안정적입니다.

끝까지 읽어주셔서 감사합니다!

전체 코드가 궁금하시다면 여기서 확인하실 수 있습니다.