useAxios

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

axios 컴포저블 함수 구현 2

해결된 질문

작성

468

안녕하세요.

useAxios 내부에서 this를 찍어보면 undefined로 나오는데 왜 그런건지 잘 이해가 안되네요. ㅠㅠ

useAxios를 사용하는 컨텍스트가 찍혀야 될 것 같은데 왜 그런지 알려주시면 감사하겠습니다.

vue.js

답변 2

짐코딩

지식공유자

안녕하세요 :)

this는 호출하는 방법에 의해 결정됩니다. 그리고 객체 메서드(obj.methos())가 아닌 일반 함수(ex: useAxios)의 경우 this는 window 객체가 됩니다. 하지만 strict mode에서는 전역 객체가 아닌 undefined가 됩니다. Vite는 strict mode로 동작합니다.

참고 링크 한 번씩 확인해보세요~!

그리고 useAxios 함수 내에서 this를 사용하는 것은 바람직하지 않아보이는데요. 확인이 필요할 것 같습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요. useAxios 내부에서 this가 undefined로 나오는 이유에 대해 알려드릴게요.

useAxios는 React의 커스텀 훅이며, 함수로 동작합니다. 따라서 내부에서 this 키워드를 사용할 수 없습니다. this 키워드는 주로 클래스 컴포넌트에서 사용되며, 함수형 컴포넌트에선 사용하지 않습니다.

useAxios를 사용하는 컴포넌트에서 커스텀 훅을 호출할 때는 this가 아닌 다른 방식을 사용해야 합니다. 대부분 매개변수로 넘겨주는 방식을 사용하게 됩니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

import useAxios from 'use-axios';

function MyComponent() {
  const axiosOptions = {
    url: 'https://api.example.com/data',
    method: 'GET',
  };

  const { loading, error, data } = useAxios(axiosOptions);

  // 이후에 데이터를 사용하는 코드 작성 가능

  return (
    <div>
      {/* 컴포넌트 내용 */}
    </div>
  );
}

이런식으로 useAxios 훅을 사용할 때, this 키워드 대신 매개변수를 사용하여 호출하셔야 합니다. 이를 통해 useAxios 내부에서 컨텍스트를 이해할 수 있게 됩니다. 이해가 되시나요? 참고로 useAxios의 자세한 내용은 해당 라이브러리 문서나 공식 문서에서 확인하실 수 있어요. 문제가 해결되지 않았을 경우, 라이브러리 관리자에게 질문해보시는 것을 추천 드립니다.그럼 더 궁금하신 점이 있으시면 언제든지 물어보세요!

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

useAxios