TIL-2024.05.04 - React - 010. Recoil

 

 

 

질문 : 

1. React 에서 상태 관리 방법에 대해 알려줘.

2. Recoil 만의 특징 

 

 

Recoil

- Recoil은 Facebook에서 개발한 상태 관리 라이브러리로, React 애플리케이션에서 복잡한 상태를 관리하기 위한 간편하고 강력한 도구

 

 

설치

// npm을 사용하는 경우:
npm install recoil


// yarn을 사용하는 경우:
yarn add recoil

 

 

 

주요 개념

1. Atom 

- Atom은 React 컴포넌트에서 공유 및 구독할 수 있는 상태 단위로 각 Atom은 고유한 식별자와 초기값을 가지며, 컴포넌트 간에 이러한 상태를 전역적으로 공유함 

 

 

2. Selector는 Atom을 기반으로 한 파생 상태를 정의하는 데 사용. 

- Selector를 사용하여 Atom의 값을 변환하거나 조합하여 새로운 값으로 계산하여  React 컴포넌트에서 복잡한 상태 로직을 처리 가능 

 

import { atom, selector } from 'recoil';

// 두 개의 Atom 정의
const atomA = atom({
  key: 'atomA',
  default: 10,
});

const atomB = atom({
  key: 'atomB',
  default: 20,
});

// Selector를 사용하여 새로운 값 계산
export const sumSelector = selector({
  key: 'sumSelector',
  get: ({get}) => {
    const valueA = get(atomA);
    const valueB = get(atomB);
    return valueA + valueB;
  },
});

 

 

 

import { useRecoilValue } from 'recoil';
import { sumSelector } from './atoms';

function MyComponent() {
  const sum = useRecoilValue(sumSelector);

  return <p>Sum: {sum}</p>;
}

 

 

 

3. RecoilRoot Recoil을 사용하기 위해서는 애플리케이션의 최상위에 RecoilRoot 컴포넌트를 제공. 

- RecoilRoot는 Recoil 애플리케이션의 컨텍스트를 설정하고 Atom 및 Selector에 액세스할 수 있는 환경을 제공합니다.

 

 

 

장점

1. 편이성  

- 각 Atom 및 Selector는 일반적인 JavaScript 변수 및 함수처럼 선언 및 정의할 수 있으며, React 컴포넌트에서 손쉽게 사용 가능 

 

2. 성능 최적화

- Recoil은 내부적으로 상태의 의존성을 추적하여 최적화된 렌더링을 가능하게 하여,  React 애플리케이션의 성능 향상

 

3. 유연성 
- Recoil은 다양한 상태 관리 패턴을 지원하며, 복잡한 상태 관리 로직을 간단하고 유연하게 구현 가능.

 

 

예제

 

1. 애플리케이션의 최상위 컴포넌트를 RecoilRoot로 감싸기

import './App.css';
import {RecoilRoot} from "recoil";
import ParentComponent from "./components/parent.component";

function App() {
  return (
      <RecoilRoot>
        <div className="App">
            <ParentComponent/>
        </div>
      </RecoilRoot>
  );
}

export default App;

 

 

 

 

2. counterState.jsx 설정

import {atom, selector} from 'recoil';


const atomA = atom({
    key: 'atomA',
    default: "Current Value is ",
})

export const atomB = atom({
    key: 'atomB',
    default: 20,
});


// Selector를 사용하여 새로운 값 계산
export const counterState = selector({
    key: 'counterState',
    get: ({get}) => {
        const valueA = get(atomA);
        const valueB = get(atomB);
        return valueA + valueB;
    },
});

 

 

 

 

 

3. Parent.jsx 에서 값 변경 (useRecoilState Hook 사용)

import React from "react";
import {useRecoilState} from "recoil";
import {atomB} from "../recoil/CounterState";
import ChildComponent from "./child.component";

const ParentComponent = () => {
    const [valueB, setAtomB] = useRecoilState(atomB);

    
    const onClickButton = () => {
        setAtomB(valueB + 1);
    };

    return (
        <div>
            <ChildComponent/>
            <button onClick={onClickButton}>Increment</button>
        </div>
    )
};

export default ParentComponent;

 

 

 

 

4. Child.jsx 에서 변경된 값 보기 (useRecoilValue Hook 사용)

import React from "react";
import {useRecoilState, useRecoilValue} from "recoil";
import {counterState} from "../recoil/CounterState";

const ChildComponent = () => {
    const finalValue = useRecoilValue(counterState);


    return (
        <div>
            {finalValue}
        </div>
    );
};

export default ChildComponent;

 

 

 

 

useRecoilState 과 useRecoilValue 차이

 

useRecoilState 

- useRecoilState 훅은 Recoil Atom의 현재 값 및 해당 값을 변경하는 함수 반환.

- 이 훅을 사용하면 Recoil Atom의 상태를 읽고 변경 가능.

- 반환되는 값은 배열이며 첫 번째 요소는 Atom의 현재 값이고, 두 번째 요소는 Atom 값을 변경하는 함수.

 

 

useRecoilValue 

- useRecoilValue 훅은 Recoil Atom이나 Selector의 현재 값만을 반환.

- 이 훅은 Atom이나 Selector의 값을 읽기만 하고, 변경하는 함수를 제공하지 않아서, 해당 상태를 변경 불가.

 

 

질문 : 

1. React 에서 상태 관리 방법에 대해 알려줘.

- Redux 와 Recoil 이 있지만, Recoil에 대해서 알아보기 

 

 

2. Recoil 만의 특징 

- 공유 및 구독할 수 있는 상태 단위인 atom 

- selector을 사용한 atom 값 변경 

- 최상위 RecoilRoot 로 감싸기