[Vue] Props 타입 정의를 꼭 해야할까

개발하던 화면은 페이지를 넘기면서 데이터를 등록하여

그 데이터를 계속 가지고 있다가 마지막 페이지에서 저장하는 화면이었다. 

나는 Vuetify를 사용하고 있었고, VWindow 컴포넌트를 사용해서 화면을 구성했다.

https://vuetifyjs.com/en/components/windows/#usage

Window component — Vuetify

 

처음에 화면에서 관리하는 데이터가 너무 많아지니 데이터들을 store에서 관리하면 어떨까 싶었지만,

같이 개발하는 팀원이 store는 공통으로 사용하는 로직만 사용을 하자고 했기 떄문에

부모 컴포넌트에서 데이터를 선언하고 자식 컴포넌트들에 props를 주어 관리를 했다.

 

하지만 한 페이지에 가지고 있는 데이터가 많다보니 내려주는 props 가 너무 많아져 코드 가독성이 안좋고 관리하기가 힘들었다.

핑계를 대보자면 자식 컴포넌트의 props 코드가 너무 길어지기도 했고 개발 시간도 촉박하여

자식 컴포넌트에 props 타입 정의를 안하고 키만 정의하고 개발을 진행했었다.

 

나중에 같이 개발하는 팀원이  props 타입 지정을 해달라고 했다.

그 많은 props 의 타입을 지정하다보니 "이 많은 props들의 타입을 꼭 지정해야할까. 이름만 지정해주면 안될까" 라는 생각이 들어 찾아보게 되었다.

 

props 타입 정의를 해야하는 이유

 

• 코드의 가독성 향상
  해당 컴포넌트가 어떤 데이터를 필요로 하는지 명확하게 알 수 있어 코드의 가독성이 높아진다.
  이는 특히 팀 작업에서 협업을 더 쉽게 만든다.
  
• 자동 완성 및 도구 
  타입을 정의하면 IDE(통합 개발 환경)에서 자동 완성 기능을 효과적으로 사용할 수 있다.
  이는 코딩 속도를 높이고, 실수를 줄이는 데 도움이 된다.
  
  
• 런타임 유효성 검사
  Vue는 정의된 props의 타입을 기반으로 전달된 데이터의 타입을 런타임에 검사한다.
  잘못된 타입의 데이터가 전달되면 경고 메시지가 출력되어 디버깅이 더 쉬워진다.
  
  
• 타입스크립트와의 통합
  Vue 3는 타입스크립트와의 통합을 염두에 두고 설계되었다.
  타입 정의는 타입스크립트에서 특히 중요하며, 타입 안정성을 보장하는 데 큰 도움이 된다.
  
  
• 디버깅 용이성
  명확한 타입 정의는 버그를 초기에 발견하고 해결하는 데 도움이 된다.
  타입이 명확하게 정의되어 있으면 예상치 못한 데이터가 전달되는 상황을 쉽게 파악할 수 있다.
  
  
• 문서화
  타입 정의는 컴포넌트의 인터페이스를 명확하게 문서화하는 역할을 하여 컴포넌트를 사용하는 개발자가 props의 타입과 구조를 쉽게 이해할 수 있게된다.

 

 

공식문서 참고

Props | Vue.js (vuejs.org)

Vue.js