Vue 새로운 컴포넌트를 생성하고 추가하는 방법

 

컴포넌트를 사용하는 이유

컴포넌트는 결과적으로 긴 HTML을 짧게 한단어로 줄여주어 관리하기 편하게 만들면서,

재사용성을 높이기 위해 사용한다고 보면 됩니다.

 

 

1. 컴포넌트 만들기

  컴포넌트를 만들고 싶다면, 새로운 Vue파일을 만듭니다.

  <templete>, <sciprt>, <style> 내용을 원하는 스타일로 작성하고 저장합니다.

  그게 바로 컴포넌트입니다.

 

컴포넌트는 우리가 보고있는 페이지 전체일수도있으며, 페이지의 특정 요소(네비게이션, 버튼, 카드 등)일 수 있습니다.

설계를 어떻게 하였는가에 따라 같은 페이지를 만들더라도 컴포넌트는 전혀 다르게 나뉘기 때문에 프로젝트가 클수록 설계의 중요성이 커집니다.

 

※ 참고

1. components 폴더 안에 새로운 파일을 만들 떄 컴포넌트 파일은 관습적으로 이름을 대문자로 시작하여 생성합니다.

2. 새로운 컴포넌트(vue파일)를 생성하였을 때, 확장 프로그램중 Vuter 등을 설치하면 <를 누르는것만으로 문서 양식이 자동으로 생성됩니다. Vue관련 유용한 확장 프로그램은 이곳을 확인.

3. 각 컴포넌트에는 sciprt 안에 name값을 넣어줘야 하는데, 2단어 이상(HelloWorld 등)으로 적어줘야 합니다.

그렇지 않을경우 실행할때 오류가 나서 실행이 되지 않습니다.

 

샘플로 엄청나게 길고 복잡한 코드를 이용하여 Box.vue라는 파일을 생성하여 박스가 그려진 컴포넌트를 하나 만들어 보았습니다.

<template>
  <div class="box">
    박스
  </div>
</template>

<script>
export default {
  name: 'SampleBox'
};
</script>

<style>
.box {
  width: 300px;
  height: 300px;
  border : 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

 

2. 컴포넌트 삽입하기

이제 위에서 만든 Box컴포넌트를 App.js에 추가해 보겠습니다.

<template>
  <div>App.js 화면</div>
  <Box />
</template>

<script>
import Box from './components/Box.vue'

export default {
  name: 'App',
  components: {
    Box
  }
}
</script>

컴포넌트를 가져와서 사용하기 위해선 아래 3가지 단계를 거치게 됩니다.

 

1. 해당 파일을 가져오겠다고 선언합니다.

  <script> 상단에 import 작명 from '[파일 위치]' 형식으로 작성합니다.

 

2. 가져온 컴포넌트를 사용하겠다고 선언(등록)합니다.

components: { ... } 안에 위에서 작명한 이름으로 적어줍니다.

  components: {
    박스 : Box,  // '박스'라는 이름으로(왼쪽. 자유롭게 작명 가능)으로 Box컴포넌트를 사용한다고 등록
  }

오브젝트 형시으로 작성할 수 있지만 보통 컴포넌트와 이름을 동일하게 작명을 하고,

왼쪽과 오른쪽의 두 이름이 같다면 한단어로 줄일 수 있습니다.

 

3. 해당 파일을 원하는 위치에 사용합니다.

<template> 원하는 위치에 작명한 이름의 태그를 이용하여 적용합니다.

 사용하는 방법은 <Box></Box> 처럼 열고 닫는 태그로 써도 되지만, 이것 또한 <Box />처럼 한단어로도 사용할 수 있습니다.

 

이제 위의 파일을 실행해보면...

다음과 같은 화면이 출력 됩니다.

 

 

3. 컴포넌트의 재사용은 어떻게?

  이미 만들어 놓은 형태의 컴포넌트라면 몇번이든 반복하여 사용할 수 있습니다. 

<template>
  <div>App.js 화면</div>
  <div class="boxWrap">
    <Box />
    <Box />
    <Box />
  </div>
</template>

<script>
import Box from './components/Box.vue'

export default {
  name: 'App',
  components: {
    Box
  }
}
</script>

<style>
  .boxWrap {
    margin: 8px;
    display: flex;
  }
</style>

  위와 같이 Box 컴포넌트를 3번 반복하여 사용하면 아래와 같은 결과를 얻을 수 있습니다.