Vue.js 관련 개념 정립

1. App.vue 의 존재이유

What (정의) : 구조와 레이아웃을 정의하고, 다른 컴포넌트를 렌더링 하기 위해서

Why (존재이유) : 루트컴포넌트로 사용 됨, 전체 어플의 구조와 레이아웃을 정의함 그리고 다른 컴포넌트들을 포함하여 렌더링 함

How (방법) : App.vue안에 <router-view> 를 써서 URL에 따라 컴포넌트를 동적으로 렌더링 하게끔한다.

 

2. 라우팅이란

What (정의) :  웹 어플에서 URL 에 따라서 전환을 관리하는 기능이다.

Why (존재이유) : SPA 에서 초기 한페이지 로드 후, 서버에서 페이지 가져오지않고, 동적으로 컨텐츠 갱신한다.

How (방법) : view Router를 이용한다.

 

3. Vue Router 와 router-view 는 무슨차이

- 공통점

Vuw.js 에서 라우팅을 구현하는데 사용되는 개념임

 

What (정의)

- VueRouter : 라우팅을 처리하는 라이브러리이다.

- router-view : 위 라이브러리가 제공하는 컴포넌트이다.

 

Why (존재이유)

- VueRouter : 라우팅 설정하고, URL 과 컴포넌트 매핑하는데 이는 곳 네비게이션 역할을 하기 위해서이다.

- router-view : 라우팅에 따라서 동적으로 컴포넌트를 렌더링하는 역할을 한다.

 

How (방법)

- VueRouter : 함수를 이용해서 인스턴스 생성함 그리고Vue 어플에 추가함

- router-view : 태그를 이용해서 넣어주고, 그 자리에 렌더링이 된다.

 

4. 리액티브란?

What (정의) : 데이터 변화를 감지해서 자동으로 view 부분을 업데이트 하는 방식이다.

Why (존재이유) : 데이터 화면 연결하고, 데이터변경 감지하여서 필요한 부분만 업데이트 해서 효율적은 UI 업데이트 달성을 위한 것이다.

How (방법) : ref 를 사용한다. 이렇게 하면 Vue 가 데이터 변경을 추적하고, 변경 될 때 자동으로 렌더링 한다.

e.g. (예) :

 

5. 탬플릿 바인딩이란?

What (정의) :

- 우선 템플릿이란 Vue 컴포넌트에서 UI를 구성하는 HTML 코드의 일부이다.

- 템플릿 바인딩이란 템플릿과 데이터를 바인딩해서 화면에 동적으로 표시하는 기능이다. 

 

Why (존재이유) :

- Vue 의 템플릿 문법을 사용해서 데이터바인딩, 조건부렌더링, 반복문등 제어구조 를 표현하기 위해서이다.  -> 사용자와 상호작용 처리 가능함

 

How (방법) :

-  {{}} 방법 으로 데이터 바인딩을 하고 / v-on:click 로 디렉티브를 사용할 수있다.

 

6. 디렉티브란?

What (정의) : Vue 템플릿에서 제공하는 특수한 속성으로서, 이를 이용해서 HTML 요소를 동적조작이나 데이터바인딩 적용을 한다.

 

Why (존재이유) : HTML 요소의 동적조작이나, 데이터바인딩을 하기 위해서

 

How (방법)

- v-bind(:) : 요소의 속성값을 동적으로 바인딩하기 위한것

- v-if : 조건부 렌더링

- v-for : 반복적인 요소 렌더링(배열 등 순회)

- v-on(@) : 이벤트 리스너 

- v-model : 폼 입력요소와 데이터 양방향 바인딩  

 

 

CreateRef는 리액트에서 제공하는 기능이다.

7. ref 와 createRef 의 차이?

결론:

ref 는 vue의 리액티브 시스템과 연결되어 데이터 변화를 감지하고 view 부분에 반영하는 렌더링 역할을 하지만

createRef 는 'ref'를 생성하는 함수로서 Vue 외부의 JS 와 연결될 수있다.

 

What (정의)

- ref : 데이터나 DOM 요소와 연결되는 참조를 생성관리하는데 사용된다. 

- createRef : 단순히 ref를 생성하는 함수이다.

 

Why (존재이유) :

- ref : 컴포넌트 상태를 추적하고 변경하기 위해서

1. 리액티브시스템 작동

2. 접근방식으로서 .value 프로퍼티를 사용한다. 실제 값을 읽거나 수정할 수있게끔 한다.

3. 템플릿 바인딩이 가능하다 요소에 심으면 된다

4. 컴포넌트 메소드 

 

- createRef : ref 를 생성하기 위한 함수이다

 

How (방법) :

createRef를 사용해서 ref 를 생성한다

-> ref 를 요소에 적용해서 사용한다

-> createRef는 리액티브 시스템과 독립적으로 동작한다.

 

8. createRef 로 생성한 ref는 Vue의 리액티브 시스템과 독립적으로 동작하는 이유?

- 결론 : 독립적으로 동작하기 때문에 값을 변경할 때에는 리액티브 시스템에 명시적으로 알려주어야 Vue 화면을 업데이트가 가능하다

- 이유 : 왜냐하면 Vue의 데이터객체가 아니라 JS의 기능으로써 동작하기 때문이다. 결국 변경을 감지하지 못한다.

- 알려주는 방법 : ref.value에 새로운 값을 할당하거나 reactive 를 사용해서 ref 를 감싼 객체를 생성해서 변경을 추척한다.

 

9. 라이프사이클 훅 이란?

What (정의) 

- 여기서 훅이란 : 콜백함수를 의미한다. 

- 라이프사이클 훅 : 생성 존재 소멸 의 생명주기등의 여러단계를 가르키는 훅이다.

 

Why (존재이유) : 컴포넌트의 생명주기를 감지하고 제어하는데 사용된다. 결국 컴포넌트의 생성, 업데이트 소멸의 로직을 처리할 수있다.

How (방법) : 

• onBeforeMount: 컴포넌트가 마운트되기 전에 실행됩니다.
• onMounted: 컴포넌트가 마운트된 후에 실행됩니다.
• onBeforeUnmount: 컴포넌트가 언마운트되기 전에 실행됩니다.
• onUnmounted: 컴포넌트가 언마운트된 후에 실행됩니다.