[ 타입스크립트(TypeScript) ] customHooks로 getApi hooks 관리하기

📍 customHooks로 getApi 코드 관리하기

fetch 혹은 axios를 사용하여 api를 받아올 때 기존에는 app.tsx 파일 내에서 useEffect를 사용하여 api를 받아오는 코드를 모두 작성했다. 그러나, app.tsx에 api와 관련된 코드를 모두 작성하면 다른 로직코드를 보는데 신경 쓰여서 다른 곳으로 옮겨야겠다는 생각이 떠올랐고 hooks 폴더를 생성하여 customHooks로 따로 관리하는 방법이 app.tsx의 가독성을 증가시킨다고 생각했다.

 

data, loading, error 값을 export 할 때 타입추론이 명확하게 되지 않는 경우가 있어 as문을 사용해서 어떤 타입인지 명시했다. as문 대신 interface를 usePosts 리턴값에 붙여줘도 되는데 이때는 {}로 return 하고 app.tsx에서 불러올 때도 {}로 불러오는것을 잊지 말자.

 

자세한 코드는 깃허브를 참고해주세요 :)

 

// hooks/usePosts/index.tsx
// use alias(as)
import axios, { AxiosResponse } from "axios";
import { useEffect, useState } from "react";
import { Data } from "../../types";

const usePosts = () => {
  const [data, setData] = useState<Data[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<Error>();

  useEffect(() => {
    setLoading(true);
    const getPosts = async () => {
      try {
        const response: AxiosResponse<any> = await axios.get(
          "https://jsonplaceholder.typicode.com/posts/"
        );
        setData(response.data);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    };
    getPosts();
  }, []);

  return [data, loading, error] as [Data[], boolean, Error];
};

export default usePosts;

 

// hooks/usePosts/index.tsx
// use interface
import axios, { AxiosResponse } from "axios";
import { useEffect, useState } from "react";
import { Data } from "../../types";

interface Response {
  data: Data[];
  loading: boolean;
  error?: Error;
}

const usePosts = (): Response => {
  const [data, setData] = useState<Data[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<Error>();

  useEffect(() => {
    setLoading(true);
    const getPosts = async () => {
      try {
        const response: AxiosResponse<any> = await axios.get(
          "https://jsonplaceholder.typicode.com/posts/"
        );
        setData(response.data);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    };
    getPosts();
  }, []);

  return {data, loading, error};
};

export default usePosts;

 

// app.tsx
import Container from "./components/container";
import Card from "./components/molecules/card";
import usePosts from "./hooks/useposts";

const App = () => {
  const [data, loading, error] = usePosts();

  if (loading) {
    return <div>loading...</div>;
  }

  if (error){
    return <div>Error...</div>
  }

  return (
    <Container>
      {data.map((item) => (
        <Card key={item.id} item={item}></Card>
      ))}
    </Container>
  );
};

export default App;