전 강의에서 설명했던 것처럼
커스텀 훅을 만드는 이유는
더 효율적인 컴포넌트를 만들기 위함입니다
커스텀 훅에 상태값이나 로직을
의탁하는 것과 같은 원리입니다
하지만 또 다른 이유는
여러 컴포넌트가 외부로 의탁 가능한
비슷한 원리를 가지고 있는 경우
같은 훅을 공유해서 쓸 수 있기 때문입니다
예를 들면, 여기 있는
AvailablePlaces 컴포넌트에도
데이터를 추출하고
로딩과 오류 상태를 관리하고
데이터를 저장할 수 있게 해주는 코드가 있습니다
그리고 이 작업을 useEffect와 useState 함수로 수행합니다
즉, 따지고 보면
이전의 useFetch와
매우 비슷한 원리입니다
한 가지 큰 차이점이 있다면
여기서는 얻고자 하는 데이터를 가지고
사용자의 위치와 결합해서
즉 거리에 따라 장소 데이터를 불러오고 있습니다
하지만 이 문제는 나중에 걱정하도록 합시다
그 외의 원리는 상당히 비슷하기 때문입니다
여기에서도 빈 곳에서
useFetch를 가져올 수 있습니다
hooks 폴더에 있는
useFetch.js 파일에서 불러옵시다
그러면 이 컴포넌트에서 useFetch를 호출할 수 있습니다
지난 강의에서 배웠던 것처럼
useFetch에는 fetch 함수와
input용 초기값이 필요합니다
AvailablePlaces 컴포넌트에서 초기값은 배열이고
fetch 함수는
이 fetchAvailablePlaces 함수입니다
fetchAvailablePlaces를 이 훅에 입력하고
이 빈 배열을 초기값으로 설정합시다
결과적으로 우리는 객체를 얻을 수 있습니다
이 객체로부터 우리는 ifFetching, error, fetchedData를 추출할 수 있고
필요한 경우
state updating 함수에서 setFetchedData도 추출할 수 있습니다
그렇게 해서 기존의 상태값을
관리하던 것은 지우고
fetchedData의 이름을 availablePlaces로 바꾸겠습니다
여기서 상태값으로 사용했던 이름이 availablePlaces기 때문입니다
같은 이유로 setFetchedData의 이름은
setAvailableplaces로 바꾸겠습니다
이 useEffect 호출도 없앨 수 있습니다
하지만 여기서는 이 코드를 버리지 않고
거리를 계산하는 수식 근처에 두는 게 좋을 것 같습니다
이 부분을 잘라서 잠깐 여기에 두겠습니다
나중에 쓰도록 하겠습니다
어찌 됐든, 이렇게 useEffect를 제거해 봤습니다
이로써 훨씬 효율적인 컴포넌트가 되었습니다
이 컴포넌트도 정상 작동할 것입니다
이 코드를 주석 처리하여 삭제하고
이 컴포넌트의 연결이 끊기지 않도록 하겠습니다
이 상태로 저장하고
새로고침을 누르면
선택 가능한 장소를 정상적으로 불러왔습니다
여기에도 오류가 없습니다
데이터를 불러온 건
커스텀 훅을 사용한 덕분입니다
전에도 설명했던 것처럼
이 컴포넌트에서 useFetch를 사용하는 것은
앱 컴포넌트에서 useFetch를 사용하는 것에 영향을 미치지 않습니다
앱 컴포넌트에서 상태값을 업데이트해 봅시다
이렇게 새로운 장소를 추가하더라도
선택 가능한 장소 목록에는 변화가 없습니다
이미 언급했듯이
상태값들은 독립적입니다
그리고 이 useFetch 훅에서 복제된 독립적인 값들입니다
따라서 모두 정상적으로 작동하는 것입니다
다음 시간에는 정렬을 위한 로직 작업을 해 보겠습니다