Vue.js 뿌시기_9 (컴포넌트 심화)

이번 내용은 컴포넌트의 재사용, 부모와 자식 컴포넌트 간의 데이터, 메소드 전달 및 동기화에 대해 공부해보려 한다.

컴포넌트에서 다른 컴포넌트 사용

프로젝트를 하다보면 컴포넌트 내에서 다른 컴포넌트를 가져와 사용해야 할 일이 많이 있다. 이때 깔끔한 정리를 위해 페이지 구성이 아닌 가져다 사용할 컴포넌트 파일은 components 폴더에 저장해 준다. 우선, 사용할 컴포넌트를 import 한다.

<script>
  import ChildComponent from "../components/childComponent"; 
  export default {
    ...

import 후 현재 컴포넌트에서 사용할 컴포넌트를 등록한다.

components: {ChildComponent}

이렇게 하면 위 template에서 html태그와 같이 사용이 가능해진다.

<ChildComponent />

이후 페이지를 랜더링하면 ChildComponent 내부 내용이 같이 나오는 것을 확인할 수 있다.

부모 컴포넌트에서 자식 컴포넌트로 데이터 전달

우선으로 부모 컴포넌트에서 자식 컴포넌트에 값을 넘기는 방법은 React에서도 빈번하게 사용했던 props이다. 자식 컴포넌트에서

export default {
  props: {
    title: {
      type: String,
      default: "디폴트 페이지 타이틀",
  }
}

이런 방법으로 props안에서 object형태로 type과 default값을 지정해줘야 한다.
이후 부모 컴포넌트에서는 사용하는 html태그 안에 속성을 사용하는 것과 같은 방식으로 작성하면 된다.

<ChildComponent title="부모가 사용하는 타이틀" />

이렇게 하면 정적인 값을 자식 컴포넌트에 전달할 수 있다.

v-bind를 사용해서 prop에 동적인 값을 전달할 수도 있다.

<ChildComponent :title="title">
  
data(){
  return {
    title: "동적 타이틀",
  };
}

숫자형으로 전달할 경우에도 v-bind를 통해서 가능하다.

<InstagramLikes :likes="45" /> // 정적

<InstagramLikes :likes="likes" /> // 동적
  
data(){
 return {
   likes: 45,
 };
}

나머지 Boolean형, 배열, 객체(Object) 모두 v-bind를 사용해야한다. 아니면 문자열로 전달된다.

부모 컴포넌트에서 자식 컴포넌트 접근

ref 라는 속성을 통해 자식컴포넌트에 접근이 가능하다. ref는 id속성이랑 비슷한데, html에 태그를 붙여주고 script에서 $refs를 통해 접근이 가능하다

// ChildComponent
<template>
  <button type="button" @click="childFunc" ref="childBtn">Click</button>
</template>
<script>
    export default {
    	data() {
        	return {
            	msg: "자식 디폴트",
           };
        },
		methods: {
          childFunc() {
            console.log("부모가 실행시킴");
          }
        },
}
</script>

// ParentComponent
<template>
  <ChildComponent ref="child_com"/>
</template>
<script>
    import ChildComponent from "../components/ChildComponent";
    export default {
	  components: {ChildComponent},
      mounted() {
        this.$refs.child_com.$refs.childBtn.click();
      }
    }
}
</script>

이렇게 작성하면 부모 컴포넌트에서 mounted가 실행될 때 html태그중 ref가 child_com인 컴포넌트에 접근을 한다. 그 안에서 또 ref가 childBtn인 태그에 접근해 click이란 함수를 실행시키게 된다.

위 내용과 비슷하게 자식 컴포넌트의 메소드에 바로 접근하고 싶으면

this.$refs.child_com.childFunc();

이렇게 작성해서 바로 메소드를 실행시킬 수 있다.
$refs를 사용하면 자식 컴포넌트에 정의된 data도 직접 변경할 수 있다.

this.$refs.child_com.msg = "부모가 변경함!"

자식 컴포넌트에서 부모 컴포넌트로 데이터 전달

반대로 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하는 경우에는 $emit을 사용한다.

// ChildComponent
data() {
   return {
      msg: "자식에서 보내는 메시지",
   };
},
mounted() {
	this.$emit("sendMessage", this.msg)

이렇게 자식 컴포넌트에서 mounted 되면 $emit을 통해 부모 컴포넌트로 sendMessage라는 이름으로 두 번째 파라미터 값인 this.msg를 보내게 된다.

// ParentComponent
<template>
  <ChildComponent @sendMessage="gotMessage" />
</template>
<script>
    import ChildComponent from "../components/ChildComponent";
    export default {
	  components: {ChildComponent},
      methods: {
      	gotMessage(data){
      	console.log(data);
      }
   }
}
</script>

이런식으로 부모 컴포넌트에서는 속성에서 @로 커스텀 이벤트를 정의하고 값을 받아올 수 있다.

부모 컴포넌트에서 자식 컴포넌트의 데이터 동기화

동기화는 부모 컴포넌트에서 computed로 자식 컴포넌트에 refs로 연결하여 동기화 시킬 수 있다.

computed: {
	msg() {
    	return this.$refs.child_com.msg;
   	}
}

이렇게 처리하면 자식 컴포넌트의 msg와 부모 컴포넌트의 computed로 생성된 msg와 동기화된다.