인프런 커뮤니티 질문&답변
작성한 질문수
페이지 공유 데이터 처리
24.06.19 15:22 작성
·
97
1
안녕하세요.
단계(step)가 존재하는 페이지 이동시 공유 데이터 처리에 대해 질문 드립니다.
예를 들어
A프로세스 처리를
A-1, A-2, A-3의 페이지로 나뉘어 져 있으며
각 페이지에 입력된 값으로 최종 처리하고
또한 뒤로가기 하였을 경우 각 단계에서 입력된 값은 그대로 유지하여 노출해주어야 할경우입니다.
구글링을 해보면 전역 상태 값이 아니니 pinia 사용은 지양하는 듯하고
localStorage와 같은 기능을 사용하더군요.
이런 기능들을 사용하지 않고 vue3 자체 기능으로 사용할만한 것은 없는지 문의 드립니다.
답변 2
0
2024. 06. 22. 14:53
여러 컴포넌트 간데 상태는 공유하기 위해서는
부모 컴포넌트에서 생성한 props 를 자식 컴포넌트로 전달
전역 상태 생성 (Pinia)
와 같은 방법을 사용할 수 있습니다.
그리고 클라이언트의 데이터를 "유지"하기 위해서 LocalStorage를 사용하죠.
아마 아시는 방법일 거라 생각되고요.
한가지 언급 드리고 싶은 점은 Pinia vs LocalStorage 상호 배타적인 관계가 아니라 보완적인 관계입니다.
0
2024. 06. 21. 15:26
안녕하세요, 인프런 AI 인턴입니다.
Vue3에서는 페이지 간에 데이터를 공유하고 상태를 유지하기 위해 몇 가지 방법을 사용할 수 있습니다. 사용자님께서 언급하신 것처럼, 전역 상태 관리 라이브러리인 Pinia나 Vuex를 사용하는 것을 지양하시고, localStorage와 같은 웹 저장소를 사용하지 않으려고 한다면, Vue3의 Composition API를 활용하는 방법을 고려할 수 있습니다.
Composition API를 이용할 때, 공유하고자 하는 데이터를 관리하고 제공하는 컴포저블 함수를 만들 수 있습니다. 이 함수에서는 Vue의 reactive() 또는 ref()를 사용해 반응형 데이터를 생성하고, 이 데이터를 여러 컴포넌트에서 재사용할 수 있도록 합니다. 그리고 Vue3의 provide와 inject 기능을 이용하여 여러 레벨에 걸쳐 컴포넌트 트리에서 데이터를 전달하고 접근할 수 있습니다. 이 방법을 통해 복잡한 컴포넌트 계층 구조에서도 데이터를 쉽게 공유하고 관리할 수 있습니다.
또 다른 방법으로는 Vue Router의 네비게이션 가드와 함께 쿼리 파라미터나 파라미터를 사용하여 페이지 간에 데이터를 전달하는 방법도 있습니다. 이는 URL을 통해 상태를 유지하며 사용자가 뒤로가기를 했을 때에도 이전 상태를 유지할 수 있게 해줍니다.
각 방법은 사용 사례와 요구사항에 따라 선택하여 사용할 수 있으며, 복잡한 상태 관리가 필요하지 않은 경우 Vue3의 기본 기능만으로도 충분히 요구사항을 만족시킬 수 있습니다.