[리액트] Recoil 상태 관리 라이브러리 2

이번주 동안 마이 프로필 페이지를 만들면서 recoil을 사용해 볼 수 있는 기회가 많았다.

그래서 이번주에 알게된 recoil에 관련된 새로운 것들을 정리해 볼 예정이다.

파일로 관리하기

recoil은 전역으로 관리하기 때문에 어떤 컴포넌트든 import하기 간편한 곳에 위치해 있어야 하며 관련된 파일로 모아놔야 유지보수에 용이하다.

선언

• src폴더 하위에 state폴더를 생성한다.
• state폴더 안에 관련된 reocil을 모아둘 파일을 만든다. ex)user 정보 recoil을 모아두는 users.js 파일
• 다른 곳에서 값을 import해서 초기값을 설정할 수도 있다. ex)getCookie
• 초기값을 객체 형태로 사용할 수도 있다.

//users.js
import { atom } from "recoil";
import { getCookie } from "../utils/cookie";

export const accountImgState = atom({
  key: "accountImgState",
  default: getCookie("user_img"),
});

export const accountNameState = atom({
  key: "accountNameState",
  default: {
    lastName: "홍",
    firstName: "길동",
  },
});

이런식으로 선언을 해주었다면 이제 호출을 할 차례이다.

호출

recoil의 값을 불러오거나 업데이트 하거나 하기위해서 recoil에서 제공하는 hook을 사용해야 한다.

• useRecoilState: useState와 같다고 생각하면 된다.
  값을 불러올 수 있고, 값을 업데이트 하는 함수다.
• useSetRecoilState: 값을 업데이트만 하는 함수다.
• useRecoilValue: 값을 불러오기만 하는 함수다.
• useResetRecoilState: 값을 초기화 하는 함수다.

위의 hook들은 아래 처럼 사용하면 된다.

• 사용할 hook과 atom을 import한다.
• 사용할 hook을 호출하고 인자로 atom을 넣어준다.

import { useRecoilState, useSetRecoilState, useRecoilValue, useResetRecoilState } from "recoil";
import { accountNameState } from "../../../states/users";

const [accountName, setAccountName] = useRecoilState(accountNameState);
const setAccountName = useSetRecoilState(accountNameState);
const accountName = useRecoilValue(accountNameState);
const resetName = useResetRecoilState(accountNameState);

객체 atom 업데이트

위에서 말했듯이 초기값을 객체 형태로도 할 수 있다했는데 업데이트 할 때 주의할 점이 있다.

export const accountNameState = atom({
  key: "accountNameState",
  default: {
    lastName: "홍",
    firstName: "길동",
  },
});

2개의 프로퍼티가 있는데 만약 하나의 프로퍼티만 업데이트한 뒤 값을 불러온다면 업데이트된 프로퍼티 1개, 초기값인 프로퍼티 1개가 반환되는 것이 아니라 업데이트된 프로퍼티만 반환을 하게된다.

setAccountName( {firstName: "길순"} )

console.log(accountName) 
// {firstName: "길순"} ✅
// {lastName: "홍",firstName: "길순"}❌

마치며

props, state의 한계를 recoil로 전부 해결할 수 있어서 너무 좋았고 작업 속도 또한 굉장히 빨라졌다. 앞으로 꾸준히 계속 사용할 것 같다!