해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.
이전 강의에서 useState, useEffect 를 사용해봤는데, 자신만의 커스텀 훅스를 만들 수 있다.
커스텀 훅스를 만들 때, 파일명이 use… 로 시작하면 된다.
useFetch.js
useFetch.js 를 hooks 폴더에 만들고 이전에 작성했던 Day.js 의 useEffect() 함수를 복사 붙여넣기한다.
이 코드에서 바뀌는 부분은 fetch 의 API 주소다.
url 을 받아서 fetch 에 인자로 넣는다. 의존성 배열로 url 을 넣는다.
useState 로 data 를 받는다.
결국 우리가 필요한 것은 data 이니까, data 를 리턴한다.
data 라는 상태값이 있고, API 주소를 넘겨받아서 fetch 하고, 데이터를 setData 해준다. 그다음 data 를 리턴해준다.
fetch 하는 부분을 useFetch 를 사용해서 구현해보자.
useFetch 내부에 url 을 넣는다.
DayList 가 랜더링되고, useEffect 함수 부분이 실행된다.
url 은 useFetch 내부에 있던 url 을 넘겨받는다.
url 에 대해 응답받은 값을 data 에 넣어주고, 리턴해준다.
useFetch 을 days 라고 하자.
API 로 data 를 받아오는 부분은 이 한줄로 가능해졌다.
Day.js 에서도 이 부분 한줄이면, useEffect 부분이 필요없다.
words 한줄로 대체가 가능해진다.
비슷한 작업들을 하나의 커스텀 훅으로 만들어서, 여기저기서 쓸 수 있다.
반복해서 작업할 필요도 없어지고, 코드도 훨씬 간결해진다.
수정사항이 발생한다면 만들어놓은 커스텀 훅, userFetch 한 곳만 수정해주면 된다.
