[프리온보딩 프론트엔드 챌린지 1월] 유틸리티 타입으로 수정하기

 

map 타입, condition 타입

 

최근 타입스크립트의 유틸리티 타입 관련 글을 작성했었다. 해당 게시글을 작성하고 유틸리티 타입에 대해 조금 더 살펴보았고 내가 만든 타입이 조금 부끄러워졌다😭

 

 

[ 기존 프로젝트 ]

 

 

기존에는 ViewRendering 컴포넌트에서 View 컴포넌트로 ObjectProps의 타입을 위와 같이 명시해서 내려주었다. 이렇게 내려주는 것까지는 괜찮았다.

 

View 컴포넌트에서 하위 컴포넌트로 뿌려줄 때 TodoList 컴포넌트에는 함수 onShowModal 만 전달했고, AddToDoModal 컴포넌트에 state isShow와 함수 onCloseModal을 분리해서 전달해주었다. 때문에 인터페이스의 속성을 옵셔널로 설정하여 타입을 명시해주고 있다.

 

❓문득 이런 생각이 들었다. 인터페이스는 View 컴포넌트에서 사용할 props에 대한 계약서인데, 위처럼 옵셔널로 타입을 명시해서 전달하는 것이 사용하는 입장에서 명확한가.. 그래서 보다 명확한 인터페이스를 사용하여 타입을 명시해 주는 것이 좋지 않을까 라는 생각이 들었다.

 

 

[  Pick 유틸리티 타입으로 수정 ]

 

 

유틸리티 타입 Pick을 사용하여 필요한 속성만 집어서 조금 더 명확하게 각각의 컴포넌트에 전달해주었다. 또한 View 컴포넌트에서도 Pick을 사용한 타입으로 전달받는 props의 타입을 명시해 주었다.

 

✏️ 기준이 되는 타입을 사용하되, Pick 타입을 사용하여 조금 더 명확하게 타입을 명시해 주는 느낌이다.