인프런 커뮤니티 질문&답변
작성한 질문수
Vuex 관련 질문
작성
·
362
1
안녕하세요~ 캡틴 판교님 수업을 잘 듣고 실무에서도 잘 사용 중입니다.
다만, 사용하다보다가 발생한 궁금증이 있습니다.
Vuex의 장점들은 어디서나 쉽게 찾아볼 수 있는데, 단점이라 하면 무엇들이 있을까요?
저희가 props와 event로 component간 데이터를 주고 받는데,
component의 depth가 깊어지면 단순 데이터를 내리고 올림에 있어서 복잡도도 증가하고
번거로움도 생기잖아요?
그래서 eventbus가 있는데, 이 녀석은 naming rule을 아무리 잘 정해도 많이 사용하다보면
서로 호출하는 곳들이 얽히고 나중엔 어디서 사용하는지 모르는 경우가 태반이라 사실상
저희는 암묵적으로 금지하고 있는 상황입니다.
(사실 얘도 언제 사용해야 가장 powerful하게 사용할 수 있는지 궁금하네요.)
그래서 vuex를 많이 사용하는데, vuex 사용에 있어서도 내부적으로 갑론을박이 있습니다.
vuex도 eventbus 처럼 아무데서나 import만 하면 접근할 수 있어서 중구난방으로 접근이 되어서
결국 관리가 복잡해진다.
(실제도 redux도 처음에 적용했다가 다 걷어내는 프로젝트들이 주변에 점점 생겨나고 있어서요.)
그런데, 검색해보면 vuex는 단점이라고 설명이 되어 있는 것을 찾기가 힘듭니다.
또한, 어느정도 선에서 vuex를 적용해야하는지가 애매한데, 기준을 어떤식으로 잡아야 할까요?
vuex를 사용하면 .vue 파일 내부 코드나 로직들을 store쪽으로 뺄 수 있어서 많이 간략해지고 깔끔해지는
것으로 한눈에 component 구조들을 파악하기가 쉽긴 한데요.
그렇다면 모든 computed나 data에서 관리하는 것들을 다 vuex로 항상 빼는 것이 정답일지
알아서 적당히 구분해서 할지... 정말 필요한것만 vuex로 빼야할지 그런것들이 참 어려운 것 같습니다.
마치 component를 어느정도 수준으로 세분화해서 설계할지와 같은 고민 같습니다.
제가 front 개발에 대한 지식의 깊이가 미진해서 그런지 관련해서 이야기를 한번 듣고 싶은데,
제 주변에서는 마땅하지가 않아서 질문을 남깁니다.
답변 2
1
안녕하세요, 수준 높은 질문이네요. 깊은 고민을 하시고 질문해 주셔서 저도 재밌게 읽었습니다 :) 질문하신 내용에 답변부터 드리자면 Vuex의 단점은 Vuex에 과도하게 의존했을 때 사고의 비용이 늘어난다인 것 같아요.
이벤트 버스도 그렇고 뷰엑스도 그렇고 컴포넌트 내부의 로직을 바로 보지 못하고 다른 파일로 넘어가서 확인해야 합니다. 그런면에서 뷰엑스가 불필요하게 비대해지면 전체적인 서비스 로직을 따라가는데 피곤해질 것 같아요 :)
가급적 특정 UI에 관련된 로직과 상태(data, state)는 최대한 해당 UI에 가깝게 붙어 있는게 더 사고하기가 수월합니다. 참고하세요 :)
※ 참고 : Vuex는 사용하지 않아도 된다면 안쓰는게 좋습니다. 컴포넌트 설계만 잘하셔도 은근히 뷰엑스가 필요한 지점이 많지 않다는 걸 느끼실 거예요 :)
0
안녕하세요, 인프런 AI 인턴이에요. Vuex와 관련된 질문이네요.
Vuex는 상태 관리 라이브러리로써 여러 가지 장점이 있지만, 몇 가지 단점도 존재합니다.
첫째, Vuex를 사용하면 코드의 복잡성이 증가할 수 있습니다. Vuex를 사용하면 상태 변화를 추적하고 관리하기 위해 액션, 뮤테이션, 게터 등의 개념과, 모든 상태 변경이 일어나는 단일 소스인 스토어를 사용해야 합니다. 이로 인해 프로젝트 규모가 커지면 코드의 복잡성이 증가할 수 있습니다.
둘째, Vuex의 사용 여부에 대한 의존성 문제가 발생할 수 있습니다. Vuex는 store를 단 하나만 사용할 것을 권장합니다. 그러나 프로젝트가 커지고 더 많은 상태와 뷰를 다루게 될 경우 여러 개의 store가 필요해질 수도 있습니다. 이때 Vuex에 대한 의존성 문제가 발생할 수 있으며, 이를 해결하려면 모듈을 사용하여 store를 나누는 등의 방법을 사용해야 합니다.
셋째, Vuex는 Flux 패턴을 기반으로 하고 있어서, 개념을 익히고 사용하는 데에 시간이 필요할 수 있습니다. Vuex의 개념과 패턴을 익히는 과정은 처음에는 다소 어려울 수 있습니다.
또한, props와 event를 사용하여 컴포넌트 간 데이터를 주고 받는 것도 단점이 될 수 있습니다. 따라서 컴포넌트의 depth가 깊어질 경우, 데이터 전달이 복잡해지고 번거로워질 수 있습니다.
eventbus는 상태를 전역으로 관리하고 이벤트를 이용하여 컴포넌트 간 통신을 수행할 수 있지만, 이름 규칙을 잘 지정해도 사용하는 곳들이 얽혀서 관리가 어려워질 수 있습니다. 또한, 예측할 수 없는 부작용이 발생할 가능성도 있습니다.
Vuex는 Redux와 마찬가지로 어느 곳에서든지 접근할 수 있는 싱글톤으로써, 중구난방한 접근이 가능하고 그로 인해 관리가 복잡해질 수 있습니다. 이러한 이유로 프로젝트에 따라 vuex를 사용하지 않는 경우도 있습니다.
하지만, Vuex는 복잡한 상태 관리를 간편하게 해주는 장점이 있으며, 프로젝트 규모가 큰 경우 유용하게 사용될 수 있습니다. 적절한 상황에서 사용하면 강력하게 활용할 수 있습니다.
더 자세한 내용을 알고 싶다면 공식 문서나 커뮤니티에서 더 많은 정보를 찾아보시길 추천드립니다. 감사합니다!