TRELLO CLONE(1) - Selector get & set

5주차 과제: 노마드코더 React JS 마스터클래스 수강

Selector

Get

get함수는 첫번째 argument로 option이라는 object 가져옴! get함수에서 get함수를 재호출해서 state를 가져올 수 있다.

Selector안에서 atom에 접근하고 싶다면 get함수를 이용하면 됨.

예를 들어

<atoms.tsx>
  
import { atom, selector } from "recoil";

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

export const hourSelector = selector({
  key:"hours",
  get: ({ get }) => {
    const minutes = get(minuteState);
    return minutes / 60;
  },
});

이런식으로 작성해주면 hourSelector는 minuteState라는 atom에 접근해있는 상태가 된다.

<App.tsx>
  
import { useRecoilState, useRecoilValue } from 'recoil';
import { hourSelector, minuteState } from './atoms';

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

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

export default App;

이제 이렇게 App을 작성해주면 minutes input에 숫자 입력 시 그 입력값을 시간단위로 변환해서 hours input에 출력해주는 프로그램이 완성된다.

그럼 이번에는 반대로 hours를 입력해서 minutes 단위로 출력받아보자.

---

Set

Selector의 set함수에 대해 알아보자.
Set은 원하는 state가 어떤 것이든 그걸로 수정되게끔 만들어준다.

그러면 앞서 말했듯이 hours input이 minutes atom을 수정하는 역할을 하도록 만들어보자!

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

set함수는 첫번째 argument로 option이라는 object를 준다.
두번째 argument는 우리가 보내는 새 값을 주면 된다.


그리고 이번엔 useRecoilValue가 아닌 useRecoilState를 사용한다.
그러면 결과값으로 array를 받겠지?!

우리 코드의 경우 array의 첫번째 요소는 get property로부터 return한 값이고 두번째 요소는 set property를 부르는 함수이다.


이제 추가로 시간을 바꿔주는 함수를 만들어서 hours input과 연결시켜주자.

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);
  },
});

atoms.tsx로 돌아와서 이렇게 set함수를 구성해주면 끝난다.

minutes에 input에 입력한 값을 받아와서 60을 곱해주고 set함수를 다시 불러서 우리가 수정하고자 하는 minuteState에 새로운 값인 minutes를 넣어주는 것이당.

---