Vue - Pinia

Vue 애플리케이션 내부에서만 쓰이는 상태 State 관리 도구

프론트엔드에서만 동작하는 공통 저장소 역할

Vue 앱 내 임시 메모리 -> 새로 고침하면 사라짐

보통 백엔드에서 데이터를 가져와 Pinia에 저장해두고 화면에서 활용

 

1. 여러 컴포넌트가 공유하는 데이터 저장

-> 예) animals 배열을 A컴포넌트에서 추가하면, B컴포넌트에서도 자동으로 같이 반영됨

-> 컴포넌트끼리 props로 계속 전달할 필요 없어짐

 

2. 상태(모드, 선택값 등) 유지

-> mode = 'add' | 'modify', selectedIndex 같은 UI상태를 저장

-> 화면을 이동하거나 컴포넌트를 바꿔도 이 값들이 유지됨

 

3. 공통 로직/함수 ㅓㅈ장

-> 예) addAnimal(), removeAnimal(), updateAnimal() 같은 함수를 store 안에 두면 여러 화면에서 똑같이 사용 가능

 

왜씀???

-> props drilling (계속 부모->자식->손자 컴포넌트 전달) 문제 해결

-> Vue보다 문법이 단순해서 코드가 깔끔

-> 여러화면이 동시에 같은 데이터를 써야 할 때 동기화 쉬움