뷰 Props

Vue Props

• props
  : props는 부모 컴포넌트에서 자식 컴포넌트에 전달하는 데이터이다.

• 뷰의 단방향 데이터 성질?
  : 자식 컴포넌트에서 전달받은 prop을 직접 전달하면 vue는 에러를 표시한다. 따라서 computed 속성을 사용해서 prop의 형태를 바꾸거나, 초기 값만 prop의 데이터를 사용하고 로컬 데이터로 이용하는 것이 좋다!

• Props의 타입과 유효성 검사
  : 문자열 배열 형태로 props의 리스트를 정의할 수 있지만, 좀더 자세하게 타입과 유효성 검사를 지정할 수 있다.

props: {
	item: {
		type: Object, //instanceof 로 유효성을 검사하기 때문에 커스텀 생성자 객체가 올 수 있다.
		required: true,
		default: function() {
			return {}
		},
		validator: function() {
			return true;
		}
	}
}

• 프로젝트에서 Props의 타입과 유효성 검사를 적용한 코드

import { movieCategories } from "@/utils/constants/movie";

props: {
	categoryTitle: {
		type: String,
		required: true,
	},
   	categoryId: {
      		type: String,
              	required: true,
                validator: function(category) {
                  	// props로 전달받은 categoryId가 movieCategories에 포함되어 있으면 true를 리턴
			return movieCategories.inclues(category);
		}
    	},
}

• v-for의 key
  : 화면에 렌더링되지는 않는다.

😎 vue netflix clone 프로젝트 리팩토링 중 느낀점

: 조급하게 프로젝트를 완성하려고 대충 작업한 부분을 발견했고, 완성도가 너무떨어짐을 느꼈다. 그중에서,
1) 소스의 분리가 잘 안되어 있다. utils안에 helpers.js, constant.js 이렇게 하나의 파일로 작업했다면 helpers/getImage.js 이렇게 좀더 구조화 해서 파일을 생성하고, 함수를 가져오니 좀더 깔끔하게 소스를 작성할 수 있었다.
2) 뷰의 컴포넌트의 장점을 잘 사용하지 못했다. 컴포넌트로 나눌 수 있는 부분을 좀더 세분화하고, props를 이용해서 컴포넌트에 데이터를 전달하는 부분을 다듬었다.
3) api를 요청하는 컴포넌트와 api를 통해 가져온 데이터를 props를 통해 받아서 렌더링하는 컴포넌트를 구분하기 더 깔끔하게 페이지를 구성할 수 있었다.

• 기존 방식 : MovieSlider.vue에 props로 api 요청 결과인 영화 리스트 전달 => MovieSlider에서 데이터가 없을 경우 v-if를 통해 분기 처리.
• 변경된 방식 : MovieSlide.vue에서 api 요청, 데이터가 있으면 MovieSwiper에 데이터 전달, 없으면 에러 메세지 노출 => 따라서, MovieSwiper는 데이터를 받아서 swiper 라이브러리를 적용해주기만 하면 된다!
• 변경된 방식2 : 기존에는 메인 페이지에서 '높은 평점', '상영중' 과 같은 각 영화 데이터를 한번에 요청해서 MovieSlider에 전달했다면, MovieSlide에 영화의 카테고리를 전달하고, 각 컴포넌트 별로 api를 요청하도록 변경했다.

//MovieSlide.vue
<template>
    <div class="movieSlide">
        <h3 class="movieSlide__title">{{ categoryTitle }}</h3>
        <div v-if="isLoading">loading movies....</div>
        <template v-else>
            <!-- 데이터가 있을 경우에만 MovieSwiper에 데이터 전달 -->
            <div class="movieSlide__movies" v-if="isMovies">
                <MovieSwiper :movies="movies"></MovieSwiper>
            </div>
            <div v-else>카테고리에 해당하는 영화가 없습니다.😂</div>
        </template>
    </div>
</template>

references

• 뷰 props의 타입
  https://kr.vuejs.org/v2/guide/components-props.html#Prop-%ED%83%80%EC%9E%85