Recoil Selector

📋 Selector

기존에 선언한 atom을 전/후 처리하여 새로운 값을 리턴하거나 기존 atom의 값을 수정하는 역할을 수행한다.
참조한 atom의 값이 최신화되면 자동으로 selector의 값도 최신화하므로, 관리하기에도 간편하다.

get

키값으로 selector를 구분할 수 있는 id인 key, selector의 value를 반환하는 get 함수가 필요하다.

selector의 요점은 get function을 통해 atom을 가져와 상태를 변형하는 것이다.

get 함수는 options라는 인자를 받으며 호출되는데 options는 객체로 내부에 get function이 들어있다.

객체 내부의 get function을 사용해 selector 내부로 atom을 갖고 올 수 있는 것이다.

아래 코드를 설명하자면 get()을 통해 atom을 가져옴으로써 seletor는 atom을 보고 있는 상태가 된다.

atom이 변경되면 seletor 또한 변하게 되는 것이다.

리턴된 selecor 값을 확인하는 방법은 useRecoilValue()를 사용하면 된다.

set

쓰기 가능한 상태를 반환한다.

state를 특정 값으로 수정할 수 있도록 도와주는 것이다.

첫 번째 매개변수는 state를 수정할 set function, 두 번째 매개변수는 새로운 값을 나타내는 newValue 이다.

atom과 동일하게 useRecoilState를 selector로 쓰고 있다면 결과 값으로 배열을 받게 된다.

첫 번째 요소는 get function으로 부터 리턴한 값이며, 두 번째 요소는 selector의 set property를 실행시키는 set 함수가 된다.

atom, selector 모두 useRecoilState를 통해 값 수정이 가능한 것이다.

분은 시간으로, 시간은 분으로 변환시켜주는 프로그램이 있다고 가정해보자.

분과 시간을 입력할 input 태그와 입력값의 value로 사용하기 위한 atom을 정의해주었다.

// 입력값 state
import { atom } from "recoil";

export const minuteState = atom<number>({
  key: "minute",
  default: 0,
});


// 분 -> 시간, 시간 -> 분 변환
export const convertMinuteSelector = selector<number>({
  key: "minuteToHour",
  get: ({ get }) => {
    const minute = get(minuteState);

    return minute / 60;
  },
  set: ({ set }, newMinute) => {
    const minute = Number(newMinute) * 60;

    set(minuteState, minute);
  },
});

위 예제 코드를 보면 set function의 두번 째 인자로 newValue를 사용할 수 있다.

입력값을 newValue로 받아 사용할 수 있는 것이다.

참고

노마드코더