🚀 전역 상태관리를 Recoil로 해보자

이제까지 context API를 이용해서 상태관리를 꾸역꾸역 해왔다.
근데 이번 프로젝트에서 next js를 사용하다보니 검색후에 상태값을 유지하지 못하는 일이 발생해서 앞으로는 상태관리 라이브러리를 좀 더 활용해야겠다고 생각'만' 했는데 어쩌다보니 당장 리코일을 써야할일이 들이닥쳤다.

아무튼 그래서 리코일 공부함

01. recoil 설치하기

npm install recoil
yarn add recoil

02. RecoilRoot 씌워주기

리코일도 다른 상태관리 라이브러리들처럼 root(provider 와 같은 느낌)를 씌워주어야한다.
좋은건 따로 store={store} 이런식으로 스토어를 지정해주지 않아도 된다는점

//index.js

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

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
    	<App />
     </RecoilRoot>
  </React.StrictMode>,
  document.getElementById("root")
);

03. Atom

리코일에서는 atom 이라는것을 사용하는데 고유한 key값과 default value 값을 지정해주어야 한다.
atom은 리덕스의 store와 같은 개념이라고 보면 된다.

// atom.js

import { atom, selector } from "recoil";

export const textState = atom({
    key: 'textState',
    default: '',
});

이 atom 을 이용해서 다른곳에서 textState를 전역적으로 사용할수있다.

// 다른 어딘가에 있는 jsx
import { useRecoilValue } from 'recoil';

const textState = useRecoilValue(textState);

04. useRecoilState

리코일의 가장 좋은점이 react와 사용방법이 비슷하다는것이 아닐까 한다.

import { useRecoilState } from 'recoil';

const [text, setText] = useRecoilState(textState);

const onClick = (value) => {
	setText(value + text);
}

여기서 text 는 상태값 setText는 setter 함수이다.

• useRecoilState : atom 값과 setter 함수를 함께 가져와 atom값을 구독하여 업데이트 할수있는 hook
  useState 와 비슷하게 사용된다. [atom 값, setter 함수] = useRecoilState(textState)
• useRecoilValue : atom 값을 반환한다.
• useSetRecoilState : setter 함수만을 반환한다.
• useResetRecoilState : default 값으로 초기화 해주는 함수이다.

05. selector

selector 는 atom의 변화를 구독하면서 해당 atom 을 원하는대로 조작한 결과를 리턴하는 함수이다.

// atom.js

import { atom, selector } from "recoil";

export const textState = atom({
    key: 'textState',
    default: '',
});

export const transfromTextState = selector({
	get: ({get}) => {
    	// 인자로 주어진 get은 다른 아톰을 구독하는 역할을 한다.
      	const text = get(textState);
      
      return text + "!" // 가져온 text 값에 ! 붙은 결과를 리턴한다.
    },
  	// textState 의 값을 newValue로 갱신해준다. 
    set: ({set}, newValue) => set(... textState, newValue)
});

이 selector 를 컴포넌트에서 사용하고 싶을때는 이렇게 사용하면 된다.

import { useRecoilState } from 'recoil';

const [text,setText] = useRecoilState(transfromTextState);
const newTextHandler = () => {
	 setText('새로운 값!');
}

return (
	<>
    	<p>{text}</p> // text!
  		<button onClick={newTextHandler}>새로운 값으로 바꾸기</button>
    </>
)