[사이드 프로젝트] fillsa 개발일지 008. 리액트 처음 세팅하기 (2) Axios, React Query, Zustand

1. Axios 설정

AJAX(Asynchronous Javascript And XML)을 구현하려면 Javascript 내장객체인 XMLRequest를 사용하거나 다른 HTTP Client를 사용해야한다. HTTP Client 라이브러리에는 Fetch API, Axios 등이 있고, 이 프로젝트에서는 Axios를 사용한다. 

 

1) axios 설치

npm install axios

 

 

2) axios 모듈 만들기

src > apis 디렉토리 하위에 'customTestAxios.js'라는 파일 생성하기

import axios from 'axios';

const customTestAxios = axios.create({
    baseURL: 'https://koreanjson.com/',
});

export { customTestAxios };

 

 

axios 모듈을 사용해보는 예제는 아래에 React Query에서 함께 다룬다.

 

 

 

 

---

2. 상태 관리 설정하기

상태 관리 라이브러리 선택하기

상태(state)의 종류

• Local State : 리액트 컴포넌트 안에서만 사용되는 state
• Global State : 프로젝트 어디에서나 접근할 수 있는 state
• Server State : 서버로부터 받아오는 state

 

서버 상태 관리 라이브러리

서버 상태 관리란 서버의 데이터를 최신으로 관리하는 것을 의미한다.

 

data fetching 라이브러리를 사용할 경우 아래와 같은 장점이 있다.

• 선언적으로 프로그래밍 할 수 있음 (장황하지 않은 코드)
• 동일한 API 요청이 여러 번 호출될 경우 한 번만 실행
• 데이터가 dirty 해진 경우 적절한 시점에 알아서 업데이트
• Global State와 Server State의 관심사를 분리

쉽게 데이터를 가져올 수 있고 동일한 요청을 하는 여러 컴포넌트가 동시에 렌더링 되더라도 한 번만 요청한다. 또한, 백그라운드에서 서버에 주기적으로 polling을 하면서 데이터가 유효한지 검사하고, 유효하지 않으면 업데이트하여 데이터를 동기화한다.

 

data fetching 라이브러리에는 SWR와 React Query 등이 있는데, 과거에 사용해본 React Query를 사용하기로 하였다.

 

 

 

전역 상태 관리 라이브러리

최근 1년간 리액트 상태 관리 라이브러리별 npm 다운로드 숫자 통계 <출처: npm trends>

 

몇 년 전까지만 해도 리덕스(redux, react-redux)가 압도적으로 많이 쓰였다. 그 이후로는 몹엑스(MobX), 리코일(Recoil)도 많이 쓰였다가, 다시 2023년 기준으로는 주스탠드(Zustand) 사용자가 빠르게 늘고 있다. 이외 조타이(Jotai), 발티오(Valtio) 등 다양한 시도를 하는 라이브러리도 등장했다.

 

예전에 Redux를 사용했었는데, 전역 변수를 사용하려고 할 때마다 추가해야하는 코드 양이 좀 쓸데없이 많고 불편했던 기억이 있었다. 찾아보니 주스탠드가 다른 라이브러리에 비해 이슈가 제일 적고 레퍼런스가 많은 편이라고 하여 이번 프로젝트에서는 주스탠드를 도입해보려 한다. 주스탠드의 단덤은 탑다운 방식이라 성능은 다소 안좋은 편이라고 한다.

 

 

 

최종 선택

React Query + Zustand 조합으로 진행하기로 하였다.

 

참고자료

https://yozm.wishket.com/magazine/detail/2233/

https://www.youtube.com/watch?v=nkXIpGjVxWU

 

 

 

React Query 시작하기

1) React Query 설치하기

npm install @tanstack/react-query
npm install @tanstack/react-query-devtools

 

 

2) main.jsx파일에 수정하기

(webpack의 경우 index.js 파일)

// import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
import { BrowserRouter } from 'react-router-dom';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';	# 추가
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';		# 추가

const queryClient = new QueryClient();	# 추가

ReactDOM.createRoot(document.getElementById('root')).render(
    <QueryClientProvider client={queryClient}>		# 변경
        <ReactQueryDevtools initialIsOpen={true} />	# 추가
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </QueryClientProvider>
);

 

 

 

 

3) useQuery 사용해보기

useQuery는 서버로부터 데이터 조회 시 사용한다.

 

 

필수 옵션

• queryKey : Query를 유니크하게 지칭할 배열
• queryFn : Promise를 리턴하는 함수

 

 

간단한 예제를 통해 useQuery 사용법을 익혀보자.

아직 구축해 둔 서버가 없으므로, https://koreanjson.com/ 에서 제공하는 테스트용 api를 사용한다.

useQuery를 이용해서 id 값이 1인 게시글의 title과 content를 받아와 view에 뿌려주는 예제이다.

import { useQuery } from '@tanstack/react-query';
import { customTestAxios } from '../apis/customTestAxios';

export default function TestPage() {
    const { isLoading, error, data, isFetching } = useQuery({
        queryKey: ['getPost'],
        queryFn: async () => {
            const response = await customTestAxios.get('posts/1');
            return response.data;
        },
    });

    return (
        <>
            <h3>React Query - useQuery 테스트</h3>
            <h5>{!isLoading && data.title}</h5>
            <div>{!isLoading && data.content}</div>
        </>
    );
}

※ axios 모듈을 따로 설정해주지 않았다면, 아래 코드로 테스트 해보기

import { useQuery } from '@tanstack/react-query';

export default function TestPage() {
    const { isLoading, error, data, isFetching } = useQuery({
        queryKey: ['board'],
        queryFn: async () => {
            const response = await fetch('https://koreanjson.com/posts/1');
            const data = await response.json();
            return data;
        },
    });

    return (
        <>
            <h3>React Query - useQuery 테스트</h3>
            <h5>{!isLoading && data.title}</h5>	# 데이터 로딩이 완료 된 후 view에 뿌려줘야한다.
            <div>{!isLoading && data.content}</div>
        </>
    );
}

 

데이터가 잘 가져와진다!

 

 

 

4) useMutation 사용해보기

useMutation은 서버로 데이터 생성 / 수정 / 삭제 시 사용한다.

 

useMutation에서 쓸 수 있는 추가 기능들

• update 후, get 요청을 통한 최신화를 할 수 있다. invalidateQueries를 이용하여 구현한다.
• 요청이 처리되기 전, 요청이 무조건 성공한다고 가정하고 UI에 먼저 반영해줄 수 있다(optimistic update). setQueryData를 이용하여 구현한다.

 

필수 옵션

• mutationFn :  Promise를 리턴하는 함수

 

아까와 마찬가지로 https://koreanjson.com/ 이 사이트에서 제공하는 테스트용 api를 이용하여 useMutation 사용법을 익혀보자. 이번에는 useMutation을 이용하여 id 값이 1인 게시글을 삭제하는 예제이다.

import { useMutation } from '@tanstack/react-query';
import { customTestAxios } from '../apis/customTestAxios';

export default function TestPage() {
    const { mutate, isLoading, isError, error, isSuccess, data } = useMutation({
        mutationFn: async () => {
            return await customTestAxios.delete('posts/1');
        },
    });

    return (
        <>
            <h3>React Query - useMutation 테스트</h3>
            <button onClick={() => mutate()}>글 삭제</button>
            {isError && <div>삭제 실패 {error.message}</div>}
            {isSuccess && <div>삭제 성공 {data.data.title}</div>}
        </>
    );
}

 

 

※ axios 모듈을 따로 설정해주지 않았다면, 아래 코드로 테스트 해보기

 

import { useMutation } from '@tanstack/react-query';

export default function TestPage() {
    const { mutate, isLoading, isError, error, isSuccess, data } = useMutation({
        mutationFn: async () => {
            return await fetch('posts/1');
        },
    });

    return (
        <>
            <h3>React Query - useMutation 테스트</h3>
            <button onClick={() => mutate()}>글 삭제</button>
            {isError && <div>삭제 실패 {error.message}</div>}
            {isSuccess && <div>삭제 성공</div>}
        </>
    );
}

 

 

 

글 삭제 버튼을 누를 시, 응답 데이터로 온 삭제된 데이터를 view에 띄우도록 하여 글 삭제가 성공했는지 알 수 있게 하였다.

 

 

 

 

 

 

 

Zustand 시작하기

1) zustand 설치하기

npm install zustand

 

 

2) store.js 파일 만들기

import { create } from 'zustand';

const useTestStore = create((set) => ({
    counter: 0,
    plusCounter: () => set((state) => ({ counter: state.counter + 1 })),
    resetCounter: () => set({ counter: 0 }),
}));

export { useTestStore };

전역으로 쓰일 변수 counter와

counter 값을 수정할 수 있는 메서드 2개 plusCounter, resetCounter를 정의해주었다.

useXxxStore 이런 식으로 네이밍 하면 된다.

 

 

3) store 사용해보기

import { useTestStore } from '../store/store';

export default function TestPage() {
    const counter = useTestStore((state) => state.counter);
    const plusCounter = useTestStore((state) => state.plusCounter);
    const resetCounter = useTestStore((state) => state.resetCounter);

    return (
        <>
            <h3>Zustand 테스트</h3>
            <div>counter : {counter}</div>
            <button onClick={plusCounter}>더하기</button>
            <button onClick={resetCounter}>초기화</button>
        </>
    );
}

store.js 파일에서 만들어 둔 useTestStore를 불러온 뒤 필요한 변수와 메서드를 꺼내쓰면 된다.

 

 

더하기 버튼, 초기화 버튼 모두 잘 작동한다🙂