[React] Recoil로 전역 상태 관리

 

 

📌 전역 상태 관리

• Props Drilling에서 발생하는 문제를 해결하기 위해 상태를 컴포넌트에서 선언하지 않고 전역으로 관리
• 전역 상태 관리 저장소에서 중간 컴포넌트를 거치지 않고 바로 사용 → 효율적인 개발 가능
• Ex) Context API, Redux, Recoil

💡Props Drilling이란?
- 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것
- 단점: 중간 컴포넌트는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 해당 값을 사용하지 않는 경우에도 프로퍼티를 받고 전달해야합니다. 

 

 

 

📌 Recoil

• Facebook에서 개발한 전역 상태 관리를 위한 라이브러리
• 다른 라이브러리(Redux, Mobx)와는 달리 React 전용이며 React에 최적화 되어있습니다.
  → 전역상태 값을 state처럼 간단한 get/set 인터페이스로 사용 가능 
• 변경된 상태가 실제로 필요한 컴포넌트만 리렌더링되도록 할 수 있습니다.
  → 불필요한 리렌더링을 방지
• 값만 필요한 경우와 값을 수정하는 함수만 필요한 경우를 분리하여 사용 가능

 

 

1️⃣ Recoil 설치하기

• npm 사용

npm install recoil

 

• yarn 사용

yarn add recoil

 

 

2️⃣ RecoilRoot 제공하기

• Recoil을 사용하려면 애플리케이션의 최상위 컴포넌트에 'RecoilRoot' 컴포넌트를 씌우면됩니당

// index.js 또는 App.js 등에서

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

// 최상위 컴포넌트인 <App />을 감싸준다.
ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById('root')
);

 

 

3️⃣ Atom 사용하여 Recoil 상태 정의하기

• Atoms
  • Redux에서 쓰이는 store와 유사한 개념으로, 상태(state)의 단위
  • 어떤 컴포넌트에서나 읽고 쓸 수 있습니다.
  • atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독
    → atom이 업데이트 되면, 해당 atom을 구독하는 모든 컴포넌트는 새로운 값을 반영하여 다시 렌더링! 
  • Atoms는 atom함수를 사용해 생성 

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

const exampleState = atom({
  key: 'exampleState', // 고유한 key 값
  default: '', // 해당 atom의 초기값
});

 

 

4️⃣ 전역 상태 관련 Hooks

• 전역 상태(Atoms, Selector)를 get/set 하기 위해 Recoil에서 제공하는 Hooks를 사용
  • useRecoilState(): [state, setState] 튜플에 할당, 인자에 Atoms(or Selector)를 넣어줍니다.
  • useRecoilValue(): 전역상태의 state 상태값만을 참조하기 위해 사용
  • useSetRecoilState(): 전역상태의 setter 함수만을 활용하기 위해 사용
  • useResetRecoilState(): 전역상태를 default(초기값)으로 Reset하기 위해 사용 

import { useRecoilState, useSetRecoilState, useResetRecoilState } from 'recoil';
import { exampleState } from '../../recoil/atoms';

function RecoilTest() {
  const [ example, setExample ] = useRecoilState(exampleState); // useRecoilState 을 통한 value, setter 반환
  const countValue = useRecoilValue(exampleState); // 구독하는 atom의 값만 반환
  const setCountUseSetRecoilState = useSetRecoilState(exampleState); // 값을 변경하는 함수만 반환(setter)
  const resetCount = useResetRecoilState(exampleState); // 설정된 초기값으로 Reset
    
  return ();
}

export default RecoilTest;

 

 

5️⃣ Selectors

• atoms나 다른 selectors를 입력으로 받아들이는 순수함수(pure function)
• 상위의 atoms 또는 selectors가 업데이트되면 하위의 selector 함수도 다시 실행됩니다.
• 컴포넌트들은 selectors를 atoms처럼 구독할 수 있으며 selectors가 변경되면 컴포넌트들도 다시 렌더링됩니다. 
• selectors는 selector함수를 사용해 정의
  • get 속성은 계산될 함수로, get 인자를 통해 atoms와 다른 selectors에 접근할 수 있습니다.

+) 현재 exampleSelector는 writable하지 않기 때문에 useRecoilValue()를 사용해 값을 읽을 수 있습니다. (readonly)

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

export const exampleSelector = selector({
  key: 'exampleSelector',  // 고유한 key 값
  get: ({ get }) => {
    const value = get(exampleState);
    // 추가적인 계산 로직 수행
    return transformedValue;
  },
});

 

 

 

 

🍀 참고자료

https://recoiljs.org/ko/