뷰란? 2014년을 시작으로 꾸준하게 발전하고 있는 자바스크립트 프레임워크입니다.
컴포넌트 Basic
컴포넌트는 View, Date, Code의 세트라고 생각하면 됩니다.
컴포넌트 안에는 HTML 코드가 있고, 이 HTML 코드를 실행하기 위한 자바스크립트 코드 그리고 데이터가 존재합니다. 컴포넌트를 쓰는 가장 큰 이유는 재사용이 가능하다는 점입니다.
즉, 다른 컴포넌트에 import 해서 사용할 수 있습니다. 그렇다면 import는 무엇인가?
export, import란? 무엇인가? (import, export)
export란? 쉽게 설명하자면 내가 만든 모듈의 함수, 객체, 변수를 다른 모듈에서 가져다 사용 할 수 있도록 내보낼때 사용합니다.
// 변수로 선언한 것을 내보낸다.
export let myVariable = 'poooney';// 두개 이상을 내보낼 때는 {객체} 로 묶어서 export 하면 됩니다.
let myVar = 'pooney'
let myVarArray = ['안녕하세요', 'pooney입니다.']
//위에서 선언한 변수를 묶어서
export {myVar, myVarArray};export만 있는것도 있지만 export default가 붙어 있는 것도 많은데 이건 default의 의미는 특정 하나만 내보낸다 라고 생각하면 된다.
//특정 하나만 내보낼 수 있다.
let myVar = 'pooney'
let myVarArray = ['안녕하세요', 'pooney입니다.']
export default myVar;중요한건 한번 더 선언하면 문제가 발생합니다. 예를 들어서 보면
let myVar = 'pooney'
let myVarArray = ['안녕하세요', 'pooney입니다.']
export default myVar;
export default myVarArray;
**Uncaught SyntaxError: Identifier '.default' has already been declared내보내는 것을 확인했으니 이젠 가져오는 것을 확인해보자.
import란? export를 통해서 내보내 진것을 가져다 사용한다라고 보면 된다.
이 때 export를 어떻게 하냐에 따라 import 선언 방법이 달라지는데
우선 일반적인 export를 했을 경우를 먼저 보면
basic.js
let myVar = 'pooney'
let myVarArray = ['안녕하세요', 'pooney입니다.']
export {myVar};
export {myVarArray};
//export를 아래와 같이 하나로 묶어서 사용 할 수 있습니다.
export {myVar, myVarArray};<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<script type=module>
//import {내보내진 변수 이름} from '모듈경로'
import {myVar, myVarArray} from "./basic.js"
console.log(`[myVar]: ${myVar}`)
//출력: [myVar]: pooney
console.log(`[myVarArray]: ${myVarArray}`)
//출력: [myVarArray]: 안녕하세요,pooney입니다.
</script>
</body>
</html>import {myVar, myVarArray} from "./basic.js"
export로 내보낸 변수명을 import로 가져와서 사용한것을 확인해보았다.
import를 사용할 때 유의깊게 봐야하는것은 {객체}인데 export를 통해 내보내질때 사용한 변수명이 들어가게 됩니다. 하지만! 주의해야하는 것은 export default를 통해 내보내어 진 경우는 {}없이 import를 한 쪽에서 사용할 변수명이 사용됩니다.
export default를 사용한 경우!
basic.js
let myVar = 'pooney'
let myVarArray = ['안녕하세요', 'pooney입니다.']
export default myVar;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<script type=module>
// import 사용할 변수명 from '모듈경로'
import newMyVar from "./basic.js"
console.log(`[newMyVar]: ${newMyVar}`)
//출력: [newMyVar]: pooney
</script>
</body>
</html>export default를 사용한 경우 export와 달리 import 뒤에 해당 script에서 사용할 변수명을 입력하면됩니다. export를 통해서 내보내진 경우 import {myVar, myVarArray}를 사용하여 export의 변수명과 일치 시켰지만, export default를 통해서 내보내진 경우 import newMyVar 처럼 자신이 원하는 변수명을 입력한다는게 가장 큰 차이점입니다.
다시 돌아와서
vue로 프론트엔드를 개발할 때 컴포넌트 설계를 어떻게 하는가는 매우 중요합니다.
동일한 기능을 갖는 요소가 발견이 되었을 때 해당 기능을 컴포넌트로 구현해서, 사용하는 모든 페이지에서 호출해서 사용할 수도 있고, 동일한 기능을 필요한 각각의 페이지에서 개별로 작성할 수도 있습니다. (이때 원하는 페이지만 import 시켜서 사용할 수 있겠죠)
컴포넌트 구조 이해하기
컴포넌트 구조를 이해한다는것은 쉽게 말해서
기본 구조를 만든다는 것이다.
기본 구조를 알아보자.
