๐์ค๋ ๋ฐฐ์ด ๊ฒ
recoil
<RecoilRoot />
- ์ฌ๋ฌ <RecoilRoot> ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ
<RecoilRoot>๋ ์ฌ๋ฌ ๊ฐ๊ฐ ๊ฐ์ด ์กด์ฌํ ์ ์์ผ๋ฉฐ ๊ฐ๊ฐ ๋ ๋ฆฝ์ ์ธ atom ์ํ๊ฐ providers/store๋๋ค.
-> override๋ฅผ false๋ก ์ง์ ํ์ง ์๋ ํ ์ค์ฒฉ ๋ ๋ ๋์ผํ๊ฒ ๋ฐ์
* override๋?
:๊ธฐ๋ณธ ๊ฐ true
<RecoilRoot>๊ฐ ๋ค๋ฅธ <RecoilRoot>์ ์ค์ฒฉ๋ ๊ฒฝ์ฐ์ true๋ผ๋ฉด ํด๋น ๋ฃจํธ๋ ๊ฐ๊ฐ ์๋ก์ด reocil ๋ฒ์๋ฅผ ์์ฑํ๋ค. ๋ง์ฝ false๋ผ๋ฉด ๋ฃจํธ์ ์์๋ค์ ๊ฐ์ฅ ๊ฐ๊น์ด ์กฐ์ <RecoilRoot>์ recoil ๊ฐ์ ์ก์ธ์คํ๋ค.
atom
:recoil์ ์ํ๋ฅผ ํํ. ์ฐ๊ธฐ ๊ฐ๋ฅํ RecoilState ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ค.
- key: ๋ด๋ถ์ ์ผ๋ก atom์ ์๋ณํ๋๋ฐ ์ฌ์ฉ๋๋ ๊ณ ์ ํ ๋ฌธ์์ด
- default: atom์ ์ด๊ธฐ ๊ฐ
- effects_UNSTABLE: atom์ ์ํ ์ ํ์ ์ธ atom Effects ๋ฐฐ์ด
- dangerouslyAllowMutability: recoil์ atom์ ์ํ ๋ณํ์ ์์กดํ๋๋ฐ ๋ง์ฝ atom์ ๊ฐ์ด ๋ณ๊ฒฝ๋ ๊ฒฝ์ฐ ์ด๋ฅผ ๊ฑฐ์น์ง ์๊ณ ๋ฑ๋ก๋ ์ปดํฌ๋ํธ์ ์ ๋๋ก ์๋ฆฌ์ง ์์ ์ฑ ์ํ๊ฐ ๋ณ๊ฒฝ๋ ์ ์๋ค. ์ด๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํด ์ ์ฅ๋ ๋ชจ๋ ๊ฐ์ ๋ณ๊ฒฝํ์ง ์์ผ๋ฉฐ ๊ฒฝ์ฐ์ ๋ฐ๋ผ ์ด ์ต์ ์ ์ฌ์ฉํ์ฌ ์ฌ์ ์ํ ์ ์๋ค.
atom๊ณผ ์ํธ์์ฉ ์ํด์ ์์ฃผ ์ฌ์ฉ๋๋ hooks
- useRecoilState(): atom ์ฝ๊ธฐ, ์ฐ๊ธฐ ๊ฐ๋ฅ
- useRecoilValue(): atom ์ผ๊ธฐ ์ ์ฉ
- useSetRecoilState(): atom ์ฐ๊ธฐ ์ ์ฉ
- useResetRecoilState(): atom ์ด๊ธฐ๊ฐ์ผ๋ก ์ด๊ธฐํ
- ๋น๋๊ธฐ ํจ์๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ selector ์ฌ์ฉ
selector
: ํจ์๋ ํ์๋ ์ํ
- ์ ์ ์์กด์ฑ์ด ์๋ Selector
const mySelector = selector({
key: 'MySelector',
get: ({get}) => get(myAtom) * 100,
});
- ๋์ ์์กด์ฑ์ด ์๋ Selector
const toggleState = atom({key: 'Toggle', default: false});
const mySelector = selector({
key: 'MySelector',
get: ({get}) => {
const toggle = get(toggleState);
if (toggle) {
return get(selectorA);
} else {
return get(selectorB);
}
},
});
๐ญ๋ฐฐ์ด ์
๋ฆฌ์ฝ์ผ์ ์ผ๋จ ๊ณต์๋ฌธ์๋ฅผ ๋ณด๋ฉด์ ์ด๋ก ์ ์ดํดํ๊ณ ์๋๋ฐ ๊ทธ๋ฅ ๋ด์ฉ๋ง ์ฝ๊ณ ์๋ค๋ณด๋ ๋ด๊ฐ ์ด๊ฑธ ์ฝ๋๋ก ์น ์ ์์๊น? ํ๋ ๊ฑฑ์ ์ด ๋ ๋ค. ์ฝ๋๋ก ์น๋ฉด์ ๊ณต๋ถํด๋ณด๊ณ ์ถ์๋ฐ ... ๊ฐ๋จํ๊ฒ todo๋ผ๋ ์ค์ตํด๋ด์ผํ๋ ์ถ๋ค. todo ์ค์ต์ด ๊ณต์๋ฌธ์์ ์๊ธฐ๋ ํ๊ณ ๊ฐ๋จํ๊ฒ ํ๋ฃจ ์ ๋๋ฉด ๋๋ผ ์ ์์ง ์์๊น?
์ฝ๊ณ ์์๋ ๋ฆฌ์กํธ ๊ณต์๋ฌธ์๋ ๋ด์ผํ๊ณ ํ์ ์คํฌ๋ฆฝํธ ๊ณต์๋ฌธ์๋ ๋ด์ผํ๋ค! ์ง๊ธ๊น์ง ์๊ณ ์๋ ์ง์๋ค์ ์ข ๋ ์ ์ ํ๋ ๊ณผ์ ์ด ํ์ํ ๊ฒ ๊ฐ๋ค. ๋ฅ๋ค์ด๋ธ ์ฝ๋ ๊ฒ๋ ๋ง์ฐฌ๊ฐ์ง!
ํ ์ผ์ ๋์ด๋๋๋ฐ ์์ด๋ฆฌ ๋์ด์ง๋์ง ๋ชจ๋ฅด๊ฒ ๋ค!! ์ฌ๋ ๊ฒ๋ ์๋๊ณ ๋นก๊ณตํ๋ ๊ฒ๋ ์๋๊ณ ...?
'์ผ์ > Today I Learned' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
2023.04.03[์ ํด๋ฆฌ๋ ํธ์ ๋ฒ, ํต ์ ๋ ฌ] (0) | 2023.04.04 |
---|---|
2023.03.29 [๊ฒ์ ์๊ณ ๋ฆฌ์ฆ, ๋ฒ๋ธ ์ ๋ ฌ] (0) | 2023.03.29 |
2023.02.07 (0) | 2023.02.07 |
2023.02.06 (0) | 2023.02.07 |
2023.02.03 (0) | 2023.02.03 |