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로 보고있는 값도 리렌더링 된다!
