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

안녕하세요.

typescript 와 create-react-app 을 사용하여 공부중인데요.

커스텀 훅을 만들어서 비동기 API를 호출하여 테이블에 노출하는 기능을 구현하다가 도저히 답이 안나와서 질문드립니다.

useState와 useEffect 를 사용하여 비동기 API를 set 하는 커스텀훅을 만들었고,

axios 를 호출하는 별도의 파일을 만들어서 사용중인데

const [items, setItems] = useState<coronaApiProps[]>();

const coronaItems = getCorona();
useEffect(() => {
    setItems(coronaItems);
}, []);

이렇게 사용하니 아래처럼 에러가 나타납니다.

TS2345: Argument of type 'Promise<coronaApiProps[]>' is not assignable to parameter of type 'SetStateAction<coronaApiProps[] | undefined>'.   Type 'Promise<coronaApiProps[]>' is not assignable to type '(prevState: coronaApiProps[] | undefined) => coronaApiProps[] | undefined'.     Type 'Promise<coronaApiProps[]>' provides no match for the signature '(prevState: coronaApiProps[] | undefined): coronaApiProps[] | undefined'.

coronaApiProps 는 제가 만든 인터페이스입니다.

해당 에러가 나타나서 useEffect 안에

const [items, setItems] = useState<coronaApiProps[]>();

// axios 로 api  호출
const coronaItems = getCorona();

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

이렇게 사용하니 커스텀훅을 두번 호출합니다.

그래서 axios 파일을 분리하지 않고 커스텀훅 안에 사용하면 커스텀훅을 한번만 사용합니다.

 

api를 호출하는 axios 파일을 분리하고 사용할 수 없나요?

필요하면 github 추가해드릴 수 있습니다.