한지 - 한조각 쓸모있는 지식 레터

나는 그동안 redux를 쓰며 의문을 가졌다.

사실 쓰기 매우 꺼려지기까지 했다.

global state 관리를 위해

redux를 쓰는것은 동의

다만, 그 많은 코드를 써가면서까지

비동기 요청을 하고

응답된 데이터를 state로 관리하고

해야되는걸까?

실제로 서비스를 개발하면서

gloal state로 관리해야될 데이터는

많지 않았던것같다.

때에 따라서는

global state로 관리되는 데이터들에대한

최신화 문제를 겪기도했다.

이번에 새로운 앱 MVP 제작을위해

자료조사를 하던도중

이 포스팅을 보고

"react-query" 를 도입해보았다.

react-query는 global state를

server-state와 client-state라는

두개의 개념으로 분리해서 바라본다.

나는 이에 크게 동의했다.

예를들어, 포스팅 목록을 불러왔을때는

글로벌로 관리해야한다고본다.

(사용자가 새로고침하기 전까지는)

대신, 포스팅 단일 데이터는

굳이 글로벌로 관리할 필요가 있을까?

아니라고 생각한다.

global state라는 개념을 도입하게된 배경은

[부모 -> 자식 -> 자식 ->  자식 -> 자식]

으로 props를 전달하는데 불편함이 있어서이며,

불필요한 fetch를 방지하기 위함이다.

포스팅 단일 데이터호출 및 렌더링에는

이런 문제가 있지도 않을텐대

그 많은 코드를 써가며 global state로

관리할 이유가 없다고 생각하는것이다.

이런 측면에서 접근했을때

경우에 따라 global state로 관리해야 하는 경우에만

Redux를 이용하고

일반적으로는 state 그 자체면 충분하다.

특히나, 비동기 요청을 위해

redux-sage, redux-thunk등을 쓸 이유?

는 없어진다고 생각한다.

아직까지는 대규모 프로젝트에서

관리의 용이성을 위해 redux + redux-saga를 많이 쓴다곤 하지만

react-query가 어느정도 궤도에 이르면

redux + react-query 구조로 가지는 않을까하고

조심스럽게 예상해본다.

이제 만들고있는 앱에

redux도 붙이러 가야겠다

redux-saga, redux-thunk가

너무나도 싫어서

기피하고 외면하던 게으른 개발자가

마음에 쏙드는 신문물을 발견해

작성한 포스팅입니다.

최신 자바스스크립트 개발환경은

3강체제이다

React, Vue, Angular

그중에서도 최강자 React를

운좋게도 처음시작부터 계속해서 쓰고있다.

근데 이게 너무나도 빨리

유행이 변해가다보니

따라가기가 정말 쉽지않다

자칫 쉬어가다간 바로 고인물이다.

유행을 따라가는게 좋은것만은 아니라고들 하지만

React의 변화는 단순한 유행이 아니다.

예를들어, 망치가 처음 만들어졌을떄

지금의 모습이 아니었을것이다

힘을 더 잘주기위해 손잡이가 길어졌을테고

너무 길어지니 과유불급이라 판단되어

적정 수준의 길이를 찾았을테고

쇠뭉탱이의 무게나 크기도

오랜 시간을 거쳐 발전했을것이다

React도 마찬가지인것같다

그중에서도  React의 핵심이라고 할수있는

state (상태)

에 대한 관리는 많은 이슈를 가지고있다

춘추전국시대가 끝이 보이질않는다

Context API

Redux

MobX

Context API의 진화

Recoil

...

...

각각이 가진 고유한 특성과

장단점들이 있다

내가 가진 얄팍한 지식으로 그것들을 설명하기보다는

써본 결과..

너무나도 불편하고 지저분하고

이렇게까지 해야되나? 

그냥 예전 바닐라 스크립트 시절이 더 날지도...

라는 생각과

사과하나 자르려고

사과 공장을 차리는 느낌이 자꾸만 들었다

그런와중에 내가 원하는

바로 그 라이브러리를 찾게되었다.

내가 원하는건 별게아니다

1. 글로벌 상태 관리

2. 지저분한 코드 x

3. 간편한 유지보수

이 3가지면 충분하다.

뭐 미들웨어로 어쩌니저쩌니

커스텀 훅으로 두들겨패니 뭐니

그런거는 기본기만 되어있으면

원하는 사람이 붙여쓰면 되는것 아닌가?

이런 나의 니즈를 충족시켜준

라이브러리는

react-query (+ axios)

react-query는 서버로 부터 받아온 정보를

(통칭 Server state)

정말 간단하게 글로벌 state로써 관리하고

재호출할수 있으며

로딩/실패/성공에 대한 진행상황(status)을

체크할 수 있다.

진짜, 간략한 샘플코드를 확인해본다.

// index.js
import React from 'react';
import App from './App';
import { QueryClientProvider, QueryClient } from 'react-query';
...

function main() {
  const queryClient = new QueryClient();
  
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  )
}

...

// api.ts
import axios from 'axios';
import { useQuery } from 'react-query';

const getNameAPI = async () => {
  try {
    const { data } = axios.get('...');
    return data;
  } catch(error) {
    throw error;
  }
}

export const getName = () => {
  return useQuery('test/name', getNameAPI);
}

// App.tsx
import React, { useEffect } from 'react';
import { useQueryClient } from 'react-query';
import { getName } from './api';

function App() {
  const queryClient = useQueryClient();
  const { data, status, error, isLoading } = getName();
  console.log('fetching data 확인: ', data, status, error, isLoading);
  
  useEffect(() => {
    // 5초뒤에 이전에 호출했던 API에서 받아온 server state를 확인해본다.
    setTimeout(() => {
      const data = queryClient.getQueryData('test/name');
      console.log('data: ', data);
    }, 5000);
  }, []);
  
  return (
    <div>
      ...
    </div>
  )
}

어떤가?

아주 기본적인 방식으로 axios, fetch등을

이용해 데이터를 호출한뒤

useQuery에 key와 콜백함수만 등록해주면

queryClient를 이용해서

이전에 불러왔던 데이터를 확인할 수 있다.

redux를 쓸때의 코드양과 비교하면

이루 말할수없을정도로

행복한 코드라고 할수있다.

서버로 부터 불러온 데이터를 재가공할일이

많다던지 하는 경우에는

redux를 쓰라고 한다.

그건 그때가서 볼일이다.

웹/앱을 개발한지 얼마 안됐을때

그 프로젝트가 그 단계까지 갈지말지는

모르는법이다.

가볍게 시작해서

살을 더해가자