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 로 감싸기