React Recoil 상태관리 (atom, selector, useRecoilValue(), useRecoilState())

전에 내가 구독하고 있는 분의 블로거에서 Recoil 에 관한 내용을 본 적이 있다. 지금 우리 프로젝트에는 redux를 이용한 상태 관리 밖에 없었기에 나중에 기회가 되면 한번 써보고 싶었다.

https://merrily-code.tistory.com/

 

생각보다 빨리 Recoil을 이용한 상태관리를 알아둬야 할 일이 생겼기에 한번 간단한 계산기를 이용해 구현해보자.

Recoil은 우선 Redux 보다 세팅이 훨씬 간편하다. 앞으로 나도 리액트를 이용해서 스크래치로 프로젝트 시작할 일이 있으면 Recoil을 한번 이용해볼 생각이다. 

 

 

npm install recoil

 

 

설치해준 뒤에 root 컴포넌트에서 RecoilRoot 로 감싸주기만 하면 된다. 

 

import React from 'react';
import ReactDom from 'react-dom'
import App from './App';
import {RecoilRoot} from 'recoil';


ReactDom.render(
<RecoilRoot>
<App />
</RecoilRoot>,
document.getElementById('root'));

 

redux, context api 처럼 루트컴포를 감싸주는 것은 똑같지만 Recoil은 큰 설정은 이게 벌써 끝이다. 

 

우선 카운트 값을 상태관리 값으로 설정해주려면

 

import {atom,useRecoilState} from 'recoil';

const counterState = atom({
    key:"counterState",  // 식별 해줄 키값!!
    default:0  // 기본값!! 
});



const App =() => {

    const [count, setCount] = useRecoilState(counterState);  // useState 와 비슷해서 좋다

    const increment = () => {  
        setCount(count +1);
    }

    const decrement = () => {
        setCount(count -1);
    }

    return (<>
            <p>Count : {count}</p>
            <button onClick={()=> increment()}>Increment</button>
            <button onClick={()=> decrement()}>Decrement</button>
    </>
    )
    
    export default App;

 

 

이렇게 recoil의 atom(전역상태)을 이용해서 간단히 카운터를 만들어 보았는데 이제 관리되고 있는 전역상태의 값을 이용해보자. 애초에 다른 컴포넌트에서도 드릴링 없이 쓸 수 있게 하기 위해 전역값으로 상태관리를 해주고 있는데 한번 컴포넌트를 만들어서 이용해보자.

 

App.js 

////

import './App.css';
import {atom, useRecoilState,selector,useRecoilValue} from 'recoil'
import OtherCount from './component/OtherCount';

const counterState = atom({
    key:"counterState",
    default:0
});

const x2Selector = selector({
    key:'x2Selector',
    get:({get}) => {
        const count = get(counterState)

        return count * 2;
    }
})

const App =() => {

    const [count, setCount] = useRecoilState(counterState);
    const doubleCount = useRecoilValue(x2Selector);

    const increment = () => {
        setCount(count +1);
    }

    const decrement = () => {
        setCount(count -1);
    }

    return (<>
            <p>Count : {count}</p>
            <p>DoubleCount : {doubleCount}</p>
            <OtherCount />
            <button onClick={()=> increment()}>Increment</button>
            <button onClick={()=> decrement()}>Decrement</button>
    </>
    )
}

export default App;

 

 

OtherComponent

import React from 'react';
import {atom, selector,useRecoilValue} from 'recoil';


const counterState = atom({
  key:"counterState",
  default:0
});

const y2Selector = selector({
  key:'y2Selector',
  get:({get}) => {
      const count = get(counterState)

      return count / 2;
  }
})

const OtherCount = () => {
  
  const halfCount = useRecoilValue(y2Selector);
  return (
    <>
    <div>
      {halfCount}
    </div>
    </>
  )
}

export default OtherCount;

 

 

selector에 관해 설명하자면 특정 아톰의 변화를 구독하면서, 해당 아톰을 원하는 대로 조작한 결과를 리턴하는 순수 함수인데 쉽게 말해 redux의 useSelector라고 보면 되겠다. 

 

useRecoilValue()를 이용해 최종적으로 컴포넌트에 사용하면 되겠다.

useRecoilValue()는 readonly state로 따로 값에 변화를 주지 않고 읽기전용으로 사용 할 때 쓰면 되겠다. 

 

 

.