[RECOIL] Selector - set 사용하기

학습일 : 2023. 04. 25

---

지금까지 get만 써봤는데,

이번에는 Selector의 set 기능에 대해 알아보겠다.

---

set은 state를 set하는 것을 도와주는 속성이다.
set함수는 원하는 state가 어떤 것이든지 그것으로 수정하게끔 해준다.

 

 

 

set함수는 첫 번째 argument로 option이라는 object를 주는데,
그건 setRecoilState를 가지고 있다.
두번째 argument는 우리가 보내는 새로운 값을 주고 있다.

array의 첫번째 요소는 get property로부터 return한 값일 것이다.

  const [hours, setHours] = useRecoilState(hourSelector);
 // hours : selector의 get함수의 값,  setHours : set property를 실행시키는 함수

 

 

useRecoilState를 atom으로도 쓸 수 있고, 이처럼 selector로도 쓸 수 있다.

 

 

atom이나 selector로 useRecoilState를 쓸 때
결과 array의 첫번째 item은
atom의 값이거나 selector의 get함수의 값이라는 것을 기억해야 한다.

array의 두번째 item은
atom을 수정하는 함수이거나
selector의 set property를 실행시키는 함수이다.

 

 

 

<App.tsx>
두번째 input에 있는 hours의 값을 바꾸고자 한다. (필요한 것 : onChange, value)
hours의 값을 바꾸려다 보면 onHoursChange 함수가 실행되고
적어줬다시피,
onHoursChange 함수가 실행되면 setHours 함수가 실행될 것이다.
setHours함수는 selector로부터 오는 함수인데
setHours함수는 atom.tsx에 있는 hourSelector의 set 함수를 실행시키게 된다.

import { useRecoilState} from "recoil";
import { hourSelector, minuteState } from "./atoms";


function App() {
  // useRecoilState는 atom의 값과 그 atom을 수정할 수 있는 함수를 줌
  const [minutes, setMinutes] = useRecoilState(minuteState);
  // selector의 set기능
  // useRecoilState를 atom으로도 쓸 수 있고, 이처럼 selector로도 쓸 수 있다
  const [hours, setHours] = useRecoilState(hourSelector);

  const onMinutesChange = (event: React.FormEvent<HTMLInputElement>) => {
    setMinutes(+event.currentTarget.value); //+를 적어주면 string=>number가 됨
  };

  const onHoursChange = (event: React.FormEvent<HTMLInputElement>) => {
    setHours(+event.currentTarget.value); //+를 적어주면 string=>number가 됨
  };

  return (
    <div>
      <input
        value={minutes}
        onChange={onMinutesChange}
        type="number"
        placeholder="Minutes"
      />
      {/* 값을 변경 가능하게 하려면 onChange가 필요하다. */}
      {/* onChange가 없으면 읽기 전용이다. */}
      <input
        onChange={onHoursChange}
        value={hours}
        type="number"
        placeholder="Hours"
      />
    </div>
  );
}

export default App;

<atom.tsx>
set을 작성하는 방법
selector에 <number>를 적어주면 selector가 number를 받는다는 것을 알게된다

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

실행결과
UI상으로 보이진 않지만 값들이 잘 들어가고 있음을 볼 수 있다.
event가 일어나고 있고, 함수가 실행되고 있다.
set property를 가져다가 값을 console에 찍어주고 있단 뜻이다.

---

 

이제 hourSelector에서
minuteState를 수정하고 싶다.

그러기 위해선

 

<atom.tsx>
set 함수 안에서 minutes라는 변수를 만들어주고
hours의 값인 newValue에 60을 곱한 값으로 설정해준다.
그리고 newValue를 number 타입으로 바꾸어주기 위해서

Number안에 newValue를 넣어준다.

 

set 함수를 사용하는법은 아래와 같다.

set(수정하고싶은 recoil atom, 새로운 값)

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함수 사용하기
    set(minuteState, minutes);
  },
});

실행결과 

이제 우린 두 곳 모두에서 값을 설정할 수 있게 되었다.
두 개 각각의 atom을 만들지 않았고
minutes값만 저장해둔 상태에서 이룬 일들이다.

 

 

 

 

- selector에 대한 정리 -
2개의 atom을 만드는 방법을 택하고 싶지 않다면
selector를 사용하면 되겠다.

 

전에 to-do-list를 만들 때를 예로 들자면
하나의 state를 가지고 2개의 property를 가지는 selector를 만들었었다.

 

하나는 get 이었고 이것은 selector의 값을 주는 것이었고

minutes atom의 값을 가져다가 60으로 나눈 값을 리턴하였다.

나머지 하나인 set은 selector의 atom의 값을 set(설정)하도록 하였다.


이렇게 구현해 봄으로 인해
selector도 때때로 수정할 수 있다는 것을 알게 되었다.