Recoil

React의 공식 상태관리 라이브러리는 아니지만,
현재 페이스북의 리액트를 개발한 팀에 의해 제작되고 출시.

 

주요 개념

Atoms

• Atoms는 recoil에서 상태의 단위를 의미하고 업데이트와 구독이 가능하다.

Selectors

• Selector는 atoms나 다른 selectors를 입력으로 받는 순수함수이다.
• 최소한의 상태 집합만 atoms에 저장하고, 파생 데이터는 selector에서 계산하면서 불필요한 상태를 만들지 않는다. ex) 국어, 영어 점수를 atoms에 저장, 총점이나 평균은 selector에서 계산 후 get

 

recoil 설치

npm install recoil

 

# index.js

1. recoil 관련 import 

2. 사용할 곳을 <RecoilRoot> 로 감싼다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
);

 

# atom.js

사용할 전역 변수 만들기

고유의 값인 key설정, 기본값(default)을 설정한다.

import { atom, selector } from "recoil";

const user = atom({
    key: 'user',
    default: 'kim',
});

export {user}

 

# Home.js

1. useRecoilState()로 전역변수 사용

2. useResetRecoil()로 초기화

import { useState } from "react";
import {useRecoilState, useResetRecoilState} from 'recoil'
import { user } from '../atom';


const Home = () => {

    const [userName, setUserName] = useRecoilState(user);
    const resetUserName = useResetRecoilState(user);

    const changeNameBtn = () => {
        setUserName('lee')
    }
    const resetNameBtn = () => {
        resetUserName()
    }

    
    return (
        <>
            <h1>{userName}</h1>
            <div>
                <button onClick={changeNameBtn}>lee로 이름변경</button>
            </div>
            <div>
                <button onClick={resetNameBtn}>이름 reset</button>
            </div>
        </>
    )
}

export default Home;

 

useRecoilState()

useState() 와 사용법이 비슷하며 state를 변경하면 구독하고있는 컴포넌트들은 모두 갱신되어 re-render된다.

 

아래와 같이 useRecoilValue() 와 useSetRecoilState()로 나눌 수 있는데, 합한 두개가 useRecoilState()와 같은 역할을 한다.

const [userName, setUserName] = useRecoilState(user);
// 이것은

const userName = useRecoilValue(user);
const setUserName = useSetRecoilState(user);
// 와 같다.

 

selector()

atom의 데이터로 비동기 로직을 처리한다. 이때 selector는 순수함수이다.

• key : selector를 구분할 수 있는 유일한 id, 즉 key 값을 의미합니다.
• get : 에는 derived state 를 return 하는 곳 입니다.x
• set : writeable 한 state 값을 변경할 수 있는 함수를 return 하는 곳 입니다. 여기서 주의할 점은, 자기 자신 selector를 set하려고 하면, 스스로를 해당 set function에서 set하는 것이므로 무한루프가 돌게 되니 반드시 다른 selector와 atom을 set하는 로직을 구성해야 합니다. 또한 애초에 selector는 read-only한 return 값(RecoilValue)만 가지기 때문에 set으로는 writeable한 atom의 RecoilState만 설정할 수 있습니다.

읽기 전용 selector()

export const callNameState = atom({
    key: 'callNameState',
    get: ({get}) => {
        const userCallName = get(userName);
        const sir = '님';

        return (`${userCallName} ${sir}`);
    },
});

export const userCallButton = () => {
    const [userName, setUserName] = useRecoilState(user);
    const callNameState = useRecoilValue(callNameState);
    
    return (
        <>
            <div>환영합니다. {callNameState}.</div>
        </>
    )
}

양방향 selector()

읽고 쓰기가 모두 가능한 selector이며, useRecoilState() 사용이 가능하다.

 

(아직 작성중)