Recoil을 사용한 React 상태 관리(3): RecoilRoot와 컴포넌트에서 상태 사용하기

RecoilRoot와 컴포넌트에서 상태 사용하기

1. RecoilRoot로 애플리케이션에 Recoil 상태 적용하기

RecoilRoot는 Recoil 상태 관리의 최상위 컴포넌트로, 애플리케이션 내에서 Recoil 상태를 사용할 수 있도록 환경을 제공합니다. 모든 Recoil 관련 상태(Atom, Selector)는 RecoilRoot로 감싸진 컴포넌트 내에서만 동작합니다.

RecoilRoot와 컴포넌트에서 상태 사용하기

RecoilRoot 적용 방법

애플리케이션의 최상단에서 RecoilRoot로 컴포넌트를 감싸서 Recoil 상태를 사용하도록 설정할 수 있습니다.

// src/index.js
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')
);

 

2. 컴포넌트에서 useRecoilState, useRecoilValue 훅 사용법

useRecoilState

useRecoilState 훅은 상태를 읽고 업데이트하는 기능을 제공합니다. React의 useState와 비슷하지만, Recoil 상태를 전역적으로 관리할 수 있습니다.

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

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;

• useRecoilState(counterState)는 counterState라는 Atom의 값을 읽고, 해당 값을 업데이트할 수 있는 함수를 반환합니다.

useRecoilValue

useRecoilValue 훅은 상태를 읽기 전용으로 사용할 때 유용합니다. 상태를 읽을 수는 있지만, 값을 직접 업데이트할 필요는 없을 때 사용됩니다.

import React from 'react';
import { useRecoilValue } from 'recoil';
import { counterState } from './atoms'; // Atom 정의

function DisplayCounter() {
  const count = useRecoilValue(counterState);

  return <h1>Current Count: {count}</h1>;
}

export default DisplayCounter;

• useRecoilValue(counterState)는 counterState의 상태 값을 읽을 수 있지만, 상태를 업데이트하지는 않습니다.

3. 실습: useRecoilState와 useRecoilValue 사용

useRecoilState로 상태 업데이트 및 읽기

1. Atom 정의: 먼저 상태를 저장할 Atom을 정의합니다.

   // src/atoms.js
   import { atom } from 'recoil';
   
   export const counterState = atom({
     key: 'counterState', // 고유한 키값
     default: 0, // 초기 값
   });

2. useRecoilState 사용: 컴포넌트에서 useRecoilState를 사용하여 상태를 읽고, 업데이트할 수 있습니다.

   // src/Counter.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;

 

useRecoilValue로 상태 읽기

1. useRecoilValue 사용: 상태 값을 읽기만 할 때는 useRecoilValue를 사용합니다.

   // src/DisplayCounter.js
   import React from 'react';
   import { useRecoilValue } from 'recoil';
   import { counterState } from './atoms';
   
   function DisplayCounter() {
     const count = useRecoilValue(counterState);
   
     return <h1>Current Count: {count}</h1>;
   }
   
   export default DisplayCounter;

4. 요약

• RecoilRoot는 Recoil 상태를 사용하는 애플리케이션의 최상위 컴포넌트입니다.
• useRecoilState 훅을 사용하여 상태를 읽고, 업데이트할 수 있습니다.
• useRecoilValue 훅을 사용하여 상태를 읽기 전용으로 사용할 수 있습니다.
• 실습을 통해 useRecoilState로 상태를 업데이트하고, useRecoilValue로 상태를 읽는 방법을 익혔습니다.