Recoil로 간편한 상태 관리하기

왜 Recoil인가?

1. 콜백 함수: 부모 컴포넌트에서 자식에게 상태를 변경할 수 있는 함수를 props로 전달합니다. 자식 컴포넌트는 이 함수를 호출함으로써 부모의 상태를 업데이트할 수 있습니다.

2. 상태 끌어올리기: 공통의 부모 컴포넌트에서 상태를 관리하고, 필요한 자식 컴포넌트에 해당 상태와 변경 함수를 props로 전달하여 상태를 공유합니다.

3. Context API: 전역적으로 데이터를 관리할 수 있는 Context를 생성하여, 자식 컴포넌트가 이 Context를 구독하고 필요한 데이터에 접근하도록 합니다. 이를 통해 컴포넌트 간의 깊은 계층에서도 쉽게 데이터를 전달할 수 있습니다.

4. 상태 관리 라이브러리: Redux, Recoil과 같은 상태 관리 라이브러리를 사용하여 애플리케이션의 상태를 효율적으로 관리합니다. 이러한 라이브러리는 복잡한 상태 흐름을 단순화하고, 여러 컴포넌트 간의 상태 공유를 용이하게 합니다.

5. 부모의 setState 함수를 props로 전달: 부모 컴포넌트의 setState 함수를 자식 컴포넌트에 props로 전달하여, 자식에서 이 함수를 호출함으로써 부모의 상태를 직접 수정할 수 있도록 합니다.

Redux가 아닌 Recoil

Atom

import { atom } from 'recoil';

const userState = atom({
  key: 'userState', // 고유 ID
  default: '', // 기본값
});

Selector

Selector의 기본 사용법

import { selector } from 'recoil';
import { userState } from './atoms'; // atom을 import

const userPointState = selector({
  key: 'userPointState', // 고유 ID
  get: ({ get }) => {
    const point = get(userState); // userState atom의 값을 가져옴
    return point; // userState의 값을 그대로 반환
  },
});

Selector에서 set 메서드 사용하기

import { atom, selector } from 'recoil';

const userState = atom({
  key: 'userState',
  default: { points: 0 },
});

const userPointState = selector({
  key: 'userPointState',
  get: ({ get }) => {
    const user = get(userState);
    return user.points; // userState의 points 값을 반환
  },
  set: ({ set }, newValue) => {
    set(userState, (prevUser) => ({
      ...prevUser,
      points: newValue, // points 값을 newValue로 업데이트
    }));
  },
});

Selector의 사용 예시

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { userPointState } from './selectors'; // selector import

const UserProfile = () => {
  const points = useRecoilValue(userPointState); // Selector를 통해 points 값 읽기
  const [setPoints] = useRecoilState(userPointState); // Selector의 set 사용

  const increasePoints = () => {
    setPoints(points + 10); // 포인트 증가
  };

  return (
    <div>
      <h1>User Points: {points}</h1>
      <button onClick={increasePoints}>Increase Points</button>
    </div>
  );
};

export default UserProfile;

비동기 상태 처리

import React, { Suspense } from 'react';
import { Mainpage } from '../components';

const App = () => {
  return (
    <RootRecoil>
      <Suspense fallback={<div>Loading...</div>}>
        <Mainpage />
      </Suspense>
    </RootRecoil>
  );
}

export default App;

Loadable을 활용한 비동기 상태 관리

import { useRecoilValueLoadable } from 'recoil';

const userLoadable = useRecoilValueLoadable(getUserSelector);

Selector를 통한 성능 개선 - 캐싱

Selector 캐싱의 작동 방식

1. 상태 추적: Selector는 사용된 atom의 값을 추적합니다. Atom의 값이 변경되면, 이를 구독하고 있는 Selector는 자동으로 리렌더링됩니다.

2. 값 저장: Selector가 처음 호출되면 해당 값을 계산하고 캐시에 저장합니다. 이후 같은 값이 필요할 경우, Selector는 계산된 결과를 재사용합니다.

3. 의존성 변경 시 업데이트: Selector가 의존하는 atom이나 다른 Selector의 값이 변경되면, Selector는 다시 계산되고 새로운 값을 반환합니다. 이 과정에서 캐시된 값은 무효화되고 새로운 값이 저장됩니다.

import { atom, selector } from 'recoil';
import axios from 'axios';

// Atom: 사용자 ID를 저장하는 상태
const userIdState = atom({
  key: 'userIdState',
  default: '',
});

// Selector: API를 호출하여 사용자 정보를 가져오는 Selector
const userInfoSelector = selector({
  key: 'userInfoSelector',
  get: async ({ get }) => {
    const userId = get(userIdState);
    if (!userId) return null; // userId가 없으면 null 반환

    const response = await axios.get(`https://api.github.com/users/${userId}`);
    return response.data; // 사용자 정보 반환
  },
});

동적인 URL에 대한 API 호출 - SelectorFamily

import { selectorFamily } from 'recoil';
import axios from 'axios';

export const githubRepo = selectorFamily({
  key: "github/get",
  get: (githubId) => async () => {
    if (!githubId) return "";
    const { data } = await axios.get(`https://api.github.com/repos/${githubId}`);
    return data;
  },
});

import { useRecoilValue } from 'recoil';
import { githubRepo } from '../../state';

const Github = () => {
  const githubId = 'juno7803';
  const githubRepos = useRecoilValue(githubRepo(githubId));
  
  return (
    <div>Repos: {githubRepos}</div>
  );
}

export default Github;

마무리 정리