[React] Recoil Selector의 get, set 사용법

https://sand8594.tistory.com/34

[React] Recoil로 상태 관리 하기

Recoil에 대해선 위의 포스팅으로 다뤄봤지만 selector에 대한 것은 간단하게만 쓰고 넘어갔다.

그래서 selector사용법을 잘 이해가 가지 않아서 추가로 정리해보려고 한다. (get, set 위주로)

 

---

Selector

Selector는 파생된 state(derived state)의 일부를 나타낸다.
즉, 기존 state를 가져와서 이용해 새로운 state를 만들어서 반환할 수 있음

 

 

Get

파생된 상태의 값을 평가하는 함수. 값을 직접 반환하거나 비동기적인 Promise나 또는 같은 유형을 나타내는 다른 atom이나 selector를 반환할 수 있다. 첫 번째 매개변수로 다음 속성을 포함하는 객체를 전달한다

 

Set

이 속성이 설정되면 selector는 쓰기 가능한 상태를 반환한다. 첫번째 매개변수로 콜백 객체와 새로 입력 값이 전달된다. 사용자가 selector를 재설정할 경우 새로 입력 값은 T 타입의 값 또는 DefaultValue 타입의 객체일 수 있다. 콜백에는 다음이 포함된다

 

App.tsx

import React from "react";
import { useRecoilState} from "recoil";
import { hourSelector, minuteState } from "./atom";

function App() {
  const [minutes, setMinutes] = useRecoilState(minuteState)
  const [hours, setHours] = useRecoilState(hourSelector);

  const onMinutesChange = (e:React.FormEvent<HTMLInputElement>) => {
    setMinutes(+e.currentTarget.value); 
    // string값을 number로 바꾸고 싶으면 앞에 +
    // input은 항상 string을 value로 반환함
  }
  const onHoursChange = (e:React.FormEvent<HTMLInputElement>) => {
    setHours(+e.currentTarget.value); 
  }
  return (
    <div>
      <input value = {minutes} onChange={onMinutesChange} type="number" placeholder="Minutes"/>
      <input value = {hours} onChange={onHoursChange} type="number" placeholder="Seconds"/>
    </div>
  );
}

export default App;

 

atom.tsx

import { atom, selector } from "recoil";

export const minuteState = atom({
    key: "minutes",
    default:0
})

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

minuteState의 atom을 생성해서 App.tsx에서 값을 입력받은 것을 hourSelector에서 이용해주었다.

get 함수에선 minuteState의 값을 get(minueState)로 받아와서 그것을 60으로 나눈 값을 리턴해주었고

또한 set함수에서는 hours input에 입력되는 값을 인지한 뒤 newValue 값을 받아 *60을 해주어 minute 값을 리턴하여

set(변하고자하는 atom값 , 변하게 할 값) 을 이용하여 set(minuteState , minutes)를 하였다.