5. Reference APIs
atomFamily(options)
atomFamily(options)
: atom
μ λ°ννλ ν¨μλ₯Ό λ°νν©λλ€.
Atom Family λ atom μ λͺ¨μμ μλ―Έν©λλ€.
const elementPositionStateFamily = atomFamily({
key: 'ElementPosition',
default: [0, 0],
});
function ElementListItem({elementID}) {
const position = useRecoilValue(elementPositionStateFamily(elementID));
return (
<div>
Element: {elementID}
Position: {position}
</div>
);
}
μμ²λΌ atomFamily
λ atom
κ³Ό κ±°μ λμΌνμ§λ§ μ λ¬ν λ§€κ°λ³μμ λ°λΌ RecoilState
λ₯Ό μ 곡νλ ν¨μλ₯Ό λ°νν©λλ€.
selectorFamily(options)
selectorFamily(options)
: selector
ν¨μλ₯Ό λ°ννλ ν¨μλ₯Ό λ°νν©λλ€.
atomFamily
μ λΉμ·νκ² selectorFamily
λ selector
μ λͺ¨μμ μλ―Έν©λλ€.
selector
μ μ μ¬νμ§λ§ get
, set
, selector
μ μ½λ°±μ λ§€κ°λ³μλ‘ μ λ¬ν μ μλ€λ μ μ΄ λ€λ¦
λλ€.
selectorFamily
μ νΈλ¦¬ν°λ λ§€κ°λ³μλ‘ νΈμΆ ν μ μλ ν¨μλ₯Ό λ°ννκ³ selector
λ₯Ό λ°νν©λλ€.
const myNumberState = atom({
key: 'MyNumber',
default: 2,
});
const myMultipliedState = selectorFamily({
key: 'MyMultipliedNumber',
get: (multiplier) => ({get}) => {
return get(myNumberState) * multiplier;
},
// optional set
set: (multiplier) => ({set}, newValue) => {
set(myNumberState, newValue / multiplier);
},
});
function MyComponent() {
// defaults to 2
const number = useRecoilValue(myNumberState);
// defaults to 200
const multipliedNumber = useRecoilValue(myMultipliedState(100));
return <div>...</div>;
}
useRecoilCallback(callback, deps)
useRecoilCallback(callback, deps)
: useCallback
κ³Ό λΉμ·νμ§λ§ Recoil μνμμ callbackμ΄ λμνλλ‘ APIλ₯Ό μ 곡ν©λλ€.
μ΄ hook μ λΉλκΈ°λ‘ νμ¬μ Recoil μνλ₯Ό μ λ°μ΄νΈνκ±°λ μ½κΈ° μ μ© Snapshot μ μ κ·Όν μ μλ callback μ ꡬμΆνκΈ° μν΄ μ¬μ©λ μ μμ΅λλ€.
μ¬μ©νλ κ²½μ°
리μ‘νΈ μ»΄ν¬λνΈμμ ν΄λΉ μνλ₯Ό ꡬλ νμ§ μκ³ μΆμ λ
λ λλ§ μ΄μ μ λ°μ΄ν°λ₯Ό 미리 κ°μ Έμ€κ³ μΆμ λ (Pre-fetching)
Last updated
Was this helpful?