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

Question

안녕하세요. 강의 보고 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 (

createDate: {item.createDt}

); } 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();

이재승 · Answer

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

김준희 · Answer

자답입니다. 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; }