13.Recoil로 배우는 React 상태 관리: 간단하고 강력한 최신 상태 관리 라이브러리

"Recoil로 배우는 React 상태 관리: 간단하고 강력한 최신 상태 관리 라이브러리"

---

1시간 분량 강의안 (Recoil 기초)

강의 목표

1. Recoil의 개념과 필요성을 이해한다.
2. Recoil의 주요 구성 요소(Atoms, Selectors, RecoilRoot)를 학습한다.
3. Recoil을 활용하여 React 애플리케이션에서 상태를 관리하는 방법을 익힌다.

---

강의 목차

---

1. Recoil이란 무엇인가? (10분)

Recoil의 정의

• Recoil은 React를 위한 친화적인 상태 관리 라이브러리로, 상태를 관리하고 컴포넌트 간의 상태 공유를 간단하게 만듭니다.
• Facebook에서 개발되었으며, React의 특성을 최대한 활용하도록 설계되었습니다.

Recoil의 주요 특징

1. React 친화적: React의 상태 관리 방식과 자연스럽게 통합.
2. 정확한 상태 구독: 상태가 필요한 컴포넌트만 다시 렌더링.
3. 비동기 상태 관리: Selectors를 활용하여 비동기 데이터 로드 처리.

Recoil의 주요 구성 요소

1. Atom: 상태의 최소 단위로, 상태를 저장하고 공유.
2. Selector: Atom을 기반으로 파생된 데이터를 생성.
3. RecoilRoot: Recoil 상태를 사용할 수 있는 컨텍스트를 제공.

---

2. Recoil 설치 및 기본 설정 (10분)

1단계: Recoil 설치

• Recoil 설치:

  npm install recoil

2단계: RecoilRoot 설정

• Recoil 상태를 애플리케이션에서 사용하려면 RecoilRoot로 감싸야 합니다.

import React from 'react';
import { RecoilRoot } from 'recoil';
import App from './App';

const Root = () => (
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

export default Root;

---

3. Recoil 주요 개념 및 구현 (20분)

1단계: Atom 생성

• Atom은 상태의 최소 단위로, React 컴포넌트에서 공유 가능.

import { atom } from 'recoil';

export const counterState = atom({
  key: 'counterState', // Atom의 고유 ID
  default: 0,         // 초기 상태 값
});

2단계: Atom 사용

• React 컴포넌트에서 Atom을 사용하려면 useRecoilState를 활용.

import React from 'react';
import { useRecoilState } from 'recoil';
import { counterState } from './atoms';

const Counter = () => {
  const [count, setCount] = useRecoilState(counterState);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

export default Counter;

3단계: Selector 사용

• Selectors를 통해 Atom을 기반으로 파생된 데이터를 생성.
   

import { selector } from 'recoil';
import { counterState } from './atoms';

export const doubleCounterState = selector({
  key: 'doubleCounterState',
  get: ({ get }) => {
    const count = get(counterState);
    return count * 2;
  },
});

4단계: Selector 값 사용

• React 컴포넌트에서 Selector 값을 읽기.

import React from 'react';
import { useRecoilValue } from 'recoil';
import { doubleCounterState } from './selectors';

const DoubleCounter = () => {
  const doubleCount = useRecoilValue(doubleCounterState);

  return <p>Double Count: {doubleCount}</p>;
};

export default DoubleCounter;

---

4. 고급 Recoil 기능 (10분)

1단계: 비동기 Selector

• 서버에서 데이터를 로드하여 상태로 사용.

import { selector } from 'recoil';

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

2단계: Atom Effects

• Atom에 추가적인 효과(예: 로컬 스토리지 저장) 적용.
   

import { atom } from 'recoil';

export const localStorageState = atom({
  key: 'localStorageState',
  default: 0,
  effects: [
    ({ setSelf, onSet }) => {
      const savedValue = localStorage.getItem('state');
      if (savedValue != null) {
        setSelf(JSON.parse(savedValue));
      }

      onSet((newValue) => {
        localStorage.setItem('state', JSON.stringify(newValue));
      });
    },
  ],
});

---

5. 실습 과제 (10분)

실습 과제

1. Recoil을 사용하여 카운터 애플리케이션을 구현하세요.
2. 카운터 값을 Selector로 두 배로 계산하여 화면에 표시하세요.
3. 비동기 데이터를 로드하여 화면에 표시하세요.

예제

• 비동기 데이터 컴포넌트:

import React from 'react';
import { useRecoilValue } from 'recoil';
import { asyncData } from './selectors';

const AsyncComponent = () => {
  const data = useRecoilValue(asyncData);

  return (
    <div>
      <h1>Async Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default AsyncComponent;

---

6. Q&A 및 정리 (10분)

• Q&A:
  1. Recoil은 Redux와 비교했을 때 어떤 점에서 더 간단한가요?
  2. Recoil을 사용하면 Context API는 필요 없나요?
• 요약:
  • Recoil은 React 애플리케이션에서 상태 관리가 필요한 경우 간단하고 직관적인 해결책을 제공합니다.
  • Atom과 Selector를 통해 상태와 파생 데이터를 쉽게 관리할 수 있습니다.
  • RecoilRoot로 상태 관리의 범위를 지정하고, React Hooks로 상태를 간단히 사용할 수 있습니다.