onMounted()에 걸어놓은 함수가 계속 실행되는 문제

문제점

 

메인 페이지에서 "쿠키 없음" 로그가 2번씩 찍히는 문제 발생.

 

 

 

Navbar에서 멤버의 정보를 가져오는 API, 쿠폰의 정보를 가져오는 API가 무조건 실행되도록 onMounted()에 걸어뒀다.

 

Navbar.vue

onMounted(() => {
  loadUserInfo();
  loadCouponInfo();
  const admin = store.getAdminRole;
  if (admin) isAdmin.value = true;
});

// 유저 정보 호출
const loadUserInfo = async () => {
  try {
    const data = await apiGet("api/members");
    store.updateUserInfo(data.data);
  } catch (error) {}
};

// 쿠폰 정보 호출
const loadCouponInfo = async () => {
  try {
    const data = await apiGet("/api/coupons");
    store.updateCouponInfo(data.data);
  } catch (error) {}
};

 

그리고 router에서 Navbar를 보여줄지 말지를 meta 데이터로 넣어서 관리하고 있었다.

 

  {
    path: "/",
    name: "Main",
    component: MainView,
    meta: { showNavbar: false },
  },

이렇게 false면 네브바가 보이지 않고, true면 네브바가 보인다.

 

true랑 false를 판단하는 위치는 App.vue에서 진행했다.

 

App.vue

<template>
  <navbar v-if="showNavbar"></navbar>
  <router-view></router-view>
</template>

<script setup>
import Navbar from "./components/Navbar.vue";
import { useRoute } from "vue-router";
import { computed } from "vue";

const route = useRoute();
const showNavbar = computed(() => {
  return route.meta.showNavbar !== false;
});
</script>

<style scoped></style>

 

이렇게 하면 showNavbar가 false면 Navbar 자체가 렌더링 되지 않기에 onMounted()가 실행되지 않아야 하는 거 아닌가?라고 생각이 들었다.

 

일단 의심이 되는 부분은 showNavbar 계산이 제대로 됐는지 확인해봐야한다.

 

로그를 하나 찍었던 결과

 

 

왜 하나는 undefined가 나오고 하나는 false가 나오는 걸까?

 

문제는 undefined에 있었다.

 

해결 방법

https://stackoverflow.com/questions/54438376/vuejs-mounted-is-called-even-if-component-was-not-loaded-via-v-if

vuejs mounted is called even if component was not loaded via v-if

 

위 글의 댓글에서 힌트를 얻었다.

 

내 경우 초반에 새로고침을 하면 undefined가 뜨면서 true, false에 해당되지 않아 렌더링이 진행됐다고 판단했다.

새로 고침 이후 화면을 전환하면 문제없이 true, false만 나오기 때문에 api를 비정상적으로 전송하는 일이 없어졌다.

 

이렇게 메인페이지와 로그인페이지를 들락날락하면 undefined는 잡히지 않아서 api 실행이 안 되지만, 새로고침을 하면 처음에 undefined가 잡혀서 true, false로 판단을 못하기에 렌더링이 진행되는 문제였다.

 

일단 다시 로그를 살펴보면 App.vue에서 발생하는 문제였다.

<script setup>
import Navbar from "./components/Navbar.vue";
import { useRoute } from "vue-router";
import { computed } from "vue";

const route = useRoute();
const showNavbar = computed(() => {
  return route.meta.showNavbar !== false;
});
</script>

결국은 route가 없는 상태로 showNavbar를 불러왔기에 undefined가 뜬 것.

 

약간의 꼼수를 이용해서 해당 문제를 해결했다.

 

<script setup>
import Navbar from "./components/Navbar.vue";
import { useRoute } from "vue-router";
import { ref, watch } from "vue";

const route = useRoute();
const showNavbar = ref(route.meta.showNavbar === false);

watch(route, (newRoute) => {
  showNavbar.value = newRoute.meta.showNavbar !== false;
});
</script>

결국 초반에 undefined가 뜨기 때문에 임의로 false가 뜨도록 바꿨다.

그리고 watch를 이용해서 새로운 라우터가 감지되면 값을 업데이트하도록 변경.

 

 

그랬더니 다행히 api를 보내는 문제는 사라지게 되었다.