12. helper 함수에 fetch를 정의하고, 가져올 때 Type을 지정해보자

매번 실패했던

 

fetch 가져올때 responseData 의 Type 지정 실패로,  State 에 넣지 못했던 것을

 

드디어 해결했따!

 

helper / fetch.ts

< helper / fetch.ts >

    export const getEurInfo = async ():Promise<KrweurType> => {		// fetch 를 할때 Promise 를 받을 타입을 지정
      try {
        const response = await fetch(
          "https://quo...EUR"
        );

        if (!response.ok) {
          throw new Error("failed to fetch data");
        }
        const responseData = await response.json();
        const krweurData = responseData[0];
        return krweurData;					//  Promise 를 return
      } catch (error) {
        throw new Error("failed to fetch data");
      }
    };

    export interface KrweurType {
      code: string;
      currencyCode: string;
      currencyName: string;
        ...
    }

 

App.tsx

export const App = () => {
  const [eurInfo, setEurInfo] = useState<KrweurType>(intialState);	// 이 Type 의 State에

  useEffect(() => {
    setReady(() => true);
    const fetchData = async (): Promise<void> => {		// 이 함수는 Promise<void> (반환이 없으므로)
      const data = await getEurInfo();			// 하지만 fetch 에서 반환된 data 는 타입을 잘 받아왔다.
      setEurInfo(() => data);
    };
    fetchData();
    return () => {};
  }, []);

예쓰!