TRELLO Clone #1 GET/SET Selector

Recoil

• Recoil 의 기본적인 복습내용은 여기
• 오늘은 GET Selector, SET Selector 에 대해 파볼 시간

GET Selector

• 간단 예시로, 각각 'minutes', 'hours' 의 값을 갖는 input 두개를 만들고
  'minutes' 에 60을 적으면 'hours' 에 1이 표시되도록 만들 것

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

--- App.tsx

function App() {
  const [minutes, setMinutes] = useRecoilState(minuteState);
  const hours = useRecoilValue(hourSelector);
    // → selector 나 atom 의 값만 return 
  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>
  );
}
  

• input 과 selector 를 연결하고,
  selector 는 minutes 의 값을 가져와 60으로 나눈 값을 return!

• 만약, hours 자리에 1을 넣으면 minutes 에 60이 나오도록 만들어야 한다면?

SET Selector

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

• 사용 방법

const proxySelector = selector({
  key: 'ProxySelector',
  get: ({get}) => ({...get(myAtom), extraField: 'hi'}),
  set: ({set}, newValue) => set(myAtom, newValue),
});

• get 매개변수는 다른 atom 이나 selector 를 가져와 값을 찾는데 사용되고,
• set 매개변수는 첫번째에서 recoil state 를 가져온 뒤, 두번째 매개변수 자리에 새로운 값을 넣어줘 기존 값을 새로운 값으로 수정해준다.

-- atoms.tsx

import { atom, selector } from "recoil";

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

export const hourSelector = selector<number>({
  // → 타입스크립트가 hours 의 값을 모르기 때문에, number 만 return 한다고 알려주기
  key: "hours",
  get: ({ get }) => {
    const minutes = get(minuteState);
    return minutes / 60;
  },
  set : ({ set }, newValue) => {
  	const minutes = Number(newValue) * 60
    set(minuteState, minutes)
  }
});

--- App.tsx

function App() {
  const [minutes, setMinutes] = useRecoilState(minuteState);
  const [hours, setHours] = useRecoilState(hourSelector);
   // → get property 로부터 return 한 값, set propterty 를 부르는 함수
  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 
        onChange={onHoursChange} 
        value={hours} 
        type="number" 
        placeholder="Hours" 
       />
    </div>
  );
}
  

• 이렇게 하면, minutes input 자리에 60 을 입력하면 hours 자리에 1 이 나오고,
  반대로 hours 자리에 1 을 입력하면 minutes 에 60 이 나오게 완성!