Recoil

https://www.notion.so/Recoil-dfe0e9475a3144eeacf1f51e2c2267ec#08e1c5fe174044cbb4ca88a806b19e55

 

 

Recoil이란?

Redux와 비슷한 상태 관리 라이브러리로 사용되고 있으며 처음 사용하기 복잡한 Redux와 다르게 React hook과 유사한 구조를 가져 Recoil 상당히 쉽습니다.

 

용어

 

atom

기존의 redux에서 쓰이는 store 와 유사한 개념으로, 상태의 단위로 설명되곤 합니다

 

기본적인 atom의 구조는 유니크한 키값과 default값을 가지게 되며 한가지 상태를 관리하기 위해 한가지 atom이 만들어지게 됩니다

 

상태 불러오기(useRecoil...)

 

상태를 가져올 때는 만들어뒀던 atom을 import 시켜 사용하면 되고 기본적인 구조는 아래와 같습니다

const [dark, setDark] = useRecoilState(isDarkAtom);

const dark = useRecoilValue(isDarkAtom);
const setDark =useSetRecoilState(isDarkAtom);

 

Selector

atom을 받아서 그 atom을 변형시킨 상태로 리턴해줍니다. 쉽게 말해 atom을 가져가 따로 데이터들을 변경시키지 않고 상태를 불러올 때 설정한대로 모습을 변형시켜서 반환한다.

import { atom, selector } from "recoil"
import ToDo from "./ToDo";

export interface ITodo {
    text:string;
    id:number,
    category: "TO_DO" | "DOING" | "DONE"
}

export const toDoState = atom<ITodo[]>({
    key:"todo",
    default:[],
})

//selector key와 get.. get으로 state를 불러온다
//그 불러온 state는 구독상태로 되어있다
export const toDoSelector = selector({
    key:"toDoSelector",
    get: ({get}) => {
        const toDos = get(toDoState)
        return [toDos.filter(toDo => toDo.category === 'TO_DO'),
                toDos.filter(todo => todo.category === "DOING"),
                toDos.filter(todo => todo.category === "DONE")];
    }
})

import { atom, selector } from "recoil";

export const minutesState = atom({
    key:"minutes",
    default:0
})

export const hoursSelector = selector<number>({
    key:"hours",
    get : ({get}) => {
        const minutes = get(minutesState);
        return minutes / 60;
    },
    set: ({set}, newValue) => {
        const mintues = Number(newValue) * 60;
        set(minutesState, mintues)
    },
})

get을 통해 자료 형태를 원하는 대로 설정하고 그것을 리턴시킬 수 있고 저장시킬때도 마찬가지로 원하는 구조로 변경시켜 저장하도록 따로 설정할 수 있다