react typescript 환경에서 커스텀 훅을 만들어서 사용... - 인프런

실전 리액트 프로그래밍

react typescript 환경에서 커스텀 훅을 만들어서 사용하려고 하는데 This expression is not callable 에러가 나타납니다.

작성

1.1K

안녕하세요.

강의 보고 useState, useEffect 를 활용해보고 싶어서 공공데이터 포털에서 제공해주는 openapi 로 커스텀 훅을 만들어 봤습니다.

typescript + webstorm 환경에서 작업중인데요

TS2349: This expression is not callable.   No constituent of type 'void | coronaApiPros[]' is callable.

import useDailyCorona: void | coronaApiPros[]

App.tsx 6번 라인의 useDailyCorona(); 코드에서 이런 에러가 나타납니다.

구글링을 계속 해보는데 원하는 답을 찾을수가 없어서 질문드립니다..ㅠㅠ

App.tsx 파일과 커스텀훅 파일인 useDailCorona.tsx 파일을 첨부합니다.

----------- App.tsx ---------

import './App.css';
import React from 'react';
import useDailyCorona from './hooks/useDailyCorona';

function App() {
  const items = useDailyCorona();

  return (
    <ul>
      {items?.map((item, index) => (
        <li key={index}>createDate: {item.createDt}</li>
      ))}
    </ul>
  );
}

export default App;

----------- useDailyCorona.tsx -------------

import {useEffect, useState} from "react";
import {getCorona} from "../corona";

interface coronaApiPros {
  createDt: string // 조회 시작 시간
  deathCnt: number // 사망자 수
  defCnt: number // 확진자 수
  gubun: string // 시도명(한글)
  gubunCn: string // 시도명(중국어)
  gubunEn: string // 시도명(영어)
  incDec: number // 전일대비 증감 수
  isolClearCnt: number // 격리 해제 수
  isolIngCnt: number // 격리중 환자 수
  localOccCnt: number // 지역 발생 수
  overFlowCnt: number // 해외 유입 수
  qurRate: string // 10만명당 발생률
  seq: number // 게시글번호 (국내 시도별 발생 현황 고유값)
  stdDay: string // 기준 일 시
  updateDt: string // 수정 일시 분초
}

function useDailyCorona():void|coronaApiPros[] {
  const [items, setItems] = useState();
  const coronaItems = getCorona();

  useEffect(() => {
    coronaItems.then(response => {
      setItems(response);
    });
  }, []);

  return items;
}

export default useDailyCorona();

typescript react redux 커스텀훅

답변 2

이재승

지식공유자

안녕하세요
따로 쓰는 것과는 상관 없어보이구요, 마지막에 호출을 하셔서 그렇습니다
아래처럼 하시면 될거에요
export default useDailyCorona;

김준희

질문자

답변 감사합니다!!

김준희

질문자

자답입니다.

function useDailyCorona 를 export default function useDailyCorona 로 수정하니 에러가 해결됐습니다.
왜 따로 쓰면 에러가 나타날까요?

useDailyCorona.tsx 파일을 수정했습니다.

import {useEffect, useState} from "react";
import {getCorona} from "../corona";

interface coronaApiPros {
  createDt: string // 조회 시작 시간
  deathCnt: number // 사망자 수
  defCnt: number // 확진자 수
  gubun: string // 시도명(한글)
  gubunCn: string // 시도명(중국어)
  gubunEn: string // 시도명(영어)
  incDec: number // 전일대비 증감 수
  isolClearCnt: number // 격리 해제 수
  isolIngCnt: number // 격리중 환자 수
  localOccCnt: number // 지역 발생 수
  overFlowCnt: number // 해외 유입 수
  qurRate: string // 10만명당 발생률
  seq: number // 게시글번호 (국내 시도별 발생 현황 고유값)
  stdDay: string // 기준 일 시
  updateDt: string // 수정 일시 분초
}

export default function useDailyCorona(): coronaApiPros[]|void {
  const [items, setItems] = useState<coronaApiPros[]>();
  const coronaItems = getCorona();

  useEffect(() => {
    coronaItems.then(response => {
      setItems(response);
    });
  }, []);

  return items;
}

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

react typescript 환경에서 커스텀 훅을 만들어서 사용하려고 하는데 This expression is not callable 에러가 나타납니다.