[React Hooks 총정리] Custom Hooks2

실제 코드 구현 2 : useFetch Custom Hook 만들기

• 네트워크상에서 데이터를 가져올때, JavaScript의 fetch API를 많이 사용함
• fetch API를 통해 네트워크상에서 데이터를 가져오는 기능을 해주는 커스텀 훅인 useFetch 만들어보기

UseFetchCustomHook

• 10명의 유저 데이터 console에 출력
• 만약 뒤에 /users 대신에 /todos 또는 /posts 등을 붙여주면 다른 데이터를 가져옴

UseFetchCustomHook 코드 수정

- 만약 이런 기능을 여러개의 컴포넌트에서 사용해야한다면 복사/붙여넣기 작업을 해야함
-> useFetch Hook을 만들어서 사용해보자!

---

UseFetchCustomHook

useFetch

실제 구현 화면

• 아까와 같은 화면 출력됨

• useFetch Custon Hook은 첫 번째 인자로 받은 baseUrl을 사용해서
  두 번째 인자로 받은 타입의 데이터를 네트워크 상에서 가져오는 일을 함

• useFetch에서 받아온 데이터와 FetchUrl을 통해서 화면에 데이터를 출력함

응용