vuex와 컴포넌트 설계 관련 질문

안녕하세요, 질문을 많이 주셨네요..! ^^ 답변 드릴게요.

1) action에서 반드시 mutation을 호출할 필요는 없는 것이죠?

view에서 action을 통하여 api를 호출하여 비동기로 데이터를 받은 다음, action을 호출한 method에서 데이터를 처리하고 mutation을 다시 호출하여 state에 넣어도 되는 것이죠?

답변) 네 괜찮습니다. 하지만 action을 쓴다면 mutation으로 state까지 넘기는 구조를 권장드립니다 :)  

2) 1번 질문의 연장 질문입니다. action에서 비동기로 받은 데이터를 return을 받는 방법은 일반적인 method에서 return 시키는 방법처럼은 없는 것인가요? 검색해보면 전부 promise를 사용하는 방식인거 같아서요.

답변) action이 비동기를 처리하는 속성이라 Promise를 리턴하는게 좋습니다 :)

3) 제가 이해하기론 view에서는 getter를 이용해서 state의 데이터를 받는 것이라고 이해했습니다.

그렇다면 우리가 어떤 컴포넌트의 v-model에 getter를 직접 연결해도 괜찮은가요?

실제로 vuex에는 데이터가 잘 반영이 되는데, 이렇게 되면 getter가 mutation의 역할도 같이 해버리는 것 같아서요.

찾아보면 value=mapState + @input을 통하여 method에서 mutation을 호출하여 분리하여 처리하라고 하는거 같은데, view에서 바로 state를 붙게되면 또 getter의 의미가 퇴색되는거 같아서 그렇습니다.

답변) 네 getters를 붙이셔도 됩니다. 아래 문서 참고해 보시겠어요? :)

https://vuex.vuejs.org/guide/forms.html#two-way-computed-property

4) 특정 메뉴의 컴포넌트의 depth도 깊고 child도 많은 상황이라 vuex를 사용하려합니다. 그런데, 버튼을 클릭하면 특정 컴포넌트를 추가하고 또 삭제도 가능한 상황입니다. v-for를 통하여 vuex에 있는 list에 해당 컴포넌트의 데이터를 추가하고 삭제하면서 관리를 합니다. 다만, 특정 컴포넌트에서 vuex에 있는 데이터에 바로 접근하려면 항상 본인의 index를 props로 내려받아서 list[this.index].object 이런식으로 접근해야하는데, v-for와 vuex를 동시에 사용하는 상황에서 효과적으로 컴포넌트를 설계하는 방식이 있을까요?

답변) 요건 코드가 없어서 좀 답변이 어려울 것 같아요 :)

5) action과 mutation의 동작 범위

action과 mutation은 각각 비동기/동기로 데이터를 처리하는 것으로 이해하고 있습니다.

그렇다면 우리가 action과 mutation에도 많은 녀석들이 생성될 텐데요.

action과 mutation안에서 단순히 api로 데이터를 비동기로 호출하거나 또는 동기로 state에 데이터를 저장하는 그런 동작 외에 어떤 데이터를 처리하거나 하는 Logic단같은 코드나 함수를 추가해도 되는 것일까요?

아니면 그런 코드들은 view에서 생성하고 거기서만 처리하고 action과 mutation에는 단순 데이터를 호출하고 저장하고 하는 그런 코드만 작성하여 최소한으로 해두어야하는 것일까요?

답변) 단순한 데이터 가공은 유틸 함수나 별도 JS 모듈을 사용하시는 걸 추천드려요. 스토어는 안쓸 수 있다면 안쓰는게 제일 좋습니다 :)

6) 현재 저희는 typescript로 넘어가지 않고 아직 javascript를 사용하고 있습니다.

간간히 javascript의 class를 사용하고 간단한 디자인 패턴도 넣어서 같이 구현하곤 하는데요.

혹시 다른 객체지향언어(C#, Java)와 같이 class와 상속/조합 과 같은 설계를 많이 사용하시나요?

아니면 그런걸 지원하긴 하지만 거의 안쓰시나요?

또한, 전략/팩토리/옵저버 등과 같은 간단한 디자인패턴도 사용하시는지?

아니면 브릿지 등과 같은 고급 패턴도 typescript/javascript에서 구현을 해서 사용을 하는 경우도 있는지 이런 부분이 생기면 최대한 backend단으로 넘겨서 처리시키시는지 front에서의 처리를 어느정도로 하는지 궁금합니다.

답변) 리액트나 뷰나 모두 추상화가 되어 있는 프레임워크입니다. 따라서, 이런 프레임워크 위에서 구현하는 경우 클래스나 별도의 디자인 패턴까지 나오는 UI는 많지 않을 것 같아요. 요건 개인적으로 판단해서 사용하시면 될 것 같아요 :)

안녕하세요 ysoo900 님, 인프런 AI 인턴이에요.

1. action에서는 mutation을 호출하지 않아도 됩니다. 비동기 작업 후에 직접 데이터를 처리하고 state를 업데이트해도 되는데, 이렇게 하면 구조적으로 좀 더 직관적이고 간단할 수 있습니다.

2. action에서 비동기로 받은 데이터를 return하는 방식은 일반적인 method처럼은 사용할 수 없습니다. Vue.js의 특성상 비동기 작업은 Promise를 사용하여 처리해야 합니다.

3. 컴포넌트의 v-model에 getter를 직접 연결하는 것은 괜찮습니다. 그러나 state에 직접 접근하는 것을 유의해야 합니다. 보통 getter를 통해서 state를 받아오는 것이 좋은 방법이며, v-model은 state를 업데이트하는데 사용될 수 있습니다.

4. v-for와 vuex를 함께 사용하는 경우에는 component의 index를 props로 전달하는 것이 일반적입니다. 컴포넌트에서 vuex에 있는 데이터에 접근할 때는 해당 컴포넌트에 대한 index를 사용하여 접근하는 것이 좋습니다.

5. action과 mutation은 데이터 저장 및 호출 이외에도 로직과 함수를 추가하여 처리할 수 있습니다. 그러나 관심사의 분리와 코드의 재사용성을 고려해야 합니다. 단순한 데이터 호출 및 저장은 action과 mutation에, 로직과 함수는 다른 모듈에서 처리하는 것이 좋습니다.

6. Vuex는 객체지향 언어의 디자인 패턴을 따르는 것은 아니지만, 클래스와 상속, 조합 등을 사용하여 코드를 구성하는 것은 가능합니다. 간단한 디자인 패턴도 사용할 수 있지만, 고급 패턴은 필요에 따라서 사용하는 경우도 있습니다.

말로 제출하신 질문을 충분히 이해할 수 있었습니다. 이에 대한 답변으로 도움이 되었으면 좋겠습니다. 추가 질문이 있으시면 언제든지 물어보세요!