인프런 커뮤니티 질문&답변
작성한 질문수
mapState, mapGetters 그리고 computed의 역할이 혼란스러워요
작성
·
2.7K
7
안녕하세요. 강의 잘 듣고 있습니다 :)
강의 중에 this.$store.state.user 부분을 줄이기 위해 computed를 사용하시면서 템플릿 부분 텍스트를 깔끔하게 하기 위해 computed를 거치는 것은 Vue.js 공식가이드에 나와있는 방식이라고 하셨는데, 그러면 mapState나 mapGetters는 언제 써야 하는것인가요?
물론 모든 방법이 다 의도한대로 작동할 것임은 알지만 제가 vuex 공식문서에서 본 바로는
"컴포넌트가 여러 저장소 상태 속성이나 getter를 사용해야하는 경우 계산된 속성을 모두 선언하면 반복적이고 장황해집니다. 이를 처리하기 위해 우리는 계산된 getter 함수를 생성하는 mapState 헬퍼를 사용하여 키 입력을 줄일 수 있습니다."
이렇게 보았기 때문에 계산된 데이터가 아닌 단순히 텍스트를 줄이기 위한 방법으로는 mapState가 가장 공식에서 제안하는 방식이라고 생각했습니다. 그러나 해당 강의를 듣고 약간 혼란스러워졌네요.
개발자 성향에 따라서 다르게 쓰는 것인지, 또는 프로젝트마다 아니면 속성마다 언제 사용해야 효율적이다... 라는 것이 있는 것인지 궁금합니다.
답변 2
14
안녕하세요 소영님 제가 답변이 조금 늦었네요..! :)
좋은 질문 주셔서 감사합니다. map 헬퍼 함수와 computed 속성의 활용처에 대해서 질문하셨는데요. Vuex 공식 문서의 내용을 잘 인용해주셔서 저도 모처럼 오랜만에 다시 읽어봤습니다. 말씀하신 것처럼 컴포넌트 단에서 스토어의 state를 가장 쉽게 접근하는 방법은 `mapState`가 맞습니다. 다만, 스토어의 state를 컴포넌트에서 접근하는 방법이 아래와 같이 몇 가지가 있는데
1. 템플릿에 `this.$store.state.user`속성 바인딩
2. computed 속성에 `this.$store.state.user`
3. computed 속성에 mapState
4. computed 속성에 mapGetters
이 모든 방법들이 다 유효한 방법입니다. 따라서, 개인의 성향에 따라 편한 방법을 선택하고 규칙을 세워 일관된 코드를 작성하는 것이 중요할 것 같아요. 다만, 저 같은 경우에는 computed의 캐싱의 이점이라든지 추후에 변화될 서비스 로직을 위해 미리 확장하기 편한 속성에 정의하는 걸 선호합니다. 그리고, 마지막으로 공유해드리고 싶은 부분은 Vuex의 향후 로드맵에 map 헬퍼 함수를 제거한다는 의견이 있어 map 헬퍼 함수를 모든 곳에 사용하고 있지는 않아요.
질문하신 내용에 충분한 답변이 되었는지 모르겠습니다. 저 역시 소영님처럼 공식 문서도 보고, 오픈 소스나 실제 서비스 개발하면서 저만의 기준을 만든 것이기 때문에 제가 강좌에서 다룬 내용이 절대 진리는 아니라는 걸 말씀드리고 싶어요. 소영님이 생각하시기에 편한 스타일과 코드 작성 기준을 만들어서 좋은 코드를 작성하실 수 있으면 좋겠습니다.
다시 한번 좋은 질문 주셔서 감사하구요. 그럼 나머지 강좌도 재밌게 들으셨으면 좋겠습니다. 감사합니다 :)
7
답변 감사합니다. 어찌되었든 모두 computed 속성 안에 정의되어야 하는 것이군요. 헷갈렸던 부분이 해결되었습니다.
Vuex 향후 로드맵까지 지켜보시고 코드 스타일을 정하신다는 것이 놀랍고 대단하십니다. 덕분에 새로운 정보도 얻게 되었네요.
나머지 강좌도 감사히 잘 듣겠습니다 :)