상태관리 라이브러리 뭐가 답일까?

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

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를 쓰라고 한다.

 

그건 그때가서 볼일이다.

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

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

모르는법이다.

 

가볍게 시작해서

살을 더해가자