Vue 비동기처리에서의 반응형함수

이 글은 Vue3 composition API를 기준으로 작성되었습니다. 

 

동기

실제 vue 어플리케이션을 이용한 웹뷰 개발에서는 대부분 서버로부터 받는 데이터는 splash 단계에서 또는 로그인 후 일괄적으로 pinia에 데이터를 저장하는 경우가 많았다. 따라서 서버통신한 데이터를 사용할 때는 pinia store에 전역적으로 저장된 데이터를 getter로 불러와서 사용하는 방식이었기 때문에 크게 문제가 되는 부분이 없었다.
하지만 프로젝트를 진행하면서 전역적으로 데이터를 관리할 필요없이 특정 페이지에서만 리스트를 보여주는 경우일 때는 페이지 컴포넌트에서 비동기통신을 해야 하는 경우가 발생한다.

이 경우 onMounted훅 내에서 비동기 데이터를 처리하고 ref를 사용하여 반응형으로 상태를 관리하는 것을 습관적으로 사용하였는데, 이때 '반응형'이라는 특징이 실제 프로젝트에서 사용되는 지점을 정확하게 파악하여 글로써 남기고자 작성하였다. 

 

---

 

Vue 컴포넌트내에서의 비동기통신 

setup()은 객체를 동기적으로 반환해야 합니다. async setup()을 사용할 수 있는 유일한 경우는 컴포넌트가 Suspense 컴포넌트의 자손인 경우입니다. - vue 공식문서 

비동기 데이터를 받을 때 setup()에서 async를 사용하는 것은 비동기 함수가 완료될 때까지 컴포넌트의 초기화가 완료되지 않기 때문에 잘 사용하지 않는다. 따라서 비동기 데이터를 받을 때는 주로 onMounted 훅 내에서 처리하고, 필요에 따라 ref나 reactive를 사용하여 반응형으로 상태를 관리하는 것이 일반적인 패턴이다. 

 

간단하게 말하면, 대부분의 경우에는 setup()은 동기적으로 처리되어야 하며, 비동기 작업이 필요한 경우에는 다른 방법(예: onMounted 훅 내에서 비동기 작업 수행)을 고려하는 것이 좋다

const certList = ref([]);
let testList = [];
onMounted(async () => {
    certList.value = await getCertList(params);
    console.log(certList.value); // data
    testList = await getCertList(params); // data
    console.log(testList);
});

console.log(certList.value); // undefined
console.log(testList); // undefined

• getCertList는 서버 API 통신 함수로, 배열 형태의 데이터를 반환한다. 
• onMounted 내에서는 certList, testList모두 data가 들어있다.
• onMounted 외부에서는 certList, testList모두 서버 API 통신 함수의 결괏값이 할당되지 않는다.
• 하지만 certList는 화면상에 반영이 되지만 testList는 화면상에 반영되지 않는다.

 

왜 이런일이 발생할까?

Vue의 ref 함수는 변수를 반응적인 데이터 속성으로 만들어준다. 초기에 ref로 감싸진 변수는 { value: 초기값 } 형태로 감싸지게 되어 있다. 그리고 onMounted 훅에서 해당 변수에 값을 할당하면 Vue는 이를 감지하여 자동으로 화면에 반영한다. 이렇게 하면 초기에는 undefined로 시작하더라도 onMounted에서 값이 할당되면 Vue가 해당 값을 감지하여 변경을 인지하고 화면에 반영한다.

 

즉 정리하면, 

• certList는 Vue의 반응적인 데이터 속성으로 선언되어 템플릿에 의해 관찰된다. 따라서 데이터가 변경될 때마다 해당 변경사항이 화면에 반영된다.
• 반면에 testList는 반응적인 데이터 속성으로 선언되지 않는다. 그렇기 때문에 해당 변수가 변경되어도 Vue는 이를 감지하지 못하고 템플릿에 반영되지 않는다.

 

---

 

결론

Vue 컴포넌트 내에서 상태를 반영하고 업데이트하려면 Vue의 반응형 시스템을 사용하여 변수를 선언하는 것이 중요하다. 이것이 ref를 사용하는 이유 중 하나이며, 이를 통해 Vue는 상태 변경을 추적하고 화면을 자동으로 업데이트할 수 있다.