Recoil - team-yaza/mozi-client GitHub Wiki

image

Recoil์€ Facebook์—์„œ ๋งŒ๋“  React๋ฅผ ์œ„ํ•œ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. Redux์˜ ์ƒํƒœ๊ด€๋ฆฌ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ƒ์šฉ๊ตฌ ์ฝ”๋“œ(boilderplate code)๊ฐ€ ๋งŽ์ด ๋ฐœ์ƒํ•˜๋Š”๋ฐ๋‹ค combineReducer๋ฅผ ํ†ตํ•œ reducer ๋ถ„ํ• ์ด ๊ฐ€๋Šฅํ•˜๋‹ค ํ•˜๋”๋ผ๋„ Recoil์˜ atom๊ณผ ๊ฐ™์€ ์œ ์—ฐํ•จ์€ ๊ฒฐ์ฝ” ์ œ๊ณตํ•  ์ˆ˜ ์—†๋‹ค. ์ปดํฌ๋„ŒํŠธ์˜ useMemo์ฒ˜๋Ÿผ ํŒŒ์ƒ ๋ฐ์ดํ„ฐ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์€ ์ž์ฒด์ ์œผ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š์•„์„œ reselect๊ฐ™์€ ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ํž˜์„ ๋นŒ๋ ค์•ผํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  atomEffect ์ฒ˜๋Ÿผ ํŠน์ • ์ƒํƒœ๊ฐ€ ์—…๋ฐ์ดํŠธ๋˜์—ˆ์„ ๋•Œ ์‹คํ–‰ํ•  ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๋Š” ์ž์ฒด์ ์œผ๋กœ ์ •์˜ํ•  ์ˆ˜ ์—†์œผ๋ฉฐ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒํƒœ๋ฅผ ๊ตฌ๋…ํ•œ ํ›„ useEffect ์•ˆ์—์„œ ๊ตฌํ˜„ํ•ด์•ผํ•œ๋‹ค. Redux ๋ฏธ๋“ค์›จ์–ด๋Š” ์ƒํƒœ ์—…๋ฐ์ดํŠธ ํ›„์— ์‹คํ–‰๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ dispatch๋œ ๋ชจ๋“  ์•ก์…˜์ด ๊ฑฐ์ณ๊ฐ€๋Š” ๊ณณ์ด๋ผ ์„ฑ๊ฒฉ์ด ๋‹ค๋ฅด๋‹ค.

Redux์˜ ์ƒํƒœ ๊ตฌ์กฐ๋Š” ํŠธ๋ฆฌํ˜•ํƒœ์ด์ง€๋งŒ Recoil์€ ์œ ํ–ฅ ๊ทธ๋ž˜ํ”„(directed graph) ํ˜•ํƒœ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค.
Recoil์—์„œ ๋ฐ์ดํ„ฐ์˜ ์†Œ์Šค์ธ atom์€ ๊ณ ์œ ํ•œ ๋ฌธ์ž์—ด ํ‚ค๋ฅผ ๊ฐ€์ง€๋Š”๋ฐ, Recoil์€ atom์˜ ํ‚ค๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์•ŒํŒŒ๋ฒณ์„ ๋…ธ๋“œ๋กœ ํ•˜์—ฌ ๊ทธ๋ž˜ํ”„๋ฅผ ๊ตฌ์„ฑํ•œ๋‹ค.(Trie)
Recoil์—์„œ atom์˜ ํ‚ค๋Š” ๊ณ ์œ ํ•œ ๊ฐ’์„ ๊ฐ€์ ธ์•ผํ•˜๋ฏ€๋กœ ๊ทธ๋ž˜ํ”„ ์ƒ์˜ ๋…ธ๋“œ์—๋Š” ์–ธ์ œ๋‚˜ 1๊ฐœ์˜ atom๋งŒ ์กด์žฌํ•˜๊ฒŒ ๋œ๋‹ค. ์ด๋Š” ๊ณง atom์ด ๋‹ค๋ฅธ atom์˜ ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๋Š” ๋…๋ฆฝ์ ์ธ ์ƒํƒœ๋ผ๋Š” ๋ง์ด๊ธฐ๋„ ํ•˜๋‹ค. Redux์—์„œ ๊ทธ๋žฌ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ reducer๋ฅผ ๊ตฌํ˜„ํ•  ๋•Œ ์—…๋ฐ์ดํŠธ ๋Œ€์ƒ์ด ์•„๋‹Œ ๊ฐ’(=์ƒํƒœ ๊ฐ์ฒด์˜ ๋‹ค๋ฅธ ํ•„๋“œ)๋“ค์˜ ๋ถˆ๋ณ€์„ฑ์„ ๋ณด์žฅํ•˜๊ธฐ ์œ„ํ•ด immutable.js,immer๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์‚ฌ์šฉ์„ ๊ณ ๋ คํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค.

์ด ์™ธ์—๋„ Recoil์€ React์˜ ๋™์‹œ์„ฑ ๋ชจ๋“œ(Concurrent Mode) ๋ฐ ์‹ ๊ทœ ๊ธฐ๋Šฅ๊ณผ์˜ ํ˜ธํ™˜์„ฑ์ด ์ œ๊ณต๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ atom, selector ์•ฑ ๊ฐœ๋ฐœ์— ๋”ฐ๋ผ ์ ์ง„์ ์œผ๋กœ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์–ด์„œ ์ฝ”๋“œ ๋ถ„ํ• ์— ์šฉ์ดํ•˜๋‹ค๋Š” ์ , ๋น„๋™๊ธฐ selector๋ฅผ ํ†ตํ•œ ์›๊ฒฉ ๋ฐ์ดํ„ฐ ๊ตฌ๋…๋“ฑ ๋‹ค์–‘ํ•œ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.