Vue의 Props 파헤치기

Props

사용방법

• type
  • 정의 가능한 기본 JavaScript의 데이터 타입
    → String
    → Number
    → Boolean
    → Array
    → Object
    → Date
    → Function
    → Symbols
• required
  • 필수여부(중요값)
• default
  • default값을 설정
  • default값이 설정되어 있으면 required는 필요없다.

<script>
  export default {
    name: 'Comp',
    props: {
      title: {type: String, required: true, default: '제목'},
      length: {type: Number, required: false, default: 90},
      watched: {type: Boolean, default: true}
    }
  }
</script>

<section>
  <h1>{{ title }}</h1>
  <p>{{ length }} <span v-if="watched">check</span></p>
<section>

Props: Custom Validation

기존 props 정의 방법의 단점

<script>
  export default {
    props: {
      image: {
        type; String,
        default: '/images/placeholder.png'    
      }
    }
  }
</script>

• 다음과 같이 정의되어 있을 때 image 프롭에 다음과 같이 값이 들어온다면??
  • /images/movie-poster.pn
  • /imagesmovie-poster.png
  • images/movie-poster.png
• 해당 prop에 있어 요구사항
  • 요구사항1 : 이미지는 반드시 루트의 image 디렉터리에 있어야한다.
  • 요구사항2 : 이미지는 반드시 PNG or JPEG 포맷이어야 한다.
• prop을 이용해 계싼된 속성을 만들고, 해당 속성을 검증하고 오류 시 로그를 출력하여 해결 할 수 있다.
• But!! 그보다 더 일찍 props를 검증 할 수 있다면???

Custom Validation for Props

• prop 정의에 validator 속성을 적용할 수 있다.

<script>
  export default {
    props: {
      image: {
        type: String,
        default: '/image/placeholder.png'
        //Validator는 전달받은 값을 첫 번째 인수로 하는 익명함수이다.
        validator: propValue => {
          const propExists = propValue.length > 0
          return propExists;
        }
      }
    }
  }
</script>

요구사항1

<script>
  export default {
    props: {
      image: {
        type; String,
        default: '/images/placeholder.png'    
        validator: propValue => {
          const hasImagesDirectory = propValue.indexOf('/images/') > -1;

            return hasImagesDirectory;
        }
      }
    }
  }
</script>

요구사항2

<script>
  export default {
    props: {
      image: {
        type: String,
        default: '/images/placeholder.png',
        validator: propValue => {
          const hasImagesDirectory = propValue.indexOf('/images/') > -1;
          const isPNG = propValue.endsWith('.png');
          const isJPEG = propValue.endsWith('.jpeg') || propValue.endsWith('.jpg');
          const hasValidExtension = isPNG || isJPEG;

            return hasImagesDirectory && hasValidExtension;
        }
      }
    }
  }
</script>

무지성 Props 도배의 문제점

• 컴포넌트에 대한 사전 경험이 없는 신규 개발자가 분석하고 사용하기에 어려움을 겪는다.
• 동작을 이해하기 위해 파악해야 하는 거대한 설정 덩어리가 된다.
  • Component의 직관성을 상실한다.
  • prop이 제대로 문서화가 되어있지 않다면….. 이것은 재앙!!
• 복잡한 Component는 유사한 대체 Component를 낳는다.
  • 데드라인이 고품질 코드보다 우선시되는 것이 개발환경이기 때문…
  • 재사용을 포기하고 대체 Component를 개발하기 시작하면 소스를 관리하기가 어려워진다.