ohah/react18-study

리액트 쿼리 관련 타입스크립트에 대해 질문 드립니다.

Closed this issue · 3 comments

ubububububub commented

강사님 안녕하세요. 질문드린지 얼마 지나지도 않았는데 또 모르는게 있어서 질문드립니다.. 타입스크립트가 왜이렇게 어려운걸까요..

image

현재 DailyQuery 쿼리 키를 main페이지와 daily페이지 총 2개의 페이지에서 사용할 일이 생겨서 커스텀훅으로 만들어 사용하고 있는 상황입니다.

image

문제는 쿼리 요청을 해서 받은 data가 undefined 타입을 가지고 있어서 if(!data) 로 타입 가드를 해줘야하더라구요. 저는 이 타입 가드를 하는 행위가 불필요? 하다고 생각되어서 없애고 싶은 생각을 가지고 있습니다. 왜냐하면 undefined 타입이 있는 이유는 useQuery를 이용한 데이터 요청이 실패한 경우 때문에 undefined가 반환되는거 같은데 해당 에러는 useQuery에 isError로 에러 핸들링을 할 수 있기 때문에 불필요하다고 생각하고 있습니다. 그런데 제가 잘못 본 것일 수도 있지만 5주차 강의 때 강사님이 react-query를 사용하실 때는 쿼리 요청을 해서 받은 데이터는 undefined의 타입을 가지지 않았고 쿼리 요청에 에러를 react-query에 isError로 에러 핸들링 하셨던거 같거든요. 그런데 왜 제 코드에서는 data가 undefined 타입을 가지는지 궁금해서 질문드립니다.

혹시 자세한 코드가 필요하실 수도 있으실 것 같아 브랜치 링크 남겨드립니다.
링크

해당 코드와 관련된 파일 components/Days, hooks/useDailyAnimes 입니다.

매번 답변해주셔서 감사합니다.

ohah commented

확인이 늦었네요
죄송합니다
깃허브 링크는 삭제되어 정확하게는 알 수 없지만
queryFn의 함수를 axios를 활용하여 불러오시고 있는것 같습니다.

axios.get(/api/crud).then(({ data }) => data);
이런 형태로 데이터를 받아온 후 then까지 입력하여 실제 데이터까지 리턴하게되면 undefined가 없습니다.
axios.get(/api/crud) 까지만 불러오면 데이터가 성공하였는지 아닌지에 대한 추측이 어렵기 때문에 두가지 타입으로 리턴이 됩니다.

강의 기간은 끝났지만 궁금한게 있다면 개의치 않고 물어봐주세요

  • 👍1
ubububububub commented

확인이 늦었네요 죄송합니다 깃허브 링크는 삭제되어 정확하게는 알 수 없지만 queryFn의 함수를 axios를 활용하여 불러오시고 있는것 같습니다.

axios.get(/api/crud).then(({ data }) => data); 이런 형태로 데이터를 받아온 후 then까지 입력하여 실제 데이터까지 리턴하게되면 undefined가 없습니다. axios.get(/api/crud) 까지만 불러오면 데이터가 성공하였는지 아닌지에 대한 추측이 어렵기 때문에 두가지 타입으로 리턴이 됩니다.

강의 기간은 끝났지만 궁금한게 있다면 개의치 않고 물어봐주세요

죄송합니다.. 링크를 올려놓고 브랜치를 삭제했었네요... 다시 수정했습니다.

image

image

위 함수가 queryFn으로 넘겨주는 함수인데요. 강사님이 예로 드신 코드랑 위 함수랑 같은 의미에 코드이지 않나요?

ohah commented

말씀하신 부분이 맞습니다.
제대로 다시 확인해보니 우선 data는 어떤 형태로 받든 네트워크에서 성공할수도 실패할수도 있어, undefined 타입은 무조건 있습니다.
다만 isError로 data의 값이 있든 없든 에러 자체는 핸들링 할 수 있고 조건에 data까지 굳이 넣을 필요 없이
리턴 되는 data의 경우 옵셔널 체이닝(?)을 처리 해주시면 될 것 같습니다

export function Days() {
  const { data } = useDailyAnimes();

  const mapedDays = days?.map(({ animes, day, id }) => (
    <Day key={id} animes={data[animes]} day={day} today={today === id} />
  ));

  return <>{mapedDays}</>;
}

이런식으로 처리하셔도 될 것 같네요.
타입스크립트에서만 있다가 자바스크립트도 지원되는 문법으로
해당 객체가 null, undefined일때 그 뒤에 있는 코드는 실행하지 않는 문법입니다.

  • 👍1