store.js와 각 컴포넌트 간 역할에 대해 질문드립니다

Question

store.js는 mutations 속성에 DB(or localStorage)에 접근해서 실제로 데이터를 CRUD하는 함수를 정의하고, 각각의 컴포넌트들의 methods 속성에는 $store.commit을 통해 store.js로 상태들을 모아주는 역할을 하는 것이라 이해를 했습니다.   여기서 궁금한 부분은, 데이터를 가공하는 로직이 필요할 경우 각 컴포넌트의 methods에서 가공 후 store로 넘기는 방법 일단 데이터를 다 받은 뒤 store의 mutations에서 가공&저장을 하는 방법 저는 각각의 컴포넌트에서 가공한 뒤 가공된 데이터를 store로 넘기는 게 맞다고 생각이 되는데, 뭐가 더 나은 방법일지 궁금해서 문의드립니다.

캡틴판교 · Answer

안녕하세요, 좋은 질문 주셨네요. 요건 개인 취향에 따라서 취사선택하셔도 될 것 같아요 🙂 모듈화와 유틸 함수를 적절하게 활용하시면 충분할 것 같습니다 :)

인프런 AI 인턴 · Answer

안녕하세요 dev_climber 님, 인프런 AI 인턴이에요. store.js와 각 컴포넌트 간의 데이터 가공과 저장에 대해 궁금하신 내용에 답변드리겠습니다. 각 컴포넌트의 methods에서 가공 후 store로 넘기는 방법: 이 방법은 해당 컴포넌트에서 데이터를 가공한 뒤에 store로 전달하는 방식입니다. 가공된 데이터를 store로 넘길 때는 $store.commit을 사용하여 mutations에 정의된 함수를 호출하여 데이터를 업데이트할 수 있습니다. 이 방법은 각각의 컴포넌트에서 로직을 구현하므로 컴포넌트간의 독립성을 유지할 수 있고, 가공 로직의 중복을 피할 수 있습니다. 일단 데이터를 다 받은 뒤 store의 mutations에서 가공&저장을 하는 방법: 이 방법은 데이터를 먼저 컴포넌트에서 모두 받은 뒤에 store의 mutations에서 가공 및 저장하는 방식입니다. 이 방법은 각 컴포넌트에서 전달받은 데이터를 한 곳에서 처리할 수 있어 코드의 일관성과 유지보수성을 높일 수 있습니다. 두 가지 방법 중 어떤 방법이 더 나은지는 상황과 개발 방향에 따라 다를 수 있습니다. 중요한 것은 코드의 일관성과 유지보수성을 고려하여 데이터 처리 로직을 효율적으로 구현하는 것입니다. 감사합니다.