[Recoil] 잘 알고 쓰자 ! 리코일 ! (1)
리코일 공식문서를 보고 작성합니다 !
RecoilRoot
리코일 모든요소는 RecoilRoot내에 작성해야함. 최상위 컴포넌트에서 혹은 필요한 부분에서 감싸주기
atom
recoil의 상태를 표현하기 위해 사용한다. RecoilState 객체를 반환한다.
import {atom} from 'recoil';
const counter = atom({
key: 'myCounter',
default: 0,
});
useRecoilState
리코일 공식문서에도 언급되었다 싶이, recoil은 react스럽다.
useRecoilState는 atom을 읽고 쓰려고 할때 사용한다.
import {atom, useRecoilState} from 'recoil';
const counter = atom({
key: 'myCounter',
default: 0,
});
function Counter() {
const [count, setCount] = useRecoilState(counter);
const incrementByOne = () => setCount(count + 1);
return (
<div>
Count: {count}
<br />
<button onClick={incrementByOne}>Increment</button>
</div>
);
}
useResetRecoilState
atom을 초깃값으로 초기화 할때 사용한다
import {atom, useRecoilState, useResetRecoilState} from 'recoil';
const counter = atom({
key: 'myCounter',
default: 0,
});
function Counter() {
const resetCount = useResetRecoilState(counter)
const [count, setCount] = useRecoilState(counter);
const incrementByOne = () => setCount(count + 1);
return (
<div>
Count: {count}
<br />
<button onClick={incrementByOne}>Increment</button>
<button onClick={resetCount}>Reset</button>
</div>
);
}
useRecoilValue
atom을 읽기만 할 때 사용한다. 업데이트는 필요하지 않지만 상태값만 필요할 때 사용한다.
import {atom, useRecoilValue } from 'recoil';
const counter = atom({
key: 'myCounter',
default: 0,
});
function Counter() {
const count = useRecoilValue(counter);
return (
<div>
Count: {count}
</div>
);
}
useSetRecoilState
상태값은 필요없지만 업데이트 함수만 필요한 경우에 사용한다.
import {atom, useRecoilState, useResetRecoilState} from 'recoil';
const counter = atom({
key: 'myCounter',
default: 0,
});
function Counter() {
const setCount = useSetRecoilState(counter);
const addCount = () => setCount((prev) => prev + 1);
return (
<div>
<button onClick={addCount}> + </button>
</div>
);
}
Selector
selector는 recoil에서 관리하는 상태의 특정 부분만 선택 사용하게 해준다.
selector는 최소한의 상태 집합만 atoms에 저장하고, 다른 파생된 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지한다.
- get 함수만 제공되면 Selector는 읽기만 가능한 RecoilValueReadOnly 객체를 반환한다.
get함수에 의존하고 있는 상태의 값이 변경되면, selector도 다시 평가된다. - set 함수만 제공되면 Selector는 쓰기 가능한 RecoilState 객체를 반환한다.
import {
atom,
selector,
useRecoilState,
DefaultValue,
useResetRecoilState,
} from "recoil";
const tempFahrenheit = atom({
key: "tempFahrenheit",
default: 32,
});
const tempCelcius = selector({
key: "tempCelcius",
get: ({ get }) => ((get(tempFahrenheit) - 32) * 5) / 9,
set: ({ set }, newValue) =>
set(
tempFahrenheit,
newValue instanceof DefaultValue ? newValue : (newValue * 9) / 5 + 32
),
});
function TempCelcius() {
const [tempF, setTempF] = useRecoilState(tempFahrenheit);
const [tempC, setTempC] = useRecoilState(tempCelcius);
const resetTemp = useResetRecoilState(tempCelcius);
const addTenCelcius = () => setTempC(tempC + 10);
const addTenFahrenheit = () => setTempF(tempF + 10);
const reset = () => resetTemp();
return (
<div>
Temp (Celcius): {tempC}
<br />
Temp (Fahrenheit): {tempF}
<br />
<button onClick={addTenCelcius}>Add 10 Celcius</button>
<br />
<button onClick={addTenFahrenheit}>Add 10 Fahrenheit</button>
<br />
<button onClick={reset}>Reset</button>
</div>
);
}
export default TempCelcius;Fahrenheit(화씨)는 atom을 선언, Celcius(섭씨)는 Selector를 사용해서 tempFahrenheit(화씨온도 atom으로 선언해준 값)에 의존한다.
Selector는 get 함수를 통해 Fahrenheit(화씨)를 불러와서, Celcius(섭씨)로 변환해준다.
set 함수에서는 newValue의 값을 받는다.
get과 set 함수를 모두 사용해서 selector를 선언하면 , useRecoilState로 상태를 관리할 수 있다.
앞서 말한바와 같이 get만 사용하게 되면 useRecoilState를 사용할 수 없고, RecoilValueReadOnly 객체만 사용이 가능하다.
const tempCelcius = selector({
key: "tempCelcius",
get: ({ get }) => ((get(tempFahrenheit) - 32) * 5) / 9,
set: ({ set }, newValue) =>
set(
tempFahrenheit,
newValue instanceof DefaultValue ? newValue : (newValue * 9) / 5 + 32
),
});위 selector함수를 선언한 부분을 보면, set 함수는 2개의 인자를 받는다.
첫 번째 인자의 값을 두 번째 인자의 값으로 설정한다.
(즉 tempFahrenheit(화씨 온도 atom값)을 newValue로 만들어서 설정한다는 뜻)