[Udemy Vue 완벽가이드 Section8] 95. props 검증하기

# 기본 props 프로퍼티 작성법 - 배열

지금까지는 props 프로퍼티를 배열에 전부 문자열로 쭉 나열하는 방식으로 작성했다.

얻게될 props가 무엇인지만 알려주고, 그 외 다른 정보는 Vue에 제공하지 않았다.

props: ["name", "phoneNumber", "emailAddress", "isFavorite"],

 

간단한 앱이나 컴포넌트라면 이 정도도 괜찮다.

하지만 더 복잡한 컴포넌트거나, 팀으로 작업하는 경우에는 props에 대한 정보를 더 많이 공유해야 할 수도 있다.

컴포넌트에 잘못된 데이터를 전달하거나, 필요한 props를 빼먹었을 때 Vue가 우리에게 이 부분을 알려주도록 하기 위해서.

 

이를 위해, props 프로퍼티를 배열이 아닌, '객체'로 대체할 수 있다.

 

 

# 새로운 props 프로퍼티 작성법 - 객체

props: {
 name: String,
 phoneNumber: String,
 emailAddress: String,
 isFavorite: String,
}

객체에는 JS 프로퍼티 이름과 특정 값으로 구성된 props가 있다.

가장 기본적으로는 얻게될 데이터 타입이 무엇인지를 알릴 수 있다.

위 코드에서는, name prop은 값으로 String(문자열)을 가진다는 뜻이다. 만약 값으로 숫자타입이 들어오면 오류가 발생한다. (숫자가 포함된 텍스트는 ok. 그것도 결국 문자열이므로.)

 

이런 식으로 데이터가 어떤 타입인지를 분명하게 표시해둘 수 있다.

이 컴포넌트는 name, phoneNumber, emailAddress, isFavorite을 props로 가지며, 모든 props는 현재 '문자열'타입의 value를 가진다.

 

## 더 자세하게 props 정보 나타내기

위 객체도 괜찮지만, 더 많은 정보를 나타내고 싶으면 더 자세하기 쓸 수도 있다.

props의 프로퍼티의 값으로 'String' 이렇게 type 대신, 또다른 객체를 제공할 수도 있다.

 

- type : 객체에 type 프로퍼티를 추가해보자. 그 props가 어떤 타입을 가지게  될 지를 뜻한다.

- required : 해당 props전달이 필수인지 아닌지를 나타낸다. 값은 true/false이어야 한다.

• reuiqred값이 false, 즉, 필수가 아닌 props가 있다면 default 키를 추가할 수 있다.
• props가 전달되지 않으면, 이 default값으로 적용된다. 물론, default 값에는 함수를 넣을 수도 있다.

- validator 함수 : props가 전달하는 값을 가져온 다음, 유효성 검사 로직을 적용해 유효한 값인지 아닌지를 확인해준다.

• validator 함수는 항상 true / false를 반환해야한다.
• 아래 validator 함수의 예시를 보면, 값이 1 or 0 이라면 true, 전혀 다른 값이면 false를 반환한다. 이로써 isFavorite은 값으로 1 또는 0만 가진다.
• 만약 isFavorite값에 유효하지 않은 값(ex: "100")을 넣는다면, 자체 validator(custom validator check failed)를 통과하지 못하기 때문에 'Invalid prop' 경고가 뜬다.

props: {
 name: {
  type: String,
  required: true
 },
 phoneNumber: {
  type: String,
  required: true
 },
 emailAddress: {
  type: String,
  required: true
 },
 isFavorite: {
  type: String,
  required: false,
  default: '0',
  default: function(){}, //이렇게 함수도 가능
  validator: function(value) {
   return value === '1' || value === '0';
  }
 }
}

 

## 자세한 props 정보의 장점

이렇게 더 자세한 구성을 갖춰두면 개발 도중 발생한 실수를 더 빨리 찾아내는데 도움이 된다. 분명한 warning이 뜨니 왜 컴포넌트가 작동을 하지 않는지 찾아내는데 유용하다.

 

전체 프로젝트를 혼자 작업한다면, 모든 컴포넌트와 props를 다 알고있으므로 구성을 더 자세히 할 필요는 없다. 

하지만, 만약 해당 컴포넌트를 third-party 패키지로서 다른 사람들과 공유를 한다거나, 팀작업을 하고 있는 경우 더 자세한 props 정의를 적어두는게 좋다.

컴포넌트를 사용하는 사람들이 필요한 데이터, props 유효성 등을 빠르게 확인할 수 있다.

추가적인 warning이 뜨는 것도 개발자들에게 큰 도움이 될 수 있다.

 

이렇게 더 큰 규모의 프로젝트를 작업할 때는 props를 더 명백하게 표현하면 좋다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.