[TIL] 190729

오늘 한 일

• 드디어 인프런 [Vue.js 완벽가이드] 진도율 50% 돌파!

공부 내용

• 각 뷰의 공통된 부분을 찾아서 하나의 컴포넌트를 만든다.
• 컴포넌트의 비즈니스 로직은 왠만하면 컴포넌트 파일에서 처리한다.
• 컴포넌트 데이터는 부모 뷰에서 받아서 props로 뿌려주는 방식이 있고, vuex store를 이용해서 컴포넌트에서 바로 state로 받아오는 방식이 있다.
• props로 뿌려주는 방식은 과정이 한 단계 추가되기때문에, 컴포넌트에서 바로 state로 받아오는 것이 vuex사용에 최적화된 방법이다.
• 그러나 props로 뿌려주는 방식은 부모 컴포넌트에서 어떤 데이터들이 바인딩 되는지 명시적으로 알 수 있기 때문에 어느 방법이 더 낫다고는 말하기 어렵다.
• 컴포넌트에서 데이터를 분기처리해주는 방법은 v-if/v-else를 쓰거나 slot을 쓰는 방법이 있다.
• slot은 상위 컴포넌트에서 데이터를 정의해서 내려주는 것으로 각 뷰에서 뿌려주는 데이터 객체의 속성값이 다를 경우 손쉽게 분기처리 할 수 있다.
• <slot name="username"></slot>, <slot name="time"></slot> 공통 컴포넌트에서 이와 같이 정의한다.
• <div slot="username">{{ userInfo.name }}</div>, <template slot="time">{{ userInfo.time }}</template> 상위 컴포넌트에서는 이와같이 정의한다. div에 정의하면 태그와 함께 그대로 하위 컴포넌트로 내려가고 template에 정의하면 텍스트만 내려간다.