Recoil 가장 기본적인 사용법

난 최근에 React native를 시작해서 그런지 왠만하면 최신 라이브러리를 사용하고 싶더라고~ 그래서 상태 관리 라이브러리도 가장 최근에 나온 Recoil을 사용하고 있어. Redux가 가장 유명한 거 같은데 ㅎㅎ  난 한번도 써본적이 없어. MobX도 마찬가지고. Context도 몰라.

 

상태 관리 라이브러리라고 뭐 거창하게 이름붙여 놨지만 결국 React에서 하위 컴포넌트로 props 계속 넘겨주기 힘드니까 전역 변수 쓸라고 만드는 거 아냐? ㅋㅋ 난 이렇게 이해하고 있어 아니면 알려줘.

 

React 할 줄 알면 Recoil도 크게 어렵지는 않은 것 같아. 약간 useState 훅 사용하는 느낌이랄까?

 

간단하게 사용법을 살펴보자면, 일단 Recoil을 사용하려면 RecoilRoot로 최상위 컴포넌트를 감싸줘야 해. 아래 처럼 말이지.

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

export default function RecoilApp() {
  return (
    <RecoilRoot>
      <App />
    </RecoilRoot>
  );
}

그리고 나면 App component 안에서 Recoil을 사용하면 되는거지. 전역 변수 마냥 아무곳에서나 불러와 사용할 수 있어.

 

예를 들어 User authentication 구현할 때, User가 로그인하면 그 정보 기억해뒀다가 다른 곳에서도 써야 하잖아? 막 프로필 사진이랑 아이디랑 그런거 불러와야 할 때~ 그럴 때 Recoil이 유용하게 사용될 수 있겠더라고. 나도 이곳 저곳에 그렇게 쓰고 있고 ㅎㅎ

 

User 정보를 담는 용도로 Recoil를 사용한다 가정하고 가장 간단한 형태로 구현해보자면!

 

1. RecoilRoot로 최상위 컴포넌트 감싸준다. (위에서 했슝~)

2. Atom이나 selector를 만든다. (변수 같은 느낌이야)

3. 원하는 곳에서 useRecoilState 등등 recoil api 불러와 사용한다. 끝~

 

atom은 쉽게 말하면 전역 변수야. 리액트에서 보자면 전역 state? 같은 느낌?.. 몰라 내가 볼 땐 똑같아.

key하고 default 값 설정해주면 돼. 나는 Recoil 사용이 많아서 파일 하나에 몰빵해놔서 export 해둔거임. 참고~

export const currentUserInfo = atom<FirebaseAuthTypes.User | undefined | null>({
  key: "currentUserInfo",
  default: undefined,
  dangerouslyAllowMutability: true,
});

atom 선언 마지막에 dangerouslyAllowMyutability: true 옵션은.... firebase authentication사용하는데 유저 로그아웃해도 recoil 상태가 안변하더라고 그것 때문에 개고생을 했는데 저거 해주니까 싹 고쳐지더라. 아래는 recoil 사이트 설명인데 아직도 이 개소리가 무슨 소린지 이해가 안돼. -_- 컴포넌트에 제대로 알리지 않고 상태가 변하면 되냐? 어쨋든 이를 방지하기 위해 저장된 모든 값이 변경되지 않는다니... 멍멍멍멍...

 

dangerouslyAllowMutability option

 

암튼 위처럼 atom을 만들었으면 이제 사용하면 되는데 사용법은 React의 useState랑 거의 비슷해.

 

Recoil state, state 변경 함수를 useRecoilState 함수로 할당하고 사용하면 되지.

아래 코드에서 currentUser는 뭐 그냥 상태니까 사용하면 되고 user가 로그인하면 setCurrentUser로 로그인 정보를 저장하면 끝~

const [currentUser, setCurrentUser] = useRecoilState(currentUserInfo);

setCurrentUser(user); // set the recoil state

if(currentUser.uid === author.id) //blar blar

 

 

위에서 처럼 단순히 Recoil울 전역 상태 변수로 사용하려면 그렇게 어렵지 않아. selector 까지도 크게 어렵지 않은 것 같아. 그런데 동기, 비동기, selectorFamily, atomFamily 이런거 문서만 읽다보면 정신이 혼미해짐 ㅋㅋㅋ 적절한 예를 만들어서? 아님 적절한 예가 생길때마다? 설명하는 게 좋을 것 같아.

 

그런데 다들 알겠지만 뭐 배울라면 해당 사이트 문서 읽는 게 가장 좋아 ㅋㅋㅋ (지금은 번역이 좀 구려. 내 대가리로는 좀 이해 못함 ㅋ)

https://recoiljs.org/ko/docs/introduction/getting-started

Recoil 시작하기 | Recoil

 

그리고 아직도 버전이 0.7.2임. 정석 버전이 아니라는 소리지 ㅋㅋ 큰 회사들은 절대 못쓰겠지? 흐 난 그냥 쓸래. 어차피 난 혼자하고 있고 괜히 Recoil 맘에 들어 ㅋㅋ  베타 버전 라이브러리 production에 쓰면서 어떤 개고생을 할 지 모르겠지만 뭐 남는 게 있겠지 ㅋㅋㅋ

Recoil 아직 베타임 ㅋ

 

그러니까 Recoil 조심해서 써 ㅋ 책임은 각자 지는 걸로 하고 ㅋㅋㅋ