코딩앙마 React공부(useEffect, fetch()로 API 호출)

이제 API도 있으니 더미데이터로 작업했던 부분들을 하나씩 바꿔주겠습니다.

 

DayList.js에서 dummy를 지우고 days라는 state 생성

처음에는 빈배열을 만들고 API에서 리스트를 가져와서 바꿔주는 방식으로 진행 (데이터가 바뀌면 그대로 렌더링)

 

 

이제 API호출 전에 useEffect에 대해서 알아보자

useEffect란? 어떠한 상태 값이 바뀌었을때 동작하는 함수를 작성할 수 있다.

 

이제 클릭이벤트를 만들고 클릭할때마다 state를 바꿔보자

DayList.js

결과를 보면

count가 증가하고

 

 

근데 이렇게만 해주면 매번 변경이 일어날때마다 불필요하게 함수가 호출 될수 있다.

 

예를 들어, 버튼을 하나 더 만들고 다른상태값이 day를 연결시켜보자

 

결과를 보면

 

추가가 되지만 Count Chage는 계속 찍힌다. Count는 변하지 않았는데 계속 실행되고 있다는 것이다.

 

이럴땐 useEffect의 두번째 매개변수로 배열을 전달한다.

 

 

이렇게 하면 count가 변경되었을때만 실행이 된다. (이것을 의존성 배열이라고 한다.)

 

useEffect를 여기서 사용하는 목적은 API호출인데 렌더링이 완료되고 최초의 API 한번만 호출해주면 되기 때문에, 의존성 배열에 빈배열을 입력한다.

 

이제 다 지우고 진짜 API를 호출해보자

 

 

API 비동기호출을 위해서 fetch()를 사용한다. 그다음 API경로를 적어주고 이렇게하면 Promise가 반환된다.

그러면 then()을 이용해서 res.json()으로 return해준다. 

여기서 res는 http응답이고 실제 json이 아니다 그래서 json 메서드를 사용해주는 것이다.

이렇게 하면 json으로 변환되고 promise를 반환합니다.

 

그러면 또 then()을 이용해서 data를 받아주고 setDays를 해줄것이다.

그 결과,

Day1,2,3이 다 뜨는것을 확인할 수 있다.

 

네트워크 탭을 보면 호출이 잘된것을 볼수 있다.

 

이제 dummy로 사용하던 부분을 다 교체해보겠습니다.

Day.js

Day.js

 

 

이제 코드를 보면 List가져오는 부분이 Day를 가져오는 부분과 상당히 흡사하다.

 

DayList.js

Day.js

 

이렇게 동일한 로직은 사용자가 직접 훅을 만들어서 사용할 수 있다.(이를 Custom Hooks이라고 한다.)