[vue3] composition api reactive + toRefs for 비동기

api 통신을 하면 당연히 비동기 처리가 많다.
list로 보여주기 위한 처리가 많은데
오브젝트 배열을 어떻게 비동기로 처리할까?

setup(){
	const 함수 = async () => {
    	try{
        	변수 = await API호출함수();
        } catch (error) {
        }
    }
    return {
    	함수, 변수
    }
}

이렇게 async와 await을 api데이터를 담게 되는데 문제는
비동기 이기 때문에 시간차가 발생하고 이를 연결하기 위해 반응형으로 변수를 처리해야 한다.

이 때 우리가 보통 받는 api데이터는 오브젝트 형태의 배열이다.
typescript를 쓰면 더 정확하게 받아줘야 한다.

오브젝트 형태이기 때문에 reactive()를 사용하여 정의한다.
ex) const data = reactive({ 변수: [] as 오브젝트 });

setup(){
	const data = reactive({ 변수: [] as 오브젝트 });
	const 함수 = async () => {
    	try{
        	data.변수 = await API호출함수();
        } catch (error) {
        }
    }
    return {
    	함수, 
        data, // data를 보내면 template에서 변수를 사용할 때 data.변수로 써야함
        ...toRefs(data), // 이를 벗겨 주기 위해 toRefs를 사용하면 template에서 그냥 변수로 사용 가능함. 
    }
}

마지막 return 값에 toRefs를 써도 되고 안써도 된다.
다만, template에서 사용할 때 data.변수로 쓰지 않고 변수 를 그냥 쓰고 싶다면 toRef를 사용하여 겁데기를 벗겨줘야 함.