coding AtoZ

컴포넌트(Component)란 ...?

Vue의 강력한 기능중 하나로, 중복되어 복잡한 코드를 해결할 수 있는 최선의 방안. 
컴포넌트는 쉽게 말해 '나누는 것' 이다. 단적인 예로 홈페이지의 네비게이션 바는 모든 페이지에서 필요하다. 각 페이지에서 중복이 되니 따로 분리해서 컴포넌트의 이름만 명시 하는 것으로 추가 시킬 수 있다.
(HTML로 웹을 제작할때 파일을 분리해서 제작하는 것과 비슷한 느낌을 받는다.)

분리된 컴포넌트는 또 다른 컴포넌트에 삽입되거나, main 파일에 사용될 것이다. 그 경우 삽입된 컴포넌트와 사용하는 파일 사이에는 부모-자식 관계가 성립된다.

Props는 컴포넌트에서 사용되는 기능이다

앞서 컴포넌트가 사용되면 부모-자식 관계가 성립된다고 말했는데, 부모의 데이터를 컴포넌트에서 사용하고 싶을때 사용하는 것이 props 이다. 데이터 뿐만 아니라 methods를 부모->자식으로 넘겨줘서 자식(컴포넌트)은 이를 이용할 수 있게 된다.

컴포넌트의 사용법

컴포넌트를 사용하기 위해선 크게 
1. 컴포넌트 파일(.vue)을 만든다
2. 컴포넌트를 import 한다
3. 컴포넌트를 components에 등록한다
4. 컴포넌트를 사용한다
네 가지 단계를 거쳐 사용한다. 복잡해 보이지만 문법적으로 어려운 것 하나없이 손쉽게 사용할 수 있다.
다음에서 예제를 살펴보자.

<template>
	<Nav/> <!-- 4. Nav 컴포넌트 사용 --> 
</template>

<script>
	import Nav from '/Nav.vue파일 경로' <!-- 2. Nav 컴포넌트 import --> 
    	export default{
			name: "App",
        	data() {
			return{
            			menu: ['Home', 'Shop', 'Main'],
                        	<!-- Nav에 들어가는 데이터 --> 
            		}
        	},
       		components: { 
        		Nav: Nav, <!-- 3. Nav 컴포넌트 등록 --> 
        	}
</script>

위와 같이 작성을 한다면, 기존에 사용된 menu 데이터는 Nav 컴포넌트에서 사용할 수 없게 된다.
왜냐하면 기존에는 하나의 파일 안에서 동작했지만, 컴포넌트로 분리된 순간 엄연히 다른 파일이기 때문에 App.vue에 등록한 데이터는 사용할 수 없다.
이를 해결하기 위해선 Nav.vue의 데이터를 똑같이 만들어 줘도 되지만, 중복된 데이터는 없앨 수 있으면 없애는 것이 개발자의 참된 모습이기 때문에 이 방법은 옳지 않다.
따라서 우리는 props를 활용해야 한다!

Props의 사용법

props는 컴포넌트를 사용할 때 같이 넘겨주면 되는데, 사용 방법은 다음과 같다.
1. 컴포넌트를 사용하는 곳에 명시해 props로 넘겨준다

※속성 바인딩과 같이 :(콜론) 사용

2. 자식 관계의 컴포넌트(예시에선 Nav.vue)파일에 props를 등록해 준다
3. 자식 관계의 컴포넌트 파일에서 데이터 바인딩 형식으로 사용한다

### App.vue ###
<template>
  <Nav :menu="menu" /> <!-- 1. Nav 컴포넌트에 props로 데이터를 넘겨줌 --> 
</template>

<script>
  import Nav from '/Nav.vue파일 경로' 
  export default{
    name: "App",
    data() {
        return{
            menu: ['Home', 'Shop', 'Main'],
            <!-- Nav에 들어가는 데이터 --> 
        }
    },
    components: { 
        Nav: Nav, 
    }
</script>

### Nav.vue ###
<template>
  <div v-for="section in menu" :key="section"> <!-- 3. props로 받은 데이터 사용 -->
    {{section}}
  </div>
</template>

<script>
  export default{
    name: "nav",
    data(){
      return{
      }
    },
    props: {
      menu: Array, <!-- 2. props로 받은 데이터 등록 -->
    }
  }
</script>

컴포넌트를 잘 사용한다면 원하는 기능을 알아보기 쉽고, 수정 삭제가 용이하게 제작할 수 있다.