들어가며
드디어 Vue 를 배우기 시작했다. 한 번도 배워본 적이 없어서 팀원들하고 간단하게 공식 문서 읽는 스터디를 1주일 정도 진행했는데 강의 듣는 데 도움이 된 것 같다.
선언적 렌더링
Vue 에서는 간단한 템플릿 문법을 사용해 데이터를 선언적으로 렌더링 할 수 있다.
1 <div id="counter">2 counter: {{ counter }}3 </div>
1 const Counter = {2 data() {3 return {4 counter: 05 }6 }7 }89 Vue.createApp(Counter).mount('#counter');
Vue 파일에서 위와 같이 데이터를 선언하고 Vue 객체 내부의 createApp과 mount 메서드를 사용해 원하는 객체를 설정하고, 선택자를 사용해 연결하고자 하는 HTML 요소를 선택할 수 있다. 이 때, createApp 메서드가 반환하는 값을 Vue 애플리케이션, mount 메서드가 반환하는 값을 인스턴스(뷰 모델)라고 한다.
HTML에는 데이터를 연결할 때 이중 중괄호 구문을 사용한다. 이렇게 하면 counter 라는 id를 가진 div 요소 내에 counter 값이 렌더링 된다. 이 때 이 데이터는 반응형 데이터라고 하는데 counter의 값이 변하면 렌더링 되는 값도 자동으로 변하게 된다.
반응형 데이터가 어떤 것인지 확인해보자.
1초마다 counter 값을 1씩 증가하는 코드를 작성하고 실행해보면 counter 값이 변하는 것 외에 달라지는 건 없는데 화면에 렌더링 되는 값도 변경된 counter의 값이다. 이를 반응형이라고 한다.
주의할 점
setInterval 함수 내부에는 화살표 함수를 사용해야 한다. 일반 함수 선언식을 사용할 경우 this 값이 달라지기 때문이다.
디렉티브
디렉티브는 v- 로 시작하는 특수한 속성이다. v-bind: html 속성에 데이터를 연결하기 위해 사용한다. 속성앞에 v-bind 라는 디렉티브 키워드를 추가해서 사용한다.
1 <img v-bind:src="imageUrl" />
1 const App = {2 data() {3 return {4 imageUrl: 'path/to/images'5 }6 }7 }8 ...
v-on: 이벤트를 처리하기 위해 사용한다. v-on:click 과 같이 사용할 수 있다.
1 <button v-on:click="function"></button>
v-if: 연결된 데이터의 값이 참인지 거짓인지에 따라 요소를 나타내거나 숨길 수 있다.
1 <div v-if="test">test 값이 참이면 보임</div>
v-for: 반복이 가능한 데이터를 반복하면서 아이템을 출력할 수 있다.
1 <ul>2 <li v-for="item in items">{{ item }}</li> // items 배열의 요소를 하나씩 꺼내 li 요소의 텍스트로 설정3 </ul>
v-once: 엘리먼트와 컴포넌트를 처음 한번만 렌더링 할 때 사용한다. v-html: 요소의 innerHTML을 업데이트 한다.
주의할 점 v-html 디렉티브를 사용할 경우 XSS 공격에 취약하기 때문에 매우 위험하다. 신뢰할 수 있는 컨텐츠에만 사용해야 한다.
이 외에도 더 많은 디렉티브가 있다. 공식문서 확인하기
methods
methods는 뷰 애플리케이션 인스턴스에서 사용할 수 있는 함수를 정의할 수 있다.
1 ...2 methods: {3 method1() {4 console.log('method1!');5 }6 }7 ...
method 함수를 정의할 때에는 화살표 함수를 사용하면 안된다. 화살표 함수는 상위 컨텍스트에 바인딩 되기 때문에 this 값이 애플리케이션 인스턴스가 아니다. 브라우저에서의 경우 화살표 함수를 사용했을 때의 this 값은 window 객체이다.
라이프 사이클
각 컴포넌트는 생성될 때 일련의 초기화 단계를 거친다. 그 과정에서 라이프 사이클 훅이라는 함수를 사용해 특정 시점에서 원하는 함수를 실행할 수 있다. 아래는 Vue의 라이프 사이클을 나타낸 것이다.
아직 뷰 전반적인 내용을 몰라서 그런가 이해가 잘 되지 않는다. 각각의 라이프 사이클 단계에서 실행되는 라이프 사이클 훅이 있고, 훅을 사용해 해당 생명주기에 실행하고자 하는 코드를 실행할 수 있다는 것부터 이해하고, 여긴 나중에 다시 공부하고 정리해야겠다.
주의할 점 라이프 사이클에서의 업데이트는 데이터의 업데이트가 아니라 화면의 업데이트를 의미한다. 이거 조심해야 함.
Data
1 const App = {2 data() {3 return {4 ...5 }6 }7 }
데이터는 위와 같이 data() 함수를 사용해 객체를 반환하는 형태로 정의한다. 만약 함수를 사용하지 않고 객체 형태로 정의하게 되면 참조형이기 때문에 컴포넌트를 재사용 할 때에도 데이터 값을 공유하게 된다. 그렇기 때문에 컴포넌트의 재사용 측면에서, 데이터는 꼭 함수로 정의해야 한다.
정의된 데이터에 접근하는 방법으로 애플리케이션 인스턴스의 데이터 이름으로 된 속성을 이용하는 방법과 애플리케이션 인스턴스의 $data 속성에서 데이터 이름으로 접근하는 방법이 있다. 두 가지 방법 모두 같은 데이터 값에 접근할 수 있지만 $data를 사용해서 접근하는 것이 반응형 데이터임을 명시하기 때문에 권장되는 방법이라고 한다.
만약 data() 옵션을 사용해 데이터를 정의하지 않고 애플리케이션 인스턴스에 직접 접근해 데이터를 설정하면 반응성이 적용되지 않는다. 반응성을 위해서는 data() 옵션에 데이터를 정의해야한다.
Proxy
애플리케이션 인스턴스에 접근하면 Proxy 라는 인스턴스를 확인할 수 있다. proxy는 es6에서 추가된 문법으로 특정 객체를 감싸 프로퍼티를 읽거나 쓰는 과정을 중간에 가로채 새로운 로직을 추가할 수 있다.
1 const app = {2 data: {3 count: 04 }5 }67 const proxy = new Proxy(app.data, {8 get() {9 console.log('Getter');10 },11 set() {12 console.log('Setter');13 }14 }
Proxy 생성자 함수를 통해 정의할 수 있으며 첫 번째 인자로는 감시할 데이터, 두 번째 인자로는 객체를 전달하는데, 이 객체는 감시하는 대상이 조회되거나 수정 됐을 때 실행할 함수를 메서드로 가지고 있다.
get() 함수는 매개변수로 target 과 key 를 받는다. target 은 감시하고 있는 대상, key 는 조회한 키를 나타낸다. set() 함수는 target, key 와 value 를 매개변수로 받는다. target 과 key 는 get() 에서와 같고 value 는 변경될 값을 나타낸다.
정리
Vue 는 예전부터 공식문서가 너무 잘 만들어져 있어서 문서만 봐도 충분하다는 얘기를 들은 적이 있다. 강사님께서도 공식문서를 기반으로 설명을 해주시기 때문에, 모든 내용을 정리할 필요가 없을 것 같다. 물론 모든 내용이 처음 배우는 내용이겠지만 그 중에서 이해가 되지 않았거나 어려웠던 것들 위주로 정리하는 게 좋을 것 같다.