api data에 interface 적용 Tip

9040 단어 ReacttypescriptReact

React & TypeScript

API 데이터를 불러와 사용하기전 interface를 이용해 타입을 적용할때 팁.
api에서 데이터를 불러올때 다양한 key, value가 존재하는데 이걸 일일이 interface에 써주기에는 너무 번거롭다.
예)

const [info, setInfo] = useState<InfoData>();
const [priceInfo, setPriceInfo] = useState<PriceData>();
useEffect(() => {
  (async () => {
    const infoData = await (
      await fetch(`https://api.coinpaprika.com/v1/coins/${coinId}`)
    ).json();
    const priceData = await (
      await fetch(`https://api.coinpaprika.com/v1/tickers/${coinId}`)
    ).json();
    console.log(infoData); //****
    console.log(priceData); //****
    setInfo(infoData);
    setPriceInfo(priceData);
  })();
}, []);
  1. api를 통해 불러온 데이터 infoData, priceData가 존재하는데 이걸 우선 console.log()로 찍어준다.

  2. 아래와 같이 콘솔에 Object가 찍히면

    두 개의 Object를 각각 우측 마우스를 클릭하여 'Store object as global variable' 를 선택해준다.
    그러면 그림과 같이 temp1, temp2 가 생성된다.

  3. Object.keys().join()을 사용한다.

    생성된 temp를 위와같이 사용하면 key값만 나온다.

  4. 출력된 key값들을 복사해서 vscode의 만들고자 하는 interface 안에 넣는다.

    그리고 쉼표를 드래그 한 다음에 command + D 를 이용해 모두 선택해주고 Enter를 눌러준다.

  5. 그 상태 그대로 command + ➡️ 를 사용해 우측 끝으로 이동 후 : ; 를 작성해준다.

    아니면 모두 드래그를 한 다음에 option + shift + I 를 클릭해서 우측끝으로 이동한다.

  6. Object.values().map((v)=>typeof v).join()

    key 값을 얻었을때처럼 그냥 values().join() 해버리면 value 값이 나온다. 하지만 내가 알고싶은것은 Type 이기에 map을 이용해서 typeof 로 출력해준다.

  7. 출력된 값을 복사해서 command + D 를 이용해 일렬로 세워준 다음에 전체 잘라낸다.
    자르기 command + X

  8. 먼저 작성된 key 값들을 전체 드래그 후 option + shift + I 을 통해 우측으로 이동해서 붙여넣기를 해준다.

  9. 정리.
    콘솔에서 값들을 살펴보면 Array인데 Type에는 Object 라고 되어있는 것들이 있다. 이것들을 사용해야 되는 데이터일 경우에 비슷한 방법 또는 직접 타입을 입력하는 등 수정해준다.(사용 안할거면 지워도 된다.)
    interface 를 따로 만들어 적용해도된다.
    예)

    interface ITag {
        name: string;
        symbol: string;
        rank: number;
    }
    
    interface InfoData {
        message: ITag[];
    }

    Object 들도 key: type을 입력해서 정리해준다.
    예)

    interface InfoData {
        message: ITag[];
        quotes: {
            USD: {
                ath_date: string;
                ath_price: number;
                market_cap: number;
            }
        }
    }

좋은 웹페이지 즐겨찾기