[TIL] Recoil

Recoil

리코일은 전역 상태 관리의 최적화 및 성능과 효율성 향상을 위해 만들어졌다. 또한, React를 공식적으로 지원하는 라이브러리이기 때문에 React 내부에 접근이 가능하다. Recoil에서 상태 변화는 atoms(공유 상태)에서 selectors(순수 함수)를 거쳐 React 컴포넌트로 데이터가 흐른다.

✨ 개념 정리

1. RecoilRoot

RecoilRoot는 Recoil을 연동하기 위해 사용한다. index.tsx 최상단의 컴포넌트를 감싸준다.

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. Atom

Atom은 어떤 컴포넌트에서나 읽고 쓰기가 가능하다. Atom의 값을 읽는 컴포넌트들은 atom을 구독하며, 업데이트가 되면 이를 사용하는 컴포넌트들은 재렌더링 된다. 여러 컴포넌트들이 동일한 atom을 사용하면, 모든 컴포넌트는 상태를 공유한다.

const fontSizeState= atom({
  key: '#fontSizeState',
  default: 14,
});

• key는 고유한 값을 가지고, 전역 상태의 이름을 의미한다.
• default는 전역 상태의 초기 상태를 정해준다.

const [fontSize, setFontSize] = useRecoilState(fontSizeState);
return (
    <button onClick={() => setFontSize((size) => size + 1)} 
style={{fontSize}}>
      Click to Enlarge
    </button>
  );

• 컴포넌트에서 atom을 읽고 쓰려면 useRecoilState 훅을 사용한다.

Selectors

실제 스토어에 저장되고 스토어에서 가져오는 데이터는 atom 기반이지만, 가공된 데이터를 받거나 저장하고 싶을때는 selector를 사용한다. selector는 key와 get,set를 전달하여 작성한다. get은 필수, set은 선택!

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) =>{
   const fontSize = get(fontSizeState);
   const unit = 'px';
    
    return `${fontSize}${unit}`
  },
})

• get은 계산될 함수
• 전달되는 get의 인자를 통해 다른 atom & selector에 접근할 수 있다.

 const fontSizeLabel = useRecoilValue(fontSizeLabelState);

• selector는 useRecoilValue로 읽을 수 있다.

✔️ useRecoilValue은 상태를 읽을 수만 있게 하고 싶을 때 사용