Fetch를 통해서 외부 API를 사용하여 그 값을 state에 저장 할 수 있다 – jsx때랑 사용방법은 동일함
대신 tsx이므로 어제 배웠던 useState에 interface를 넣어서 쓰는 방법을 써야 한다
const []=useState<인터페이스이름>();
배열 안에 객체형태로 넣을 경우 const []=useState<[인터페이스이름]>();
복습하는 차원에서 적는 fetch로 받아올 때 쓰는 비동기형식
const getData=async()=>{
const promise=await fetch(API주소));
const response=await promise.json();
여기까지가 기본 형태로 response로 어떤 값이 필요한지 확인하고 그것을 불러내거나 useState에 저장해서 쓰면 된다. 위 함수를 useEffect로 실행하면 초기에 받아와서 실행해줘도 되고 추가로 특정 값이 바뀔때마다 실행하는 경우도 있다.
useEffect(실행함 함수,[함수를 실행할 조건부, 비어있으면 초기 마운트시에만])
즉, 첫번째 비동기는 API값을 받아오기 위한 비동기이고, 두번째 비동기는 API 값을 받아와 저장되어 있는 값이 있으면 그 때 동작을 할 비동기이다. 만약 비동기 없이 할 경우 promise가 아무런 값이 없어서 .json()을 실행하지 못하고 그러면 에러가 발생한다