23/01/03_에러노트

4차과제 리팩토링 중 마주친 에러에 대해 작성해보려고 합니다. 먼저 기존에 작성했던 코드입니다. 쿠키에 저장된 토큰을 사용해 계좌정보를 가져와 화면에 출력하기 위해 작성한 부분입니다.

const accessToken = getCookie('accessToken');

const [loading, setLoading] = useState(false);
const [myAccount, setMyAccount] = useState({totalBalance:0, accounts:[]});

useEffect(() => {
  getAccountInfo({ accessToken }).then((data) => setMyAccount(data));
  setLoading(false);
}, [accessToken]);

에러코드

useQuery 를 이용해 아래와 같이 리팩토링을...

const accessToken = getCookie('accessToken');

const {
    isLoading,
    data : myAccount,
  } = useQuery(['myAccount'], () => {
    getAccountInfo({ accessToken });
  });

하자마자 나타나는 콘솔의 에러... ^^

Error: Query data cannot be undefined. Please make sure to ''return'' ....

쿼리 데이터가 undefined 일 수 없다고 하는데,,, 네, 저도 그걸 의도한건 아닙니다만..😤 값을 리턴하라고 하는데 저는 분명 getAccountInfo 함수에서 fetch함수를 이용해 받아온 데이터를 리턴해줬거든요 🤷‍♀️

해결

문제는 react나 useQuery때문이라기 보단 제가 javascript 화살표 함수의 기본을 놓쳤습니다. 중괄호를 아예 생략했다면 계좌정보를 받아오는 함수에서 리턴받은 값을 반환해줬겠지만 중괄호를 작성하고 return 키워드를 누락시켜 getAccountInfo를 호출해 받아온 값을 리턴하지 않아 계속해서 undefined가 떴던 것이었습니다.

// 한줄이라면 중괄호를 생략하여 작성하거나
const {
    isLoading,
    data : myAccount,
  } = useQuery(['myAccount'], () => getAccountInfo({ accessToken }));

// 여러줄을 실행해야 한다면,
// 중괄호와 return 키워드를 같이 사용해 리턴해주어야 합니다.
const {
    isLoading,
    data : myAccount,
  } = useQuery(['myAccount'], () => {
    return getAccountInfo({ accessToken });
  });

느낀점

어제 조별모임 이후 promise와 관련된 이야기를 나누면서도 js의 기본개념이 확립되어있지 않아 헷갈리는 부분이 많다고 느꼈습니다. 그래서 자바스크립트의 event-loop나 callstack등 자바스크립트가 브라우저에서 동작하는 원리에 대해 다시 복습하는 시간을 가졌습니다. 다시 찾아보고 검색하다보니 수업을 들었던 내용인데,,,😭 그래서 react활용 과제 리팩토링을 하면서도 js기본개념도 계속해서 복습하고 블로그작성도 해볼 생각입니다!! 제발👻