1. 컴포넌트 간의 데이터 교류
- Vue 에서는 기본적으로 상/하위 또는 부모/자식 컴포넌트 관계에 한해서 데이터를 주고 받을 수 있다.
- 이전 포스팅에서 다뤘던 부분인데, 이번 기회를 통해서 복습해보자.
a) props
- props는 상/하위 관계를 이용하여 데이터를 교류하는 방법이다.
- 위 사진처럼, props는 반드시 중간에 존재하는 컴포넌트를 거쳐서 데이터를 전달해야 한다는 단점이 있다.
- 즉, 하위 컴포넌트가 깊을수록 거쳐야 하는 컴포넌트가 많아지는 것이다.
- props에 대한 자세한 내용이 궁금하다면 아래의 이전 포스팅을 참고하자.
https://devraphy.tistory.com/212
20. Vue - 컴포넌트 기초(props, slot)
0. 예제코드 a) App.vue b) MyBtn.vue Apple 1. 컴포넌트의 재활용 - 한번 만들어 놓은 컴포넌트는 재활용이 가능하다는 점이 Vue의 장점 중 하나다. - 컴포넌트를 만들어 놓고 해당 태그를 복사 붙여넣기
devraphy.tistory.com
- 상위 컴포넌트에서 타겟하는 하위 컴포넌트로 직접 접근할 수 있다면 더 빠르고 효율적이지 않을까?
- Vue에서 제공하는 provide와 inject가 이 문제를 해결할 수 있다.
b) provide / inject
- provide와 inject는 하위 컴포넌트의 깊이에 상관없이 상위 컴포넌트에서 직접적으로 접근할 수 있다.
- provide와 inject에 대한 내용이 궁금하다면 아래의 이전 포스팅을 참고하자.
https://devraphy.tistory.com/219
25. Vue- provide, inject
- 이번 포스팅에서 provide와 inject에 대해 알아볼 것이다. 1. 예제코드 [App.vue] [Parent.vue - components 폴더 안에 생성] [Child.vue - components 폴더 안에 생성] {{ msg }} [출력결과] * props - 부모와..
devraphy.tistory.com
- 이로써, 상/하위 또는 부모/자식 관계의 컴포넌트 간 데이터 교류 방법을 알아보았다.
- 그렇다면 형제 컴포넌트 간의 데이터 교류는 어떻게 할 수 있을까?
2. 형제 컴포넌트 간의 데이터 교류
a) 상/하위 또는 부모/자식 관계
- Vue에서는 상/하위 또는 부모/자식과 같은 수직적인 관계의 컴포넌트 간 데이터 교류를 지원한다.
- 그러므로 형제 간의 데이터 교류를 하기 위해서는 상위 컴포넌트 하나를 지정하여 반드시 거쳐야한다.
- 아래의 사진을 참고하자.
- 위의 사진처럼, 상위 컴포넌트를 지정하여 타겟 컴포넌트에게 데이터를 전달하는 방식이 있다.
- 하지만, 아래 사진처럼 타겟 컴포넌트 까지 도달하는 그 과정이 복잡하다면 어떻게 해야할까?
- 위의 사진은 Search 컴포넌트에서 About 컴포넌트로 데이터를 보내기 위한 과정을 그린 것이다.
- 너무 복잡하지 않은가?
- 이와 같은 문제를 해결하기 위해서 사용하는 기술이 바로 Vuex 다.
3. Vuex
- Vuex는 중앙 집중형 상태관리 라이브러리다.
- 통상적으로 Store라고 부르기도 한다.
- 이 개념에 대해서 알아보자.
a)Vuex를 사용하는 이유
- 위의 사진과 같이 Search 컴포넌트에서 다른 3개의 컴포넌트에게 데이터를 전달하려고 한다.
- 이전에 언급한 바와 같이, Vue 에서는 상/하 관계의 컴포넌트 간의 데이터 교류만을 지원하기 때문에, 그림과 같이 형제 컴포넌트 또는 부모 컴포넌트가 아닌 다른 상위 컴포넌트와의 데이터 교류방법을 구현하는 것은 매우 복잡하다.
- 이와 같은 문제를 해결해주는 라이브러리가 바로 Vuex다.
b) Store란?
- Store란, 모든 데이터가 저장되는 곳이며 모든 컴포넌트가 접근할 수 있는 데이터 창고를 의미한다.
- 당연히 Store라는 상위 객체를 거쳐서 데이터를 전달하는 방식으로 작동하여 불편하다고 생각할 수 있다.
- 허나, 컴포넌트의 깊이/위치와 상관없이 Store 한 곳만 거쳐서 데이터를 전달할 수 있다는 이점이 생긴다.
- 이와 같은 이유로 중앙 집중형이라는 수식어가 붙게된 것이며, 상태라는 단어는 데이터를 의미한다.
c) Store의 데이터 관리방법
- Store에는 다양한 종류와 목적의 데이터가 쌓이게 된다.
- 그러므로, Store 한 곳에 모든 데이터가 저장되면 정리하기가 쉽지 않고 데이터를 찾는데 불편함이 있을 수 있다.
- 이와 같은 이유로 Store는 모듈을 이용하여 데이터를 정리하고 관리하게 된다.
- 아래의 사진을 참고하자.
'Front-end > Vue3' 카테고리의 다른 글
| 35. Vue - 비동기 처리(callback, promise, async, await) (0) | 2021.06.11 |
|---|---|
| 34. Vue - vuex 기본구조(store, module) (0) | 2021.06.08 |
| 32. Vue - Router Link (0) | 2021.06.01 |
| 31. Vue - 부트스트랩(Bootstrap) (0) | 2021.06.01 |
| 30. Vue - 라우터(Router, Routing) (0) | 2021.05.31 |
댓글