상태관리 라이브러리(jotai, zustand, redux) 등을 사용해서 구현할수 있지만 react 자체에서 제공하는 훅인
useReducer를 사용해서 관리할수도 있습니다.
import { useEffect, useReducer } from "react";
const INIT_VALUE = {
isLoading: false,
isFinish: false,
isError: false,
};
const reducer = (state, action) => {
switch (action.type) {
case "FETCH_LOADING":
return { isLoading: true, isFinish: false, isError: false };
case "FETCH_SUCCESS":
return { isLoading: false, isFinish: true, isError: false };
case "FETCH_FAIL":
return { isLoading: false, isFinish: false, isError: true };
default:
return INIT_VALUE;
}
};
function App() {
const [state, dispatch] = useReducer(reducer, INIT_VALUE);
const fetchData = () => {
//fetch Data 시도
dispatch({ type: "FETCH_LOADING" });
fetch("<https://~~>")
.then(() => {
//fetch data 성공
dispatch({ type: "FETCH_SUCCESS" });
})
.catch(() => {
//fetch data 실패
dispatch({ type: "FETCH_FAIL" });
});
};
useEffect(() => {
fetchData();
}, []);
return (
<div>
{state.isLoading && "로딩중"}
{state.isFinish && "data 불러오기 성공"}
{state.isError && "에러"}
</div>
);
}
export default App;
위 코드처럼 useReducer를 활용한다면 코드가 길어진다고 느낄수도 있지만, action에 대한 함수를 직접
정의할수 있어 보다 체계적으로 관리할수 있습니다.