안녕하세요 질문 있습니다.

[리뉴얼] React로 NodeBird SNS 만들기

작성

311

수정됨

안녕하세요 강의 관련된 내용은 아닌데 혹시 질문 드려도 괜찮을까요?

이번에 슬랙에서 만두피님이 하신걸 보고 저에게 맞게 따라하고 있는데 잘 되지 않아 질문 드립니다.

스크린샷 2023-04-11 오전 11.13.56.png 위와 같은 문제가 있는데 그 전에 비슷하게 사용했을땐 잘 되던 일이라 이것저것 해보다가 typescript 버전을 v4로 내리면 data가 IForm[] 으로 추론 된다는걸 알았습니다. typescript v5을 사용하려면 어떤 식으로 풀어가야 할까요?? rk는 v4 사용하고 있습니다.

공홈에서는 저 fetchFormAPI에서 리턴 값 타입으로 Promise<IForm[]>으로 주면 된다는데 처음 보는 방법이라 맞는건지 아니면 그냥 연습을 위한 방법인지 잘 몰라 질문 드립니다.

const { data, isLoading } = useQuery<IForm[]>(['forms'], () => fetchFormsAPI('test'));

export function fetchFormsAPI(domain: string) {
  // 1
  return api.get(`/forms?formId=${domain}`).then((response) => response.data);

  // 2
  // return axios({
  //   method: 'get',
  //   url: `/forms?formId=${domain}`,
  // }).then((response) => response.data);
}

export const api = axios.create({
  baseURL: backUrl,
  withCredentials: true,
});

위 2번째 코드에서 2번을 사용하면 첫번째 사진 빨간 밑줄은 사라지는데 결국 타입 추론이 안되는건 같았습니다.

그리고 공식 문서 처럼 fetchFormAPI함수에 리턴 타입을 붙이고 useQuery에 타입을 빼면 아래와 같이 useQuery에서는 타입을 정상적으로 추론하지만 막상 데이터를 사용할 때는 이상한 값이 들어오는 것을 확인했습니다.

export function fetchFormsAPI(domain: string): Promise<IForm[]> {
  // 1
  return api.get(`/forms?formId=${domain}`).then((response) => response.data);
}

const { data, error, isLoading } = useQuery(['forms'], () => fetchFormsAPI('test'));

스크린샷 2023-04-11 오후 1.20.58.png

typescript 버전을 v4로 내리면 정상 작동하는 것은 확인했습니다. 어제부터 해결을 못하고 있어 질문드립니다. 감사합니다.

react redux node.js express next.js

답변 1

제로초(조현영)

지식공유자

일단 리턴값에 타입 주는 건 맞는 것 같은데요. 아래 data가 왜 이상한 타입이 나오는지는 모르겠네요.

IForm이 제대로된 타입이 맞나요?

Milkyway

질문자

답변 주셔서 감사합니다. IForm은 지금은 임시로 라벨값만 불러와서 붙일수 있도록 아래와 같이 만들었습니다.

export default interface IForm {
  label: string;
  dataList?: string[];
}

제가 생각하기엔 제대로된 타입이라 생각하는데, 타입스크립트 숙련도가 낮아서 자신이 없는데 혹시 봐주실수 있을까요?

제로초(조현영)

지식공유자

IForm은 문제가 없네요. 위에 data에 손 올렸을 때 IForm[] | undefined 뜨는데 아래에서만 객체로 뜨는 거죠..?

Milkyway

질문자

네 맞습니다. 바로 위에서 확인 했을 땐 추론이 제대로 됩니다.

제로초(조현영)

지식공유자

밑에서는 post.label, post.dataList 사용이 가능한가요?

Milkyway

질문자

넵 자동완성도 되고 실제로 입력 해서 코드를 완성 했을 때(post.label, post.dataList) 오류도 나지 않습니다. 이걸 말씀하시는게 맞을까요?

제로초(조현영)

지식공유자

네네 그럼 이제 문제 없는 것 아닌가요??

Milkyway

질문자

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

저는 타입가드를 거친 data 의 타입이 IForm[] 이 될거라 생각했습니다. 혹시 잘못 생각하고 있는 걸까요??

위에 isLoading, error에 대한 분기문과 return 은 있는 상태입니다.

if(data === undefined) return; 을 하면 정상적으로 IForm[]으로 추론 되는 것까진 확인 했습니다.

제로초(조현영)

지식공유자

타입 가드를 거치면 IForm[]이 되는 게 맞습니다. IForm[]이 안 나오는 곳이 있나요?

data.map 부분은 확실히 뭔가 타입 표시가 이상한 것 같고요.

Milkyway

질문자

return 전에 data를 볼 땐 IForm[] | undefined 인데 return 문 안에서는 다른 값이 보입니다ㅠㅠ

추가로 혹시 싶어서 vsc로 봤더니 정상적으로 보인다는걸 발견 했습니다.

에디터 설정 문제일수도 있단 생각이 드는데, 제가 따로 건든건 없습니다ㅠ
위가 웹스톰이고 아래는 vsc입니다. 웹스톰 사용시 타입스크립트 관련해서 뭔가 해줘야하는 것이 있을까요? IDE는 최신 버전입니다.
추가적으로 타입가드를 하려면 isLoading과 error말고 원래 data 값 까지 확인해줘야 하나요??

답변 감사합니다.

제로초(조현영)

지식공유자

저건 웹스톰 문제라서 어떻게 할 수가 없습니다.

data도 undefined가 될 수 있으므로 타입가드 넣으셔야 합니다.

Milkyway

질문자

감사합니다ㅠㅠ

혹시 몰라 다른 것도 보니 전반적으로 타입 추론을 제대로 못하고 있는것 같네요.

마지막으로 현영님은 에디터 뭐 사용 중이신지 여쭤봐도 괜찮을까요?? 긴 시간동안 답변 주시고 알려주셔서 정말 감사합니다!!

제로초(조현영)

지식공유자

저는 일반적으로 업무에는 웹스톰 쓰고 있고 타입스크립트교과서 집필에는 vs code 쓰고 있습니다. 책에는 유료 에디터를 쓸 수가 없어서요. 5.0 관련해서 아직 웹스톰에서 업데이트가 안된 것일 수 있습니다. vs code는 ts랑 같은 회사이니 문제 없을 수 있고요.

Milkyway

질문자

조언 감사합니다. 큰 도움 받았습니다. 정말 감사합니다!!

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

안녕하세요 질문 있습니다.