Custom Hook
Custom Hook이 api호출과 직접적으로 관련이 있는 것은 아니지만 우리가 데이터의 호출을 조금 더 효율적으로 하는 방법들을 이해하기 위해서는 먼저 선행적으로 Custom Hook에 대한 이해를 하고 넘어가는 것이 좋습니다.
현재 자주 사용하고 있는 react hook 함수들 중 useState, useEffect가 있습니다. useState는 함수컴포넌트에서 상태를 다루기 위한 목적으로 사용하며,useEffect 함수 컴포넌트의 생명주기 메소드들과 관련된 기능들을 다루기위한 목적으로 사용하는 hook입니다.
그런데 이런 hook함수들도 재사용 가능한 함수의 일종입니다.
우리는 반복적인 로직을 함수로 만들어 이용을 합니다. 마찬가지로 개발을 하다가 여러개의 컴포넌트에서 공통적으로 해야하는 일이 있을 때, 또한 그 해야하는 일이 useState, useEffect와 같이 컴포넌트 수준에서 반복적으로 해야하는 일인 경우가 있습니다.
이런 경우 customhook을 만들어 컴포넌트 로직을 함수로 뽑아내어 재사용을 할 수 있습니다.
API호출 시 다뤄야하는 것들
현업에서 API호출을 할 때는 다뤄야할 것이 정말 많습니다. (ex) 로딩처리, 에러 핸들링 등..)
로딩처리
const [loadig, setLoding] = useState(false)
useEffet(()=>{
setLoading(true)
//api호출
setLoading(false) //api호출이 완료되면
},[])컴포넌트 안에서 api호출은 정말 자주 사용될 것입니다. 그렇기 때문에 위의 로딩처리 코드 역시 반복해서 사용되게 될 것입니다.
이렇게 반복해서 사용되는 로직의 경우 우리만의 custom hook을 만들어 코드 사용을 줄일 수 있습니다.
단 custom hook을 만들 때 다른 hook은 custom hook의 위로 놓여야 하며, custum hook은 조건부 함수가 아니여야합니다. 또한 이름은 반드시 use로 시작을 해야합니다.
useFetch
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
setLoading('loading...')
setData(null);
setError(null);
const source = axios.CancelToken.source();
axios.get(url, { cancelToken: source.token })
.then(res => {
setLoading(false);
//checking for multiple responses for more flexibility
//with the url we send in.
res.data.content && setData(res.data.content);
res.content && setData(res.content);
})
.catch(err => {
setLoading(false)
setError('An error occurred. Awkward..')
})
return () => {
source.cancel();
}
}, [url])
return { data, loading, error }
export default useFetch;현업에서는 사실 useFetch는 잘 이용되지 않습니다.
왜냐하면 대부분의 useFetch커스텀 푹은 useEffetc훅 안에서 url이 변경되었을 때만 처리를 하는 방식으로 되어 있습니다.
그런데 규모가 조금 큰 프로젝트를 하다보면 컴포넌트가 마운트가 된 직후에 api호출을 해야하는 경우도 있지만 user의 액션에 따라서 비동기 호출을 해야하는 api처리가 더 많습니다(회원가입, 로그인 등)
그래서 그런 기본적인 api호출에 대한 베이스코드를 useFetch에 넣어두기 보다는 일반 함수에 넣는 경우가 더 많습니다.
