[ReactTS] Recoil State(상태) 관리

React를 위한 상태 관리 라이브러리이다.

 

* 공식 문서
https://recoiljs.org/ko/docs/introduction/getting-started/

 

* Git Source Code
https://github.com/kangilbin/React.js/tree/master/Recoil

 

 

---

1. 사용방법

// 패키지 설치
npm install recoil

 

import React from "react";
import { RecoilRoot } from "recoil";
import App from "./App";


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

• <RecoilRoot > 컴포넌트로 App을 감싼다. 

 

 

 

---

2. atoms 파일 생성

atoms파일

import { atom } from "recoil";

export const isDarkAtom = atom({
  key: "isDark",
  default: false,  // boolean 
});

• atom(원자)는 기본적으로 2개의 값이 필요하다.
  - key : 고유 식별자
  - default : 기본 값
• atom은 항상 독립적이다.

 

 

---

3. useRecoilValue ( atom 값 가져오기 )

import { useRecoilValue } from "recoil";
import { isDarkAtom } from "./atoms";

function App() {
  const isDark = useRecoilValue(isDarkAtom);
	console.log(isDark) // 최초 기본 값 출력 : false
  ...
}
export default App;

• 원하는 컴포넌트에서 useRecoilValue Hook을 이용해 언제든지 가져올 수 있다.

 

 

 

---

4. useSetRecoilState ( atom 값 수정하기 )

import { useSetRecoilState } from "recoil";
import { isDarkAtom } from "./atoms";


function App() {
    const setDarkAtom = useSetRecoilState(isDarkAtom)  // atom 값
    const toggleDarkAtom = () => setDarkAtom((prev) => !prev)
	return (
		<button onClick={() => toggleDarkAtom }>Toggle Mode</button>
	)
}
export default App;

• useSetRecoilState는 atom을 변경하는 함수를 반환한다. (useState의 setState와 같은 방식)

 

 

 

---

5. useRecoilState ( atom의 값 가져오기, 수정하기 한 번에 사용 )

import { useRecoilValue, useSetRecoilState, useRecoilState } from "recoil";
interface IToDo {
  text: String;
  category: "TO_DO" | "DOING" | "DONE";
}

const toDoState = atom<IToDo[]>({ // IToDo의 배열 임을 알려준다.
  key: "toDo",
  default: [],
});

/* useRecoilValue, useSetRecoilState */
const value = useRecoilValue(toDoState);        // 값 가져오기
const modFn = useSetRecoilState(toDoState);     // 값 수정


/* useRecoilState */
const [value, modFn] =useRecoilState(toDoState) // [값, 수정]

• useState와 같은 구조
• [value, modFn] ⇒ 이름은 중요하지 않지만 순서는 중요 !

 

 

5-1) 사용 예

interface IToDo {
  text: String;
  category: "TO_DO" | "DOING" | "DONE";
}

const toDoState = atom<IToDo[]>({
  key: "toDo",
  default: [],
});


const [toDos, setToDos] = useRecoilState(toDoState);
const { register, handleSubmit, setValue } = useForm<IForm>();

const handleValid = ({toDo}: IForm) => {
  console.log("add to do", toDo);
  
  // 기존 배열에 새로운 배열 추가, 함수의 리턴 값이 새로운 State
  setToDos((oldToDos) => [{text: toDo, category:"TO_DO"}, ...oldToDos])   
};

 

 

 

---

6. Selector

Selector는 Derived State를 나타낸다.
Derived State란, State를 입력받아서 그걸 변형해 반환하는 순수 함수를 거쳐 반환된 값을 말합니다.
즉, Selector는 State를 가져와 조금 변형해주는 함수이다.

 

Selector는 State값을 가져올 때 분류를 하기 위해 사용한다.
전체를 렌더링 하는 게 아니라 각각을 렌더링 하기 때문에 효율적이다.

 

(atmos.ts)

import { atom, selector } from "recoil";

...

export const toDoState = atom<IToDo[]>({
  key: "toDo",
  default: [],
});
export const categoryState = atom({
  key: "category",
  default: "TO_DO",
});
export const toDoSelector = selector({
  key: "toDoSelector",
  get: ({ get }) => { // get 함수가있어야 원하는 atom을 가져올 수 있다.
    const toDos = get(toDoState);
		const category = get(categoryState);
    return toDos.filter((toDo) => toDo.category === category);
  },
});

• get 함수: 인자를 객체로 받는데, 그 객체에는 get function이 들어가 있다. 리턴되는 값은 selector의 value값이 된다.

 

6-1) Selector 값 가져오기

const toDos = useRecoilValue(toDoSelector);
const [category, setCategory] = useRecoilState(categoryState);

• atom파일에서 정의한 Selector를 호출하여 값을 가진다.

 

 

 

---

7. Recoil LocalStorage

로컬에 데이터 저장하기

https://www.npmjs.com/package/recoil-persist

 

7-1) 라이브러리 설치

npm i recoil-persist

 

 

7-2) 사용방법

const { persistAtom } = recoilPersist({
  key: "todoLocal",
  storage: localStorage,
});

export const toDoState = atom<IToDo[]>({
  key: "toDo",
  default: [],
  effects_UNSTABLE: [persistAtom],
});