Recoil로 리액트 상태 관리하기

byCode Keeper •


Recoil로 리액트 상태 관리하기


리액트(React) 애플리케이션에서 상태 관리는 매우 중요한 요소입니다. 상태 관리 라이브러리로는 Redux, MobX 등이 많이 사용되지만, 최근에는 Facebook에서 개발한 Recoil이 주목받고 있습니다. Recoil은 간단하고 직관적인 API를 제공하며, 리액트의 동작 방식에 자연스럽게 통합될 수 있습니다. 이번 포스팅에서는 Recoil을 사용하여 리액트 애플리케이션의 상태를 관리하는 방법을 소개하겠습니다.


Recoil의 중요성


Recoil은 리액트의 상태 관리를 쉽게 구현할 수 있도록 도와줍니다. Recoil을 사용하면 다음과 같은 장점을 누릴 수 있습니다:

  • 간단한 API: Recoil은 간단한 API를 제공하여 상태 관리를 쉽게 구현할 수 있습니다.
  • React와의 자연스러운 통합: Recoil은 리액트의 동작 방식과 자연스럽게 통합됩니다.
  • 효율적인 상태 관리: Recoil은 컴포넌트 간의 상태 공유와 전역 상태 관리를 효율적으로 처리할 수 있습니다.
  • 비동기 상태 관리: Recoil은 비동기 상태 관리를 쉽게 구현할 수 있습니다.

프로젝트 설정 및 Recoil 설치


Recoil을 사용하기 위해 필요한 패키지를 설치합니다. 다음 명령어를 사용하여 프로젝트를 생성하고 필요한 패키지를 설치합니다.


npx create-react-app my-recoil-app --template typescript
cd my-recoil-app
npm install recoil

프로젝트 구조


프로젝트는 기본적으로 다음과 같은 구조를 가집니다.


my-recoil-app/
├── src/
│   ├── components/
│   ├── recoil/
│   ├── App.tsx
│   ├── index.tsx
├── public/
├── package.json
└── README.md

이제 Recoil을 사용하여 리액트 애플리케이션의 상태를 관리하는 방법을 살펴보겠습니다.


Recoil 기본 사용법


Recoil을 사용하여 상태를 관리하는 기본적인 방법을 살펴보겠습니다.


RecoilRoot 설정


먼저, RecoilRoot를 사용하여 Recoil 상태 관리를 설정합니다.


// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import App from './App';

ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById('root')
);

Atom 생성


Recoil의 atom을 사용하여 상태를 생성합니다.


// src/recoil/atoms.ts
import { atom } from 'recoil';

export const textState = atom({
  key: 'textState', // 각 atom의 고유한 키
  default: '', // 기본 값
});

상태 사용


Recoil 상태를 사용하여 컴포넌트에서 상태를 읽고 업데이트하는 방법을 살펴보겠습니다.


// src/components/TextInput.tsx
import React from 'react';
import { useRecoilState } from 'recoil';
import { textState } from '../recoil/atoms';

const TextInput: React.FC = () => {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <p>Echo: {text}</p>
    </div>
  );
};

export default TextInput;

위 코드에서는 useRecoilState 훅을 사용하여 textState atom의 상태를 읽고 업데이트합니다.


Selector 사용


Recoil의 selector를 사용하여 파생 상태를 생성하고 사용하는 방법을 살펴보겠습니다.


Selector 생성


먼저, selector를 사용하여 파생 상태를 생성합니다.


// src/recoil/selectors.ts
import { selector } from 'recoil';
import { textState } from './atoms';

export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

Selector 사용


Selector를 사용하여 컴포넌트에서 파생 상태를 읽는 방법을 살펴보겠습니다.


// src/components/CharacterCount.tsx
import React from 'react';
import { useRecoilValue } from 'recoil';
import { charCountState } from '../recoil/selectors';

const CharacterCount: React.FC = () => {
  const count = useRecoilValue(charCountState);

  return (
    <div>
      <p>Character Count: {count}</p>
    </div>
  );
};

export default CharacterCount;

위 코드에서는 useRecoilValue 훅을 사용하여 charCountState selector의 상태를 읽습니다.


비동기 상태 관리


Recoil은 비동기 상태 관리도 쉽게 구현할 수 있습니다. 비동기 데이터를 불러오는 예제를 살펴보겠습니다.


비동기 Selector 생성


비동기 상태를 관리하기 위해 비동기 selector를 생성합니다.


// src/recoil/selectors.ts
import { selector } from 'recoil';
import axios from 'axios';

export const asyncDataState = selector({
  key: 'asyncDataState',
  get: async () => {
    const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
    return response.data;
  },
});

비동기 상태 사용


비동기 상태를 사용하는 컴포넌트를 작성합니다.


// src/components/AsyncData.tsx
import React from 'react';
import { useRecoilValueLoadable } from 'recoil';
import { asyncDataState } from '../recoil/selectors';

const AsyncData: React.FC = () => {
  const dataLoadable = useRecoilValueLoadable(asyncDataState);

  switch (dataLoadable.state) {
    case 'loading':
      return <div>Loading...</div>;
    case 'hasError':
      return <div>Error: {dataLoadable.contents}</div>;
    case 'hasValue':
      return <div>Data: {JSON.stringify(dataLoadable.contents)}</div>;
  }
};

export default AsyncData;

위 코드에서는 useRecoilValueLoadable 훅을 사용하여 비동기 상태를 관리하고, 로딩 상태, 오류 상태, 값 상태를 처리합니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 Recoil을 사용하여 리액트 애플리케이션의 상태를 관리하는 방법에 대해 살펴보았습니다. Recoil은 간단한 API와 React와의 자연스러운 통합을 통해 상태 관리를 효율적으로 처리할 수 있습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전