Recoil을 사용한 React 상태 관리(2): Recoil의 기본 개념 (Atom과 Selector)

Recoil의 기본 개념 (Atom과 Selector)

1. Atom: 상태의 최소 단위

Atom은 Recoil의 가장 작은 상태 저장소입니다. 애플리케이션의 상태가 필요한 부분에서 Atom을 생성하고 사용합니다. Atom에 저장된 값은 필요에 따라 여러 컴포넌트에서 사용할 수 있으며, Atom의 값이 업데이트되면 해당 값을 사용하는 모든 컴포넌트가 자동으로 다시 렌더링됩니다.

Recoil의 기본 개념 (Atom과 Selector)

Atom의 특징

• React 컴포넌트에서 사용할 수 있는 상태를 나타냅니다.
• Atom에 저장된 값은 기본 상태를 나타내며, 여러 컴포넌트에서 공유될 수 있습니다.

예제: Atom 사용하여 간단한 카운터 만들기

1. 먼저 atoms.js 파일을 생성하고, Atom을 정의합니다.

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

export const counterState = atom({
  key: 'counterState',
  default: 0,
});

 

1. 이제 Atom을 사용하여 간단한 카운터 컴포넌트를 만듭니다.

   // src/App.js
   import React from 'react';
   import { useRecoilState } from 'recoil';
   import { counterState } from './atoms';
   
   function Counter() {
     const [count, setCount] = useRecoilState(counterState);
   
     return (
       <div>
         <h1>Count: {count}</h1>
         <button onClick={() => setCount(count + 1)}>Increment</button>
         <button onClick={() => setCount(count - 1)}>Decrement</button>
       </div>
     );
   }
   
   export default Counter;

2. Selector: 파생된 상태(derived state)

Selector는 Atom에 저장된 값을 기반으로 파생된 상태를 생성합니다. 즉, Atom의 상태를 바탕으로 특정 값을 계산하거나 변환하는 데 사용됩니다. Selector는 읽기 전용 또는 읽기/쓰기 가능할 수 있으며, 파생된 값을 다른 컴포넌트에서 사용할 수 있습니다.

Selector의 특징

• Atom을 기반으로 파생된 상태를 제공하며, 상태 간의 의존성을 쉽게 관리할 수 있습니다.
• 복잡한 계산이 필요한 경우 Selector를 사용하여 효율적으로 상태를 관리할 수 있습니다.

예제: Selector를 사용하여 계산된 값 반환

1. 먼저 selectors.js 파일을 생성하여 Selector를 정의합니다.

   // src/selectors.js
   import { selector } from 'recoil';
   import { counterState } from './atoms';
   
   export const doubleCounterState = selector({
     key: 'doubleCounterState',
     get: ({ get }) => {
       const count = get(counterState);
       return count * 2;
     },
   });

 

1. 이제 Selector를 사용하여 두 배로 계산된 값을 반환하는 컴포넌트를 만듭니다.

   // src/App.js
   import React from 'react';
   import { useRecoilValue } from 'recoil';
   import { counterState } from './atoms';
   import { doubleCounterState } from './selectors';
   
   function CounterWithDouble() {
     const count = useRecoilValue(counterState);
     const doubledCount = useRecoilValue(doubleCounterState);
   
     return (
       <div>
         <h1>Count: {count}</h1>
         <h2>Double Count: {doubledCount}</h2>
       </div>
     );
   }
   
   export default CounterWithDouble;

 

3. 실습: Atom과 Selector 사용

• Atom을 사용하여 상태(카운터)를 관리하고, Selector를 통해 그 상태를 기반으로 새로운 값을 계산하는 방식입니다.
• 카운터를 증가시키면 두 배로 계산된 값도 실시간으로 업데이트됩니다.

4. 요약

• Atom은 Recoil에서 상태의 최소 단위로, 여러 컴포넌트에서 공유될 수 있습니다.
• Selector는 Atom에 저장된 상태를 기반으로 파생된 상태를 계산하여 반환합니다.
• Atom과 Selector는 Recoil 상태 관리의 핵심 개념으로, 이를 통해 효율적인 상태 관리가 가능합니다.