Til (2023.02.14)

Recoil

 

recoil은 전역으로 state를 조금 더 간편하고 이동할때 다양한 변형을 가능할 수 있게 해주는 라이브러리다.

 

리코일은 따로 atom.js를 만들어서 전역 state관리에 사용하게 된다.

atom은 기본적으로 아래 처럼 atom 선언을 해준 후 키값, 기본값을 사용해 만들게 된다.

import { atom } from "recoil";

export const LayoutButton = atom<String>({
  key: "Layout",
  default: "close",
});

export const friendAllState = atom<FriendSearchProps[]>({
  key: "friendAllState",
  default: [],
});

아톰에 위와 같이 만들어 준 후 사용법은 간단하게 아래 세가지를 이용해서 활용할 수 있다.

useRecoilState는 usestate와 같이 오른쪽 변수set으로 값을 변경할 수 있고 왼쪽 변수로 값을 가져올 수 있다.

useRecoilValue는 변수를 한가지만 선언 후 값을 바꿀 수는 없고 값을 가져오기만 할때 사용한다.

useSetRecoilState은 반대로 한가지 변수만 선언 후 값을 가져올 수 는 없고 값을 바꿀때만 사용한다.

import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";

const [layoutMenu, setLayoutMenu] = useRecoilState<String>(LayoutButton);
const [layoutMenu] = useRecoilValue<String>(LayoutButton);
const [setLayoutMenu] = useSetRecoilState<String>(LayoutButton);

그리고 selector란 개념이있는데 atom.js안에서 컴포넌트에서 set으로 만든 값들을 가지고 다른 값을 만들 수 있다.

예를 들어 atom에 추가로 selector를 import해준 후 selector로 선언해 준다.

그리고 똑같이 key값을 만들고 get이란게 있다.

get을 사용해 atom의 다른 값에 접근할 수 있다.

그후 데이터를 filter등으로 바꾼 후 다시 변수로 선언 해줄 수 있다.

이렇게되면 get으로 가져온 값이 바뀔때마다 자동으로 selector의 값도 바뀌게 된다.

이렇게 만든 값은 useSetRecoilState나 useRecoilState로 바꿀 수 없고 useRecoilValue로 가져와서 사용만 할 수 있다.

import { atom, selector } from "recoil";

export const getFriend = atom<any>({
  key: "friendAddState",
  default: [],
});

export const newFriendAdd = selector({
  key: "newFriendAdd",
  get: ({ get }) => {
    const friendAddAll = get(getFriend);
    const completed = friendAddAll.filter((i: any) => i.friendId === myId);
    return [completed];
  },
});

그외로 set이라는 개념이 있다.