이번에는 이전에 구현했던 User 컴포넌트에서 useState 대신에 useReducer 를 사용해서 구현을 해보도록 하겠습니다.
useReducer 를 사용하여 LOADING, SUCCESS, ERROR 액션에 따라 다르게 처리를 해봅시다.
importReact,{useEffect,useReducer}from'react';importaxiosfrom'axios';functionreducer(state,action){switch(action.type){case'LOADING':
return{loading: true,data: null,error: null};case'SUCCESS':
return{loading: false,data: action.data,error: null};case'ERROR':
return{loading: false,data: null,error: action.error};default:
thrownewError(`Unhandled action type: ${action.type}`);}}functionUsers(){const[state,dispatch]=useReducer(reducer,{loading: false,data: null,error: null});constfetchUsers=async()=>{dispatch({type: 'LOADING'});try{constresponse=awaitaxios.get('https://jsonplaceholder.typicode.com/users');dispatch({type: 'SUCCESS',data: response.data});}catch(e){dispatch({type: 'ERROR',error: e});}};useEffect(()=>{fetchUsers();},[]);const{ loading,data: users, error }=state;// state.data 를 users 키워드로 조회if(loading)return<div>로딩중..</div>;if(error)return<div>에러가 발생했습니다</div>;if(!users)returnnull;return(<><ul>{users.map(user=>(<likey={user.id}>{user.username} ({user.name})
</li>))}</ul><buttononClick={fetchUsers}>다시 불러오기</button></>);}exportdefaultUsers;
useReducer 로 구현했을 때의 장점은 useState 의 setState 함수를 여러번 사용하지 않아도 된다는점과, 리듀서로 로직을 분리했으니 다른곳에서도 쉽게 재사용을 할 수 있다는 점 입니다.
물론, 취향에 따라 useState 로 구현을 해도 무방합니다.
다음 섹션에서는 이번에 만든 reducer 를 기반으로, 커스텀 Hook 을 만들어보겠습니다.