Data fetching 타입지정해보기, useEffect에서 async

 

• fetch의 타입 
• BlogPosts컴포넌트에 프롭으로 전달 
• error객체의 타입 지정 

 

 

fetch의 타입 

---

 

프로미스를 반환함 

프로미스는 제네릭 타입인데 어떤 값을 생성할 프로미스

response 객체

 

response는 브라우저에서 제공되는 또다른 타입 (Response)

 

 

 

 

response.json()으로 JSON데이터를 얻을 수 있음 

 

.json은 promise를 또 반환  

그런데 백엔드로부터 받는 데이터가 어떤 형식인지 모르므로 

any타입으로 지정될 수밖에 없음 

 

 

 

참고 : Zod 라이브러리 

---

 

데이터를 유효성 검사하고 

유효성 검사 결과에 따라 TypeScript에서 

자동으로 타입을 추론할 수 있게 해줌 

 

 

 

임시방편  as

---

 

  const data = response.json() as unknown;

 

 

any보단 나은것이 unknown을 사용하면 

TypeScript가 알지 못하는 속성에 액세스하려고 하면 오류가 발생

 

 

 

useEffect에서 async 함수 사용해보기

---

 

 

How to use async function in useEffect?

 

기본적으로 useEffect에서는 프로미스를 반환할 수 없음 

useEffects는 아무것도 반환하지 않든지, 함수를 반환해야 함 

 

방법은 내부에 중첩으로 async 함수를  사용하든지 

바깥으로 async 함수를 꺼내든지 

 

 

 

import { useEffect, useState } from "react";
import { type BlogPost } from "./components/BlogPosts";
import { get } from "./util/http";


function App() {
  const [fetchedPosts, setFetchedPosts] = useState<BlogPost[]>();

  useEffect(() => {
    const fetchData = async () => {

    };
    fetchData();
  }, []);

  return <h1>Data Fetching!</h1>;
}

export default App;

 

 

가져온 Data의 타입 설정

 

jsonplaceholder에서 가져온 데이터의 타입은 아래와 같음 

 

 

type RawDataBlogPost = {
  id: number;
  userId: number;
  title: string;
  body: string;
};

 

 

 

 

아래와 같이 하면 

응답 기다린 후에 얻게된 결과의 타입을 지정할 수 있음 

 

      const data = (await get(
        "https://jsonplaceholder.typicode.com/posts"
      )) as RawDataBlogPost[];

 

 

 

 

가져온 rawData 변경 

 

fetchedPosts의 형식은 

아래와 같고 

아래의 형식을 따라서 

가져온 데이터를 코드에서 활용할 것이므로.

 

export type BlogPost = {
  id: number;
  title: string;
  text: string;
};

 

   const blogPosts: BlogPost[] = data.map((rawPost) => {
        return {
          id: rawPost.id,
          title: rawPost.title,
          text: rawPost.body,
        };
      });

      setFetchedPosts(blogPosts);

 

 

 

 

BlogPosts컴포넌트에 프롭으로 전달 

---

 

 

 

에러 

---

fetchedPosts의 스테이트값이 초기 undefined이기 때문에 

발생할 수 있는 에러를 타입스크립트가 알려준 것.

 

 

 

 

아래와 같이 수정하여 

fetchedPosts가 undefined일때 에러가 나지 않도록 하자

 

 

  return (
    <main>
      <img src={fetchingImg} alt="abstract img" />
      {fetchedPosts &&<BlogPosts posts={fetchedPosts} />}
    </main>
  );

 

error객체의 타입 지정 

---

 

 

try catch를 하면

error의 객체 타입이 무엇인지 알 수 없어서 

에러가 남 

 

 

 

 

방법 1. as 로 타입 캐스팅

---

 

 

 

        setError((err as Error).message);

 

 

 

 

방법 2. if 체크 

---

 

 

 

catch (err) {
        if (err instanceof Error) {
          setError(err.message);
        }
      }