[React] 타입을 정의할 때 다른 모듈과 네이밍이 겹치는 경우

NEXTSTEP의 react-shopping-cart 미션을 진행하던 중에 아래와 같은 상황을 접하게 되었습니다.

ProductList라는 컴포넌트는 props로 타입이 Product인 product를 받아서, Product 컴포넌트의 props로 전달하면서 Product 컴포넌트를 렌더링해주고 있는데요. 글로 보면 상당히 혼란스럽네요.

 

그 이유는, 상품 목록을 화면에 출력해주기 위한 컴포넌트인 Product와, 리모트 데이터 스키마인 product의 타입인 Product가 같은 네이밍을 사용하고 있어서 그렇습니다.

처음에는 고민을 좀 했었는데요. 저는 타입스크립트의 interface나 type alias에 I, T와 같은 prefix를 붙이기 보다는 다른 방법으로 해결하고 싶었기 때문입니다.

고민했던 방법은 아래와 같은데요.

1. default export한 모듈을 다른 이름으로 import해서 사용하기

작성해놓고 보니 이렇게 사용할 것이라면 아예 TProduct와 같이 타입을 작성해주는게 더 괜찮을 것 같다는 생각을 했습니다.

 

2. 컴포넌트의 Product 혹은 타입의 Product 네이밍 변경하기

컴포넌트는 ProductCard, ProductDetail 등

타입은 ProductSchema 등

아예 다른 네이밍으로 작성해볼까 싶었는데 현재와 같이 간략하게 핵심을 담고 있는 네이밍이 맞다고 생각을 했습니다.

 

그래서 결국에는...

사실 1, 2번의 해결책 모두 애매하다는 생각을 해서 아래와 같이 T prefix를 사용해주기로 했습니다.

컴포넌트 구조를 다르게 잡거나 다른 방식으로 해결하는 것도 고민해보면 좋을 것 같습니다.