인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴입니다.

useAxios 컴포저블을 구현하면서 발생하는 문제를 설명해 주셨네요. 이 문제는 Vue의 반응형 시스템에서 발생하는 일반적인 상황일 수 있습니다. 먼저, RefImpl이라는 것은 Vue 3에서 반응성을 기본 제공하는 컴포지션 API 사용 시 ref로 감싸진 객체라는 것을 의미합니다.

문제 설명 및 해결 방법

1. Proxy(Object)와 RefImpl:

   • Vue 3에서 반환하는 데이터가 Proxy와 RefImpl 형태로 감싸지는 것은 Vue의 반응형 시스템 때문입니다. 이는 Vue의 컴포지션 API가 데이터를 감시하고 반응성을 유지하기 위해 사용하는 방식입니다.
     

2. 데이터 접근 방법:

   • 이러한 Proxy로 감싸진 데이터에 접근할 때는 .value를 활용해야 합니다. 예를 들어, axiosData.value와 같이 접근해야 데이터를 얻을 수 있습니다.
     

3. 데이터 undefined 문제 해결:

   • API로 부터 받은 데이터를 가공하여 사용하는 과정에서 .value가 빠졌거나, 해당 데이터가 아직 로딩 중이라서 그럴 수 있습니다.
     
   • 데이터를 얻고 난 후, 그 값을 확인하기 전에 console.log로 매 단계의 상태를 확인하여 문제 지점을 파악할 수 있습니다.
     

관련된 질문을 통해 더 자세히 알아보세요:
- useAxios에서 Proxy 객체와 RefImpl의 처리: useAxios 사용 시 this가 undefined로 나오는 경우의 해결책이며, RefImpl을 적절히 관리하는 방법에 대해 설명되어 있습니다.
- ref와 computed의 차이와 사용법: ref와 computed의 차이를 이해하고, 값 접근 시 어떤 점을 주의해야 하는지 도움을 받을 수 있습니다.

추가 조언

• 컴포저블을 구현하고 사용할 때 데이터의 로딩 상태, 초기 상태를 잘 확인하고, Vue의 반응형 특성을 잘 이해하는 것이 중요합니다. 데이터를 업데이트하거나 변화를 감지하는 경우에는 .value를 사용하세요.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.