[Vue.js] 컴포넌트 & Props

컴포넌트 방식

Vue.js에서 기본적인 프로그램 구현 방법은 기능을  적절하게 분리하여 컴포넌트화 시켜서 개발을 하고 이것을 연결하여 프로그램이 작동하도록 구현하는 방법을 사용한다.

 

컴포넌트(component)

• 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위
• 컴포넌트를 이용하면 소프트웨어 개발을 마치 레고블록 쌓듯이 조립식으로 쉽게할 수 있다.
• 모듈(module)이라고도 한다.
• 쉽게 말하면 화면단위이고, 컴포넌트로 화면을 구성하면 재사용도 쉽고 소스 수정도 용이하다.
• 컴포넌트 안에 컴포넌트를 생성할 수 있다.
• 부모 컴포넌트에 있는 데이터를 자식 컴포넌트가 가져올 때는 부모 컴포넌트에서 props로 변수에 값을 넣어주면 자식 컴포넌트가 읽어올 수 있다.
• 하지만 자식 컴포넌트에 있는 데이터를 부모 컴포넌트에 넘기는 것은 할 수 없지만 Event를 사용하여 보내주면 넘길 수 있다.
• 컴포넌트를 사용하면 단위 테스트가 용이하다. 테스트를 컴포넌트 단위로 하면 되기 때문에 명확하고 쉽게 수정도 가능하게 된다.

 

Props

• 컴포넌트에 등록할 수 있는 커스텀 속성
• 컴포넌트에서 데이터를 넘기기 위해 사용한다.
• 값이 prop 속성에 전달되면, 그 값은 해당 컴포넌트 인스턴스의 속성이 된다.
• data 속성과 마찬가지로 컴포넌트 인스턴스에서 prop 값에 접근할 수 있다.
• props는 부모->자식으로 데이터 전송이 가능하지만, 자식->부모로는 전송이 불가한 단방향 데이터 전달방식이다.
• 컴포넌트는 원하는 만큼 props를 가질 수 있으며 기본적으로는 어떤(any) 타입의 값이라도 넘길 수 있다. 
  • 예시 1. 숫자형(Number)
  • 예시 2. 논리 자료형(Boolean)
  • 예시 3. 배열
  • 예시 4. 객체
  • 예시 5. 객체의 속성

<!-- ======================================================================== -->
<!-- =====================예시1. 숫자형(Number) 전달=========================== -->
<!-- `42`는 정적이지만 Vue에게 이 값이 문자열이 아니라 자바스크립트 표현식임을 알리기위해 v-bind가 필요하다. -->
<blog-post :likes="42"></blog-post>
<!-- 변수 값에 동적으로 할당한다. -->
<blog-post :likes="post.likes"></blog-post>

<!-- ======================================================================== -->
<!-- =====================예시2. 논리 자료형(Boolean) 전달===================== -->
<!-- 값이 없는 prop를 포함하면 `true`를 의미한다. -->
<blog-post is-published></blog-post>
<!-- `false`는 정적이지만 Vue에게 이 값이 문자열이 아닌 자바스크립트 표현식임을 알리려면 v-bind가 필요하다. -->
<blog-post :is-published="false"></blog-post>
<!-- 변수 값에 동적으로 할당한다. -->
<blog-post :is-published="post.isPublished"></blog-post>

<!-- ======================================================================== -->
<!-- =====================예시3. 배열 전달===================================== -->
<!-- 배열이 정적이지만 Vue에게 이 값이 문자열이 아닌 자바스크립트 표현식임을 알리려면 v-bind가 필요하다. -->
<blog-post :comment-ids="[234, 266, 273]"></blog-post>
<!-- 변수 값에 동적으로 할당한다. -->
<blog-post :comment-ids="post.commentIds"></blog-post>

<!-- ======================================================================== -->
<!-- =====================예시4. 객체 전달===================================== -->
<!-- 객체가 정적이지만 Vue에게 이 값이 문자열이 아니라 자바스크립트 표현식임을 알리려면 v-bind가 필요하다. -->
<blog-post
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>
<!-- 변수 값에 동적으로 할당한다. -->
<blog-post :author="post.author"></blog-post>

<!-- ======================================================================== -->
<!-- =====================예시5. 객체의 속성 전달============================== -->
<!-- 객체의 모든 속성을 prop로 전달하려면 전달인자없이 v-bind를 사용할 수 있다(:prop-name 대신 v-bind를 사용) -->
<!-- 예를들어 post객체가 주어지면: -->
post: {
  id: 1,
  title: 'Vue와 떠나는 여행'
}
<!-- 아래와 같이 작성하는 것은: -->
<blog-post v-bind="post"></blog-post>
<!-- 다음과 동일하다: -->
<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>

---

참고링크

https://v3.ko.vuejs.org/guide/component-basics.html#%E1%84%8B%E1%85%B5%E1%84%87%E1%85%A6%E1%86%AB%E1%84%90%E1%85%B3%E1%84%8B%E1%85%AA-%E1%84%92%E1%85%A1%E1%86%B7%E1%84%81%E1%85%A6-%E1%84%80%E1%85%A1%E1%86%B9-emit%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5

컴포넌트 기초 | Vue.js

https://v3.ko.vuejs.org/guide/component-props.html#%E1%84%80%E1%85%A2%E1%86%A8%E1%84%8E%E1%85%A6%E1%84%8B%E1%85%B4-%E1%84%89%E1%85%A9%E1%86%A8%E1%84%89%E1%85%A5%E1%86%BC-%E1%84%8C%E1%85%A5%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AF

Props | Vue.js

https://ux.stories.pe.kr/131

Vue.js의 핵심인 컴포넌트에 대한 간략한 정리