0. React의 상태 관리

▶️ state(상태)란?

컴포넌트 간에 이동되는 props와 달리 컴포넌트 내부에서 관리되는 자바스크립트 객체

• 어플리케이션의 화면 렌더링에 영향을 끼친다
• 사용자의 인터랙션을 통해 동적으로 변하는 데이터

서로 다른 컴포넌트에서 동일한 데이터를 다룰 땐, 해당 데이터의 출처가 동일해야 한다. 그래야 서로의 변화에 동적으로 반응할 수 있기 때문이다. 즉 상태의 일관성 (데이터의 무결성)을 잘 지켜야한다.
Single Source of Truth이라는 방법론이 이러한 상태의 일관성을 유지하기 위해 등장한 방법론인데, 말그대로 신뢰할 수 있는 단일 출처를 말한다.
이 방법론이 React가 택한 방법론이다. 따라서 우리는 React에서 데이터의 무결성, 즉 서로 다른 컴포넌트에 분포되어있는 공통된 출처의 데이터의 일관성을 유지할 수 있도록 상태 관리를 해주어야 한다.

▶️ Client State vs Server State

	Client State	Server State
위치	클라이언트에 저장된 데이터	서버나 외부 데이터 소스에 저장된 데이터
접근성	클라이언트만 접근 가능	접근 권한이 있는 모든 클라이언트 접근 가능
데이터 관리	클라이언트에서 관리 (Redux, Recoil 등 상태관리 라이브러리 사용)	서버에서 관리 (데이터베이스 사용)
지속성	세션 간에 필연적으로 지속되진 않음	일반적으로 세션 간에 지속성 유지
네트워크 요청	데이터를 가져오거나 업데이트하려면 네트워크 요청이 필요할 수 있음	데이터 접근 또는 업데이트를 위해 네트워크 요청이 필요할 수 있음
보안	클라이언트가 액세스할 수 있고 보안 수준이 낮음	인증 및 암호화로 보호할 수 있으므로 더 안전
성능	server state에 비해 속도 빠름	client state에 비해 속도 느림
확장성	클라이언트 기기 용량이 제한적이어서 확장성이 다소 떨어짐	전용 서버나 데이터 소스로 관리되기 때문에 용량이 커서 확장성이 비교적 높음
예시	컴포넌트 state, Redux state, 브라우저 쿠키	DB 레코드, API 응답, 서버 세션 데이터

본 아티클에서는 Server State 라이브러리의 대표 React Query와, Client State 라이브러리의 대표 Recoil을 알아보고자 한다.

---

1. React Query

1-1. React Query란?

React에서 데이터 fetching과 캐싱 프로세스를 간소화해주는 라이브러리

• 외부(API 등)로부터 데이터를 fetching 및 업데이트 과정 간소화
• API 요청의 로딩 및 오류 상태 관리
• 캐싱 자동 관리

Client에서 API와 통신을 하기 위해서는
추가적으로 useEffect, useState를 함께 쓰면서 데이터를 fetching 해왔다.

하지만 React Query를 사용하면 이러한 Hook들의 필요성이 사라진다.

1-2. React Query 주요 개념

Query

• API 엔드포인트, DB 등의 원격 데이터 소스로부터 데이터 요청
• useQuery 훅 사용

Mutation

• 서버에 데이터를 추가하거나 업데이트
• useMutation 훅 사용

Query Caching

• Query 결과를 메모리에 저장
  Query Invalidation
• 쿼리를 오래된 상태로 여겨 무효화

1-3. Hooks

1️⃣ useQuery 훅

데이터 Fetching 용

API 엔드포인트나 DB에서 데이터를 비동기적으로 가져오도록 서버에 요청하는 것

사용법

const query = useQuery( { queryKey: [ ‘key’ ],   queryFn: callback })

queryKey

• 쿼리의 고유 키
• React Query 최신 버전부터는 배열 표기법을 사용해서 키 지정

queryFn

• 훅 호출 시 실행되는 Promise 반환하는 함수
• 해당 callback함수에서 데이터 fetching

// 예시
const getProducts = () => fetch( 'https://jsonplaceholder.typicode.com/users')
                          .then( res  => res.json() )

const query = useQuery( { queryKey: [‘users’],   queryFn: getTodos })

반환값 쿼리의 상태 정보를 담고 있는 객체

const { isLoading, isError, data, error, refetch, remove } = useQuery( { queryKey: [‘todos’], queryFn: getTodos });

대표적인 프로퍼티

• isLoading 쿼리가 현재 로딩 중인지 여부 (boolean)
• isError 쿼리 결과가 오류인지 여부 (boolean)
• data 쿼리를 통해 성공적으로 fetching된 데이터
• error 쿼리 실행 중 발생한 모든 에러
• refetch 쿼리 데이터를 수동으로 refetch 하는 트리거 메소드
• remove 캐시에서 특정 쿼리 제거하는 메소드

데이터 refetching

useQuery는 기본적으로

• 컴포넌트 최초 mount 시에 데이터를 fetching해오고,
• 이후의 데이터 업데이트에 대해서는 자동 실행되지 않는다. (데이터 refetching 안해줌)

[ useQuery 옵션 ]

옵션	역할	기본값
refetchOnWindowFocus	데이터가 오래된(stale) 경우 브라우저 창이 포커스 되면 리페치	true
refetchOnMount	데이터가 오래된 경우 마운트 시 리페치	true
refetchOnReconnect	데이터가 오래된 경우 재연결 시 리페치	true

하지만 브라우저가 idle 상태를 유지할 때엔, 데이터 업데이트를 감지하여 자동으로 리페치해주지 않는다.

이를 보완하기 위해서 refetchIntervel 옵션을 사용할 수 있다.

• 설정한 밀리초 단위로 데이터를 계속 refetching 해옴

2️⃣ useMutation 훅

API 엔드포인트나 DB에 데이터를 새로 생성, 수정, 삭제

사용법

const mutation = useMutation({ mutationFn: mutationFunction });

mutationFn

• 필수 옵션.
• 실행하고자 하는 함수를 반환하는 함수

// 예시
const AddUser = useMutation({
  mutationFn: ( user ) => {

    return fetch('https://jsonplaceholder.typicode.com/users',
                 {
      method:'post',
      headers: {
        "Content-Type": "application/json",
      },
      body:JSON.stringify( user )
    }).then( res =>  res.json() )
  })

반환값 뮤테이션 실행 결과와 관련된 정보를 담은 객체

대표적인 프로퍼티

• isLoading 뮤테이션이 현재 로딩 중인지 여부 (boolean)
• isSuccess 뮤테이션 결과가 성공인지 여부 (boolean)
• isError 뮤테이션 결과가 오류인지 여부 (boolean)
• data 뮤테이션 실행 후 반환된 데이터 (있을 때만)
• mutate 해당 뮤테이션 실행을 위해 호출할 메소드. (인자에 담을 변수를 객체로 전달)
• reset 뮤테이션 초기 상태로 리셋하는 메소드
• onSuccess 뮤테이션 성공시 호출할 콜백함수
• onError 뮤테이션 실패시 호출할 콜백함수

3️⃣ Query Caching

원격 서버와 통신하는데에 걸리는 시간을 단축하고자,

여러번 불러올 데이터는 캐시에 저장하여 반복해서 필요로 할 경우 원격 서버가 아닌 캐시에서 빠르게 가져올 수 있는 방식

useQuery 훅 사용 시, 지정했던 고유 키 밑에 반환된 데이터가 캐싱된다.

기본적으로는 캐시 데이터는 오래된(stale) 상태로 기록된다.

[ Query Caching과 관련된 useQuery 옵션 ]

const query = useQuery({
    queryKey: [‘users’],
    queryFn: getUsers,
    staleTime: 5000,
    cacheTime: 60000
  })

staleTime

• xx밀리초 후에 데이터는 stale 상태로 처리된다.

cacheTime

• xx밀리초 후에 캐시 데이터는 가비지 컬렉션으로 간다. (버려짐)

4️⃣ Query Invalidation

지정해준 staleTime 과 무관하게 즉시 데이터를 stale 상태로 처리해야하는 경우가 있다.

예를 들어, API에 POST 요청을 보내 데이터 값을 업데이트할 때엔, API 엔드포인트에 있는 데이터의 값이 캐시에 저장되어있는 값보다 더 최신 상태가 되고, 캐시에 저장되어있는 데이터는 곧바로 outdated한 값이 되어버린다. 이럴 때엔 즉시 캐시 데이터를 stale 상태로 처리해줘야 한다.

React Query의 QueryClient 객체의 invalidateQueries 메소드 활용

• 모든 쿼리, 혹은 고유 키를 통해 특정 쿼리를 stale 상태로 처리해주는 역할

사용법

• useQueryClient 훅을 통해 queryClient 객체 생성
• 객체 내장 메소드 invalidateQueries 활용하기

import { useQueryClient } from "@tanstack/react-query";

// useQueryClient 훅을 사용하여 queryClient 객체 생성
const queryClient = useQueryClient();

// 캐시의 모든 쿼리 무효화
queryClient.invalidateQueries();

// 'users'로 시작하는 키가 있는 모든 쿼리 무효화
queryClient.invalidateQueries({ queryKey: ["users"] });

📌 React Query 요약

• React 훅을 사용해서 데이터를 간편하게 Fetch/Update
• 스마트 캐싱 메커니즘

→ 코드 간소화 & 성능 최적화

React Query는 강력한 Server State 관리 라이브러리이다!

---

2. Recoil

2-1. Recoil 이란?

• 비교적 최근에 나온 새로운 상태 관리 라이브러리
• Facebook사에서 개발

😭 조심스레 한계점을 먼저 알아보고 가자

위 사진은 내장 API인 Context API를 제외한 대표적인 Client State 관리 라이브러리들의 npm 설치 수 비교 그래프이다. (근 1년 기준)
한눈에 알 수 있듯이 Recoil보다 Redux가 설치 수에 있어 훨씬 더 우세하다는 것을 확인할 수 있다.

이 그림에서 그 한계점을 바로 확인할 수 있는데, 바로 최신 라이브러리인 만큼 개발자 커뮤니티가 매우 빈약하기 때문에 어떠한 이슈가 발생하여도 집단지성의 힘을 빌려 해결하기 어려운 상황이 발생할 수 있으며, API 혹은 공식문서에 대한 신뢰도도 비교적 낮다고 할 수 있다.

그러나!

• 가장 React스러운 상태관리라는 철학을 갖고있음
• 일반적인 state와 같은 get, set 인터페이스를 사용하기 때문에 간단한 구조를 가지고, Boiler Plate도 적어 러닝커브가 상대적으로 낮음.

위와 같은 면에서는 뚜렷한 강점을 가지고 있기 때문에 React 라이브러리를 사용하는 프론트엔드 개발자라면 충분히 적극적으로 활용해보면 좋을 라이브러리라고 생각한다.

2-2. Recoil 주요 개념

▶️ atom & selector

atom : 상태의 단위

• 업데이트(set)와 구독(get)이 가능
• atom이 업데이트 될 때마다, atom을 구독하고 있는 컴포넌트들이 리렌더링된다.

selector : atom의 상태 값을 동기/비동기 방식으로 업데이트

• atom이 최소한의 상태의 단위였다면, selector는 그곳에서 파생되는 모든 데이터를 관리하는 곳이라고 할 수 있다.
• selector의 상위 atom 혹은 selector가 업데이트될 경우, 이들과 종속된 하위 selector도 함께 재실행된다.
• selector도 구독이 가능하여, atom과 동일하게 selector가 업데이트될 때마다 이를 구독하는 컴포넌트들이 리렌더링된다.

▶️ selector의 get

const mySelector = selector({
  key: 'MySelector',
  get: ({get}) => get(myAtom) * 100,
});

get : 콜백함수의 인자에 담겨있는 get함수를 통해 다른 atom/selector를 구독할 수 있다.

위의 예시를 기반으로 atom과 selector의 작동방식을 설명하자면,
myAtom이라는 별도의 atom에서 파생된 데이터를 관리하고자 mySelector라는 selector를 생성한 것이고,
mySelector가 하는 일은 myAtom 상태의 값을 읽어와 100을 곱해준 뒤 반환하는 함수이다.
이 때, mySelector 셀렉터는 myAtom 아톰에 대해 종속된다/의존한다/구독한다 라고 할 수 있으며,
이럴 경우 myAtom의 값이 업데이트될 때마다 mySelector도 재실행되게 되어 동적으로 값을 관리할 수 있게 된다.

selector에 get 함수만 정의될 경우, RecoilValueReadOnly 객체를 반환하여, 함수 반환 값을 읽는 것만 가능해진다.

반면, 쓰는 것도 가능한 selector의 set함수도 있으나, 본 아티클의 주제에 직결되는 내용만 다루기 위해 생략한다. 관련 내용은 문서에서 참고하자!

▶️ Recoil Hooks

useState와 매우 유사한 형태이므로, 쉽게 사용할 수 있다.

• useRecoilState : state 값과 setState 모두 사용할 때

  const [변수명, setter명] = useRecoilState(atom명);

• useRecoilValue : state 값만 사용할 때

  const 변수명 = useRecoilValue(atom명);

• useSetRecoilState : setState만 사용할 때

  const setter명 = useSetRecoilState(atom명);

2-3. Recoil 사용법

0️⃣ RecoilRoot로 감싸주기

ReactDOM.createRoot(document.getElementById("root")!).render(
  <>
    <RecoilRoot>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <App />
      </ThemeProvider>
    </RecoilRoot>
  </>
);

Recoil을 사용하고자 하는 컴포넌트의 상위에서 RecoilRoot를 import 해와서 감싸준다.

일반적인 경우, Recoil을 전역적으로 사용하기 때문에 App.tsx / main.tsx 에서 사용한다.

1️⃣ atom 생성하기

atom.ts 파일을 생성하여 원하는 atom을 생성한다.

// recoil/atom.ts
export const followState: RecoilState<boolean> = atom({
  key: "followState",
  default: false,
});

• key : 모든 atom은 반드시 전역적으로 고유한 key를 가진다.

2️⃣ recoil Hook 호출하기

• 상태의 값을 사용하는 컴포넌트 내

  const follow = useRecoilValue(followState);

• 상태를 업데이트시켜주는 함수를 실행하는 컴포넌트 내

  const setFollow = useSetRecoilState(followState);

📌 Recoil 요약

• atom : 전역 상태의 최소 단위
• selector : atom에서 파생된 데이터를 관리하는 곳

Recoil은 강력한 Client State 관리 라이브러리이다!

---

지금까지 Client State를 관리할 수 있는 Recoil에 대해 알아보았다.
그렇다면 Recoil은 Server State Fetching과는 전혀 무관한 라이브러리일까?
아니다. Recoil을 사용하여 비동기적으로 데이터를 처리하는 것도 가능한데, 지금부터 그 방법인 Recoil Asynchronous Data Query 에 대해 알아보자.

3. Asynchronous Recoil

3-1. Asynchronous Data Query

위에서 본 selector의 get은 값을 반환해주는 콜백함수를 가졌었다.
그러나 get 함수는 일반적인 값 뿐만 아니라 Promise 객체를 리턴해줄 수 있다.

대표적인 예시로, Server State를 불러오는 Data Fetching의 경우를 보자.
기존에 우리가 async await 를 사용하여 Data Fetching을 해온 방식은 아래와 같다.

const getContent = async () => {
  const response = await axios.get(url);
  return response.data;
};
// try catch 등은 생략한 가장 기본적인 코드이다

이렇게 비동기적인 API 호출을 실행하여 Promise를 반환하는 함수를 selector의 get으로 넣어보자.

const contentQuery = selector({
  key: 'contentQuery',
  get: async ({get}) => {
    const response = await axios.get(url);
    return response.data;
  },
});

이제 응답받은 데이터를 사용하고 싶을 땐 selector의 값을 가져오는 Hook이었던 useRecoilValue를 똑같이 사용하면 된다.

const 호출컴포넌트 = () => {
  const content = useRecoilValue(contentQuery);
  return (<div>{content}</div>);
}

3-2. Pending 처리

그런데, 만약 Promise가 pending 상태일때, 즉 resolve가 호출되기 전에는 호출컴포넌트는 무엇을 렌더링해야 할까?

이러한 경우를 처리할 수 있는 것이 바로 React의 Suspense이다.

return (
  <RecoilRoot>
    <React.Suspense fallback={<div>Loading...</div>}>
      <호출컴포넌트명 />
    </React.Suspense>
  </RecoilRoot>
);

위와 같이 fallback에 Pending 시 렌더링할 콘텐츠를 담은 React.Suspense로 비동기 selector를 호출하는 컴포넌트를 감싸주면 된다.

3-3. Error 처리

그렇다면 만약 Promise의 실행 결과, resolve가 아닌 reject가 호출되어 에러가 발생했을 경우엔 어떻게 처리해주어야 할까?

이러한 경우엔 React의 ErrorBoundary를 활용해줄 수 있다.

return (
  <RecoilRoot>
    <ErrorBoundary>
      <React.Suspense fallback={<div>Loading...</div>}>
        <호출컴포넌트명 />
      </React.Suspense>
    </ErrorBoundary>
  </RecoilRoot>
);

위와 같이 <ErrorBoundary> 태그로 비동기 selector를 호출하는 컴포넌트를 감싸주면 된다.

이렇게 Recoil은 React의 Suspense와 ErrorBoundary를 활용할 수 있도록 설계되어있기 때문에 React와의 호환성 및 활용성이 우수한 라이브러리라고 할 수 있다.

📌 Asynchronous Data Query 요약

• selector의 get함수에서 Promise를 반환해주는 경우
• resolve -> get함수의 반환값 렌더링
• pending -> 감싸준 React의 Suspense의 fallback 값 렌더링
• reject -> 감싸준 React의 ErrorBoundary 컴포넌트 활용

Recoil로도 쉽게 Server State를 관리해줄 수 있다!

---

참고문헌

Recoil 공식문서
React Query 공식문서