안녕하세요. 강의 보고 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();
회원가입을 커스텀훅으로 만드신 강의 부분에서 질문입니다. 어떤 분이 useCallback을 props로 자식 컴포넌트에게 넘겨줄 때만 사용해라 라는 말을 들은 적이 있어서 언제 useCallback을 써야할 지에 대해 감이 안옵니다ㅠㅠ const handler = useCallback(({ target }) => { setValue(target.value); }, []); 제가 생각하기에 여기서 useCallback을 사용하신 이유는 useInput()을 호출할 때마다 함수가 생성될테니까 useCallback을 사용했다고 생각했습니다. 이게 맞을까요? 그리고 현업에서는 보통 useCallback을 언제 사용하는지 궁금합니다.
import React , { useState , useCallback } from "react" ; //custom Hook으로 만들기 export default function ( initialValue = null ) { console . log ( "몇번 렌더링?" ); const [ Value , setValue ] = useState ( initialValue ); const handler = useCallback(( e ) => { setValue ( e . target . value ); }, []); return [ Value , handler ]; } 제가 바르게 이해하고 있다면, useCallback은 필요없지 않은가요? useCallback는 함수를 재정의 하지 않고 , 1. 콜백함수가 호출되면서 2.depth부분이 바뀌었을때의 두 조건이 충족해야 다시 재정의 한다고 알고 있습니다. 위 커스텀훅에서는 [] depth가 비어져있기에 첫 마운트 했을때만 작동하고 어떠한 움직임도 없어야 하기에 함수 내 setValue의 기능을 수행 하지 않는다는 뜻인데, console.log('몇번 렌더링');으로 찍어보니깐 다른 곳에서 useInput 을 사용할때마다 커스텀훅 페이지를 리렌더링 하기때문에 애초에 useCallback이 무의미한 것이 아닌가요? 애초에 다른 모듈에 있기에 useCallback은 의미가 없는게 아닌가 궁금합니다
