[Recoil] Atom, Selector

Lenny·2022년 6월 21일
0

Recoil 라이브러리를 사용할 때 알아야하는 중요한 개념 두가지가있다.

그것은 바로 Atom, Selector 라고 불리는 것들인데, 우리가 리액트에서 state를 관리할 때 사용하는 useState 훅과 구조가 상당히 비슷하고, 개념도 비슷하다.

그래서 이해하기도 사용하기도 쉽다 👍

그러면 차례대로 알아보장.

Atom

Atom이라는 개념은 정말 간단하다.
Recoil의 시작이라고 할 수 있는 개념이다.

쉽게 말해서 state 라고 생각하면 된다.

atom 생성하는 법은 엄청 간단함.

import {atom} from "recoil";

const anyState = atom(
  {
    key: "any"
    default : 기본값
  })

key는 말 그대로 이 atom의 키값을 나타내고 유일해야함, default 는 초깃값을 의미한다.

우리 리액트에서 useState 쓸 때도 초깃값 처음에 설정할 수 있었던거랑 똑같음.

사실 atom은 이게 끝이라고 봐도 무방하다.

그러면 이렇게 만든 atom을 어떻게 불러 올 수 있을까? 🤔

불러오는것도 매우 쉽다.

useRecoilValue

우선 첫번째 방법은 useRecoilValue 함수를 사용하는것이다.

이것으로 말할것같으면 Recoil 에서 제공하는 atom을 불러오는 함수임!!

import { useRecoilValue } from "recoil";

const myState = useRecoilValue(anyState); // 위에 나온 anyState 라고 가정

console.log(myState); // default에 설정한 값 출력됨

요렇게 사용함. 그러면 anyState atom에 저장된 값을 변수에 저장할 수 있음!

근데 의문이 들거임. 그러면 Set은 어떻게하냐는 의문이 들거임.

그래서 또 다른 함수가 있음.

이 함수는 useState랑 흡사한 함수임!

useRecoilState

얘는 useState랑 똑같은거라고 생각하면 된다.

import {useRecoilState} from "recoil";

const [myState, setMyState] = useRecoilState(anyState);

오 쒯..! 모양부터 견적이 잡히지않나?

myState 는 현재 State값이 저장되있는 녀석이고, setMyState는 State를 Set할 수 있게 하는 함수다.

더 이상 자세한 설명은 생략한다. 쵸-간단데스네.

이제 다음으로 알아볼것은 Selector 라고 하는 개념인데 이게 아주 물건임.

바로 들어감

Selector

이건 Atom이랑 비슷하게 활용할 수 있는건데 derived state 라고, 뭐 파생된 상태 어쩌고 저쩌고 하는데 간단하게 설명하면 원래 state에 변화를 주지 않고 변화된 값을 리턴할 수 있음

예를들어 현재 state값이 1이면 selector를 거쳐서 화면에 2로 출력되게 할 수 있는데 현재 state는 1이라는 값 그대로인거다.

코드를 보면 금방 이해가 될 것임.

먼저 Selector 만드는 코드는 다음과 같다.

import {selector} from "recoil";

const anySelector = selector(
  {
    key: "any2", // atom 만들때 key 값 정했던것처럼 얘도 똑같음.
    ...
    ...
    
  });

Selector 도 Atom과 비슷하게 이런식으로 만드는데 Selector 는 조금 다른게있다.

위 코드블럭에서 ... ... 이라고 표시 해놓은 이유이다.

일단 get, set 이라는 옵션이 존재한다.

코드블럭에 한꺼번에 써놓고 설명하도록 하겠음.

import { atom, selector } from "recoil";

const anyState = atom(
  {
    key: "any"
    default : 0
  })

const anySelector = selector({
	key: "any2",
    get: ({ get }) => {
    	const anyValue = get(anyState); // get으로 State에 저장된 값을 가져 올 수 있다.
      return anyValue + 1;
    },
    set: ({ set }, newValue) => {
    	const anyValue2 = Number(newValue) + 10;
      	set(anyState, anyValue2); // anyState에 anyValue2를 Set해라. 라는 의미
    }
})

샘플 코드의 생김새는 이러하다.

보면 get , set 이라는 속성들이 보이는데 바로 설명 드가도록 하겠다.

get

get은 코딩 짬밥좀있다면 이름만 보고도 바로 유추할 수 있다.
말 그대로 get이다.

get 속성은 get 이라는 함수를 사용할 수 있게 해준다.

get: ({ get }) => {}

그리고 get은 state의 값을 가져오는데 사용한다.

get: ({ get }) => {
  const anyValue = get(anyState); // 0
  return anyValue + 1;
}

그리고 밑에보면 anyValue에 1을 더하여 리턴하고있다.

Selector 도 Atom 처럼 앱에서 사용하려고 만든거다.
Selector 도 useRecoilValue 를 사용하여 값을 받아올 수 있거덩.

import { useRecoilValue } from "recoil";
import { anySelector } from "./atoms"; // Selector가 만들어진 파일명을 atoms라고 가정하자.

const anys = useRecoilValue(anySelector);

console.log(anys);

출력값은 1 이 출력된다.

anyValue + 1 을 리턴했으니까, 그 값이 출력되는거임!

set

set도 비슷하다.
set 속성은 set 이라는 함수를 사용할 수 있게 해주고, set 함수는 state를 바꾸는 능력을 가지고있다.

    set: ({ set }, newValue) => {
    	const anyValue2 = Number(newValue) + 10;
      	set(anyState, anyValue2);
    }

근데 여기보면, 두번쨰 인자로 newValue라는것을 받는다.

말로 설명하기 어려우니 코드로 바로 가자.

import { useRecoilState } from "recoil";
import { anySelector } from "./atoms";

const [anys, setAnys] = useRecoilState(anySelector); 
// Selector를 대상으로 useRecoilState 함수 역시 사용할 수 있다.

const onChangeAnys = () => {
	setAnys(5);
}
...
...

요런 코드가있고, onChangeAnys 함수를 아래에서 호출한다고 가정하자.
그러면 onChangeAnys 안에있는 setAnys 함수도 실행되겠징? 근데 이 안에 5라는 숫자가있다.

이 5 라는 숫자가 위의 newValue 인자로 들어가는거다.

그러면 anyValue2 는 15라는 값이되고,

아래의 set(anyState, anyValue2)는

anyState의 값을 anyValue2 값으로 바꿔라.

라는 의미이다.

그러면 위 코드에서 anys를 출력했을때 우리가 볼 수 있는 값은 15가 될 것이다.

setAnys(5) -> selector의 set함수 발동! -> 내부에서 처리처리 -> anys확인 -> 결과는 15

뭐 이런 흐름이 될것이다!


간단하게 Atom, Selector 개념에 대해 내가 이해한 방식대로 정리해보았다!

아 그리고, 추가로 적어놓을게 있다면 👇

Selector는 Atom에서 어찌됬든 파생된 형태이기때문에, atom 값이 변하면 selector로 보고있는 값도 리렌더링 된다!

profile
🧑‍💻

0개의 댓글