Q. 글로벌 상태 관리 라이브러리(Redux)를 사용하지 않고, react-query를 사용하면서 가질 수 있는 이점이 어떤 것들이 있을까요?
01 ClientState와 ServerState 에 있어서, ServerState를 선택한 이유
ClientState 장점
- 리덕스를 통해서 비동기통신으로 데이터를 가져와서 Clientstate(configstore)에 저장하여 사용함, 가져온 데이터를 작업하는 중간 단계에서 수정과 변화 없이 활용할 수 있다는 점이다.
- 관리변경의 주체가 클라이언트에게 있다는 점에서, 개발자의 요구에 따라서 명령적으로 데이터를 가공할 수 있다는 장점을 가진다.
ClientState 단점 :
- 브라우저에 저장되는 데이터가 외부에 저장되지 않으면, 데이터를 손실할 수 있기 때문으로, 이러한 부분에서 중요 데이터가 손실되면 보안상의 문제도 야기할 수 있게 된다.
- 리덕스를 기준으로 설명할 때, 각각의 상황에 따른 코드가 각각의 부분에서 기록함됨으로, 데이터의 상태변화를 추적하기 어려운 이슈가 발생된다.
ServerState 장점 :
- 데이터의 수정,삭제의 변화를 클라이언트가 아니라 서버에서 즉시적으로 관할한다는 점에, 데이터의 유동성을 빠르게 패칭하여 관리할 수 있다는 장점을 가진다.
- 클라이언트에서 데이터에 대한 관할이 없기에, 코드가 가벼워지는 이점이 있지만, 이 역시 리덕스의 비동기처리를 사용할 때는 boilerplate에 충족해야 한다는 점에서 여전히 복잡함이 요구된다.
- 반면에 React-query는 비동기처리를 통한 ServetState에 최적화함을 동기로하여 출범한 라이브러리이기 때문에, ServetState의 장점을 극대화 한 프로젝트를 구성할 수 있다.
ServerState 단점 :
서버 의존성이 높이 때문에, 서버가 단절되었을 때 화면에 해당 내용을 전달하지 못하는 점이 있으며, 비동기통신을 통해서 데이터를 받아온 다는 점에서 지연되는 시간 만큼 UI 생성이 늦어진다는 단점이 있다.
결론적으로, 저희 MUSE-O는 아트그램 데이터와 전시데이터를 활용함에 있어서 각각의 개별 페이지 뿐 아니라 해당 데이터를 메인페이지와 마이페이지에도 연동하여 사용하고, 각각의 부분에서 좋아요를 비롯한 찜하기 기능을 동시적으로 활용한다는 점에서, 데이터의 유동성을 제어할 필요가 요구되었고, 이러한 부분을 관리하고자 글로벌 상태 관리가 아니라, ServerState를 통하여 즉시적으로 데이터가 유지 및 관리되도록 방향을 잡게 되었습니다.
02) ServerState에서의 Redux와 react-query #코드가#대혼동멀티버스
- 리덕스의 경우 서버에서 받아온 state를 글로벌 상태 관리에 주입(initialState)한 후에, 해당 데이터를 각각의 컴포넌트에서 활용, 이때 리듀서 함수를 통해서 복잡한 구현을 했어야 할 수 밖에 없었음, 이는 Redux가 비동기처리에 최적화된 라이브러리가 아니기 때문에, 사용자가 이를 알아서 개발해야 하는 문제를 야기함, 이러한 부분 해결하고자 튤킷(ThunkAPI)를 활용했지만, 이 역시도 엄청난 양의 코드를 요구함, 또한 하나의 통신을 위해서 복합한 boilerplate를 각각의 통신마다 기록해야 하는 불편함이 요구 됨
- Redux 미들웨어 Thunk기준으로 Slice.js라는 Store에서 API 통신과 상태관리를 위한 코드(boilerplate(액션 생성자,리듀서,configStore 설정, ExtraReducer) , Slice)가 다같이 담겨있어,
본래 상태관리를 위한 store임에도 불구하고 API 통신을 위한 곳인지 상태관리를 위한 곳인지 목적이 불분명했다. - Redux를 기준으로 할 때, 에러처리를 제어함에 있어서 복잡함이 요구됨
- Redux 미들웨어 Thunk기준으로 Slice.js라는 Store에서 API 통신과 상태관리를 위한 코드(boilerplate(액션 생성자,리듀서,configStore 설정, ExtraReducer) , Slice)가 다같이 담겨있어,
const todosSlice = createSlice({
name:"todosT",
initialState :
{
todos: [],
isLoading: false,
isError: false,
error: null
},
reducers:{},
extraReducers:{
// #01-01 axios.GET // isLoading
[__getTodos.pending] : (state, actions)=> {
state.isLoading = true;
state.isError = false;
},
// #01-02 axios.GET // fulfilled
[__getTodos.fulfilled] : (state, actions) =>{
state.isLoading = false;
state.isError = false;
state.todos = actions.payload
},
// #01-03 axios.GET // isError
[__getTodos.rejected] : (state, actions)=> {
state.isLoading = false;
state.isError = true
}
},
})03) ServerState 관리를 위한 react-query 가지는 이점
첫째, 코드의 간결성: Redux에 비교할 때, React Query는 데이터 관리와 관련된 로직을 간결하게 유지할 수 있기 때문에, 코드의 양이 줄어듭니다.
둘째, 주기적인 데이터 업데이트 및 오류처리의 간편성: React-Query는 서버로의 요청 중에 발생하는 오류를 처리하고 재시도 로직을 쉽게 구현할 수 있는 기능을 제공한다. 예를 들어, 네트워크 오류, 인증 오류, 서버 에러 등의 경우에 대응하여 오류 처리를 할 수 있고, 재시도 로직을 통해 오류가 발생했을 때 자동으로 요청을 다시 시도할 수 있으며, 주기적인 데어터 업데이트가 이뤄진다는 점이 장점 가운데 하나이다,?(기본설정으로 최소 5분 간격으로 데이터가 백그라운드에서 자동으로 업데이트)
onSuccess: ({artgramId, commentParent}) => {
queryClient.invalidateQueries(keys.GET_ARTGRAM);
console.log("성공시의 메시지");
},
onError: e => {
console.log("실패시의 메시지", e.message);
}
// 현재 프로젝트에서 사용 중인 config
- onSuccess, onError, onSettled: 성공/실패/완료 시 실행되는 함수
- retry: query 동작 실패 시, 자동으로 retry할지 결정하는 옵션
- retryDelay: retry 시간을 ms 단위로 제어할 수 있는 옵션
- refetchOnWindowFocus: 다른 프로그램으로 마우스 커서를 다녀왔을 때 자동으로 데이터가 패칭되는 설정
// 현재 프로젝트에서 사용하지는 않지만, 활용할 수 있는 config 목록
- cacheTime: 메모리에 얼마만큼 있을 건지 설정
- staleTime: 초기설정 5분으로 설정된 데이터 자동 업데이트로 시간을 유동적으로 늘리거나 줄일 수는 옵션
- enabled: 동기적으로 실행할지 유무
- suspense: 서스펜스를 사용할지 유무
- select: 성공 시 가져온 data를 가공해주는 함수
- keepPreviousData: 새롭게 fetching 시 이전 데이터 유지 여부
- refetchInterval: 주기적으로 refetch할지 결정하는 옵션셋째, 다양한 데이터 패칭을 지원 : useQuery(), useMutation(), useInfiniteQuery()
넷째, 데이터 캐싱
- 브라우저가 새로고침 되거나, 페이지가 이동되었다가 돌아왔을 때 새로운 요청을 가하는 것이 아니라, 기존의 캐시에 있는 데이터를 캐싱하여 사용함으로, 불필요한 네트워트 트래픽을 줄일 수 있는 장점이 있다.
- invalidateQueries(), React-query의 장점 가운데 하나로 기능으로 queryKey를 통하여 기존의 데이터에 쉽고 빠르게 접근할 수 있으며, 변경된 데이터에 대해서 invalidateQueries()를 선언함으로 업데이트된 데이터를 빠르게 적용시킬 수 있는 강점이 있다.
결론적으로, React Query는 직관적이며 유동적인 ServerState를 기반으로 한데이터 관리를 위한 상태 관리를 제공하므로 Redux와 같은 글로벌 상태 관리 라이브러리를 사용하지 않더라도 데이터를 관리 수정할 수 있다.
