#7.0-#7.1 Set Selectors

본 포스팅은 노마드코더의 React JS 마스터클래스를 수강한 뒤 작성되었습니다.

📌 Selector의 set 함수

// App.tsx
import React from "react";
import { useRecoilState } from "recoil";
import { hourSelector, minuteState } from "./atoms";

function App() {
  // 값을 minutes로 받고 ,inutes를 수정할 함수로 setMinutes를 지정
  const [minutes, setMinutes] = useRecoilState(minuteState);
  
  // hourSelecor의 값 가져오기
  const hours = useRecoilValue(hourSelector);
  
  const onMinutesChange = (event:react.FormEvent<HTMLInputElement>) => {
  	setMinutes(+event.currentTarget.value);
    //이렇게 +를 앞에 쓰면, string을 number로 바꾸게 해줌
  }
  
  
  return ( 
    <div>
    	<input 
    		value={minutes} 
			onChange={onMinutesChange} 
			type="number" 
			placeholder="Minutes" 
		/>
    	<input 
			value={hours}
			type="number" 
			placeholder="Hours" 
		/>
  	</div>
  );
}

export default App;

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

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

//여기서 selector를 사용
// selector는 minutes의 값을 가져가지만, minutes/60의 값을 return하고 있음
export const hourSelector = selector({
  key:"hours",
  //get함수는 첫번째 argument로 option이라는 object를 가져옴
  get:({get}) => { 
    //이렇게 하면, 우리가 어떤 값을 hourSelector에서 return 하던지, 그 값은 hourSelector의 값이 될 것
    const minutes = get(minuteState);
    
    return minutes / 60;
  },
});
    

useRecoilState : atom의 값에 더해서 atom을 수정할 함수까지 줌

selector : state를 가져다가 수정한 output을 return하는 것
-> 만약 state가 바뀐다면, selector도 무언가 다른 값을 return하게 되는것

❓ 그래서 set 함수는 무엇인가?

set : state를 set하는 것을 도와주는 속성
-> 위의 코드 상의 atoms.tsx에서 state는 atom을 수정하는 것을 도와주게 되는 것

//위의 atoms.tsx에 있는 hourSelect 함수를 수정한 것
export const hourSelector = selector<number>({
  key:"hours",
  get:({get}) => { 
    const minutes = get(minuteState);
    return minutes / 60;
  },
  
  //우리는 현재 minutes의 state를 수정하고 싶은 것
  set: ({set}, newValue) => {
    const minutes = Number(newValue) * 60;
    set(minuteState, minutes);
  },
});

// 위에 작성했던 App.tsx에 set과 관련되어 추가된 부분 有
import React from "react";
import { useRecoilState } from "recoil";
import { hourSelector, minuteState } from "./atoms";

function App() {
  // 값을 minutes로 받고 ,inutes를 수정할 함수로 setMinutes를 지정
  const [minutes, setMinutes] = useRecoilState(minuteState);
  
  // hourSelecor의 값 가져오기
  // const hours = useRecoilValue(hourSelector);
  const [hours, setHours] = useRecoilState(hourSelector);
  
  const onMinutesChange = (event:react.FormEvent<HTMLInputElement>) => {
  	setMinutes(+event.currentTarget.value);
    //이렇게 +를 앞에 쓰면, string을 number로 바꾸게 해줌
  }
  
  //onHoursChange라는 새로운 함수 생성
  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;