PropsWithChildren이라는 타입에 대하여

children을 사용할 때에는 타입에 조금 신경을 쓸 필요가 있다고 이전 포스팅에서 언급한 적이 있습니다.

이번 포스팅도 그것과 관련된 내용입니다.

React에서는 PropsWithChildren이라는 타입을 제공하고 있는데, 아마 모르시는 분들도 많이 계실 것 같습니다. 저도 최근에 알았습니다…

이 타입을 쓰면 굳이 children을 props에 추가하지 않아도 children을 사용할 수 있어서, children 을 사용할 때는 PropsWithChildren 를 쓰는게 좋다는 내용들을 인터넷에서 종종 볼 수 있습니다.

하지만 사실 이 PropsWithChildren 타입을 들여다보면 children이 옵셔널로 정의되어 있다는 것을 확인할 수 있습니다.

정말 그런지 직접 살펴봅시다.

우선, 아래와 같이 children 타입을 ReactNode로 지정하면 Component 안에 아무것도 없는 경우 에러가 뜨는 것을 확인할 수 있습니다.

그 다음으로는 PropsWithChildren 타입을 사용해보겠습니다.

보시다시피 아무 에러도 없는 것으로 확인됩니다.

children을 사용할 때는 굳이 매번 children: ReactNode라고 하지 않아도 PropsWithChildren 을 쓰면 편리하다, 그러니 적극적으로 PropsWithChildren 을 사용하자, 이렇게 주장하는 개발자 분들도 계십니다.

하지만 위에서 확인한 것처럼 PropsWithChildren 을 남용하면 위험할 수 있습니다.

우리가 타입스크립트를 사용하는 이유 중 하나는 타입 보장을 해서 개발자가 실수를 했을 때 런타임에서 에러를 보여줘서 코드를 안전하게 짤 수 있다는 것입니다.

하지만 children을 사용할 때 매번 타입을 습관적으로, 혹은 귀찮다고 해서 ReactNode로 하거나 PropsWithChildren 타입을 사용한다면 다른 개발자가 해당 코드를 보거나 해당 컴포넌트를 사용해야 할 때 문제가 생길 수 있습니다. 복잡한 컴포넌트인 경우라면 특히 더 그렇겠죠?

좋은 코드는 별도의 문서를 남기지 않더라도 그 코드만으로도 좋은 문서 역할을 할 수 있습니다. 그래서 타입에는 항상 신경을 써야 한다고 생각합니다.

오늘 포스팅은 조금 짧지만 여기까지입니다!

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