Vuex 페이지 렌더링 전 data 호출(undefined) 문제해결

Vue.js를 활용한 프론트 작업 중, 회원정보 수정 기능을 구현했다.

회원가입을 할 때와 거의 동일한 form이기 때문에 router-view 단에서 회원가입, 회원정보 수정View.vue를 만들고, compontents 단에서 회원가입 form을 만들고 재사용하는 방식을 썼다.

 

문제는, 회원정보 수정 시에는 기존 가입 시에 작성했던 정보를 가져와서 미리 input 혹은 select 등등에 띄워둬야 하는 것이었다.

먼저 store에서(vuex 활용) currentUser(회원정보)라는 state를 만들고, fetchCurrentUser라는 getters에서 api를 통해 정보를 가져오고 저장해둔다.

회원가입 시에는 임의의 회원 data(currentUser)를 만들었는데, 회원정보 수정 시에는 store에 있는 currentUser를 가져와서 써야 한다. 이때 회원정보 View.vue의 created() 시점에서 fetchCurrentUser 함수를 실행시키고, computed를 통해 currentUser를 가져온다.

여기서 문제가 발생하는데, created 시점에서 사용자 정보를 불러왔음에도 불구하고 console에 currentUser를 찍어보면 계속해서 undefined가 나왔다.

페이지가 렌더링되기 전에 데이터를 호출하는 것 같았고 회원정보 수정 View.vue가 아니라 회원가입 form.vue에서 바로 currentUser를 가져오면 되지 않을까 했지만 그것도 틀린 방법이었다.

 

해결 방법은 의외로 간단했다.

store의 state에서, currentUser와 더불어 isCurrentUser 데이터를 하나 더 만들어준다. 그리고 이 isCurrentUser는 currentUser가 있는지 없는지를 판단해주는 데이터이다.

회원정보 수정 View.vue에서 currentUser와 isCurrentUser를 모두 가져오고, v-if를 사용해서 isCurrentUser가 undefined가 아닐 때에만 회원가입 form.vue를 보여준다.

그렇게 했더니 회원가입form.vue에서는 created() 시점에서부터 currentUser 정보가 제대로 잘 출력됐다.

 

프로젝트를 계속 하면서 뭔가 코드를 짠다기보다는 수학? 혹은 논리식에 대해 공부하는 느낌이 많이 들었다.

결국 내가 원하는 대로 페이지를 구현하기 위해서는 여러 조건들이 필요하고, 그것들이 하나라도 꼬이면 안되기 때문에 기능이 동작하는 방식에 대해 논리적으로 생각할 필요가 있을 것 같다.