Hook (fetchData)

[yjkwon07]

How to fetch data with React Hooks?

• 참고

const useDataApi = (initialUrl, initialData) => {
  const [url, setUrl] = useState(initialUrl);
 
  const [state, dispatch] = useReducer(dataFetchReducer, {
    isLoading: false,
    isError: false,
    data: initialData,
  });
 
  useEffect(() => {
    let didCancel = false;
 
    const fetchData = async () => {
      dispatch({ type: 'FETCH_INIT' });
 
      try {
        const result = await axios(url);
 
        if (!didCancel) {
          dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
        }
      } catch (error) {
        if (!didCancel) {
          dispatch({ type: 'FETCH_FAILURE' });
        }
      }
    };
 
    fetchData();
 
    return () => {
      didCancel = true;
    };
  }, [url]);
 
  return [state, setUrl];
};

• loading -> fetchData load 할 때 상태 표시
• error -> 에러가 생길때 대처
• race -> didCancel로 레이싱으로 일관성을 유지
• fetchData에서 사용되는 data로 useEffect의 함수를 변하는 의존관계가 아니므로 useReducer로 묶어서 처리