220511 Today I learned!
- Vuex를 활용한 데이터 통신
1. Fact
(1) Vuex를 활용한 데이터 통신
Vuex를 활용한 상태관리
- Vuex에서 State, Getters, Mutations, Actions의 역할과 활용방안을 학습했다.
- 컴포넌트의 공유된 상태를 추출하고 이를 전역에서 관리한다.
- 단방향데이터 흐름에서 원활하게 데이터를 관리하기 위해 중앙저장소 (store)에서 State를 관리한다.
- State: 중앙에서 관리하는 모든 상태 정보
- Mutations: 실제 State를 변경하는 유이란 함수
- Actions: 비동기 작업 및 Mutations를 호출하는 함수
- Getters: State를 변경하지 않고 활용하여 계산을 수행하는 함수 (computed와 유사하다. )
- Vuex를 활용하여 to-do앱을 생성한다.
- to-do리스트 생성
- to-do 리스트 조회
- to-do 리스트 수정
- to-do 리스트 결과
- localStorage
- 정리본
2. Feeling
Vuex를 통해 편리하게 상태관리하는 방법을 배웠다. 요즘 Vue에 대해 학습하면서 내가 이전에 리액트 프로젝트에서 위험하게 데이터를 다루었다는 것을 깨닳고 있다. 그 때는 컴포넌트단에서 UseState(Mutations)를 props로 받아서 직접 데이터를 수정했었는데, 차라리 UseState를 활용하는 함수를 생성해서 props로 보내주는게 맞는 방식 인 것 같다.
3. Finding
null;
4. Future Action & Feedback
| Future Action | 진행 상황 | Feedback |
|---|---|---|
| DOM을 깨우치다 | pause 🤦♀️ | 잠시 중단! |
| why 리액트? | Not Start🌙 |