Recoil | Selector

Selector 

atom의 output을 변형시키는 함수로, atom에 의존하는 동적인 데이터를 만들 수 있게 해준다.

selecter는 get 함수와 set 함수를 사용할 수 있다. selector를 이용해 state를 가져와서 output을 수정할 수 있다. 

 

 

get

get: ({ get }) => {
	// 가져올 내용
	// get(가져올 값)
}

중괄호를 열고 쓰면 get이라는 함수를 다시 불러서 state를 가져올 수 있다. 그러면 어떤 값을 return 하던지 간에 그 값은 selector의 값이 된다. (atom을 가져와서 selector로 변경할 수 있다는 뜻)

get을 사용해 atom과 다른 selector에 접근 가능하다. 종속 관계가 생기므로 참조한 값이 업데이트 되면 해당 함수도 다시 실행된다.

 

set

set: ({ set }, newValue) => {
	// 변경내용
	// set(가져온 값, 변경(return)시킬 값)
}

set 함수는 변경될 새로운 값을 두 번째 인자로  받을 수 있다. 

 

 

 

예제

atom으로 minute를 생성하고, selector로 atom의 값을 가져와서 변경시키는 예제이다. '분'을 입력하면 '시간'으로 바꿔주고, '시간'을 입력하면 '분'으로 바꿔준다.

// atom.tsx

import { atom, selector } from 'recoil';

export const minuteState = atom({
  key: 'minute',
  default: 0,
});

export const hourSelector = selector<number>({
  key: 'hours',
  get: ({ get }) => {
    const minutes = get(minuteState);
    return minutes / 60;
  },
  set: ({ set }, newValue) => {
    const minute = Number(newValue) * 60;
    set(minuteState, minute);
  },
});

// App.tsx

import React from 'react';
import { useRecoilState, useRecoilValue, useRecoilValueLoadable } from 'recoil';
import { hourSelector, minuteState } from './atom';

function App() {
  const [minutes, setMinutes] = useRecoilState(minuteState);
  const [hours, setHours] = useRecoilState(hourSelector);
  const onMinutesChange = (event: React.FormEvent<HTMLInputElement>) => {
    setMinutes(+event.currentTarget.value);
  };
  const onHoursChange = (event: React.FormEvent<HTMLInputElement>) => {
    setHours(+event.currentTarget.value);
  };

  return (
    <div>
      <input
        value={minutes}
        onChange={onMinutesChange}
        type="number"
        placeholder="Minutes"
      />
      <input
        value={hours}
        onChange={onHoursChange}
        type="number"
        placeholder="Hours"
      />
    </div>
  );
}

export default App;

 

추가로 알게된 부분

string에 연산자 +를 붙이면 number로 형 변환이 가능하다.