useSelect ํจ์ ์ ์๊ธฐ (feat: ํจ์ ์ค๋ฒ๋ก๋ฉ)
ํจ์ ์ค๋ฒ๋ก๋ฉ์ ํ์ฉํ useSelect ํจ์ ์ ์๊ธฐ
ํจ์ ์ค๋ฒ๋ก๋ฉ์ ํ์ฉํ useSelect ํจ์ ์ ์๊ธฐ
์ต๊ทผ ์๋์ด ๊ฐ๋ฐ์๋ถ๊ณผ ์ด์ผ๊ธฐ๋ฅผ ๋๋๋ฉด์ ์ข์ ์ฝ๋๋ ์ด๋ค ์ฝ๋์ธ๊ฐ์ ๋ํด ๊ณ ๋ฏผํด๋ณด๊ฒ ๋์๋ค. ๊ฐ๋ฐ์ ํ๋ฉด์ ๊ณ ๋ฏผํ๋ ํฌ์ธํธ๋ค์ด ๋จธ๋ฆฌ ์์ผ๋ก ์ ๋ฆฌ๋ ๊ฒ ๊ฐ์ ๊ธ๋ก ๊ธฐ๋กํด๋ณด๋ คํ๋ค.
ํ๊ณ ์ ๋ด์ฉ์ด ๋ด๊ธด ๊ธ์ ๋๋ค. 7์์ ๊ธฐ์ ์ผ๋ก ์งง๊ณ ๋ ๊ธด 2๋ ๊ฐ์ GDSC ๋ฆฌ๋ ํ๋์ด ๋ง๋ฌด๋ฆฌ ๋๋ค. 2๋ ๊ฐ ์ปค๋ฎค๋ํฐ๋ฅผ ์ด์ํ๋ฉด์ ๊ณ์ ๊ณ ๋ฏผํ๊ณ ๊ณ ๋ฏผํ๋ ์ข์ ์ปค๋ฎค๋ํฐ(์กฐ์ง)์ ๋ํด ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํ๋ค.
์ฌ๋ด ๋์์ธ ์์คํ ์ ๊ฐ๋ฐํ๋ฉฐ Polymorphic ์ปดํฌ๋ํธ๋ฅผ ๊ฐ๋ฐํ๊ฒ ๋ ๊ฒฝํ์ ๋ค๋ฃจ๊ณ ์์ด์.
๋ฆฌ์กํธ์์๋ ์ด๋ฏธ ์ด๋ฒคํธ ์์์ด ์ฒ๋ฆฌ๋๊ณ ์์ด์, ๋ณ๋๋ก ์ด๋ฒคํธ ์์์ ๊ตฌํํ ํ์๊ฐ ์๋ค. onClick๊ณผ ๊ฐ์ ์ด๋ฒคํธ๋ค์ด ์ค์ DOM์ ๋ถ์ฌ์ง๋ ๊ฒ์ด ์๋๋ผ document์์ ๋ชจ๋ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๊ณ ์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฑ๊ธ์ค๋ ๋ ์ธ์ด์ด๊ธฐ ๋๋ฌธ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ํด Promise, async ๋ฑ์ ์ฌ์ฉํ๋ค. ์ด๋ฒ ๊ธ์์๋ Callback Queue์ ๋ํด ์์ธํ ์์๋ณด๊ณ , Microtask Queue์ Task Queue์ ์ฐ์ ์์๋ฅผ ์ค๋ช ํ๋ค. ๋ง์ดํฌ๋กํ์คํฌ๊ฐ ์ฐ์ ์์์ ์์ผ๋ฉฐ, Animation Frames์ ํฌํจํ ์ฝ๋ฐฑํจ์๋ Task Queue๋ณด๋ค ์ฐ์ ์ฒ๋ฆฌ๋๋ค.
์ด ๊ธ์ 21๋ 10์๋ถํฐ 22๋ 12์ ์ทจ์ ๊น์ง์ ์ฌ์ ์ ๋ด๊ณ ์์ต๋๋ค. ๋ธ๋ก๊ทธ๋ฅผ ์ฒ์ ๋ณด์๋ ๋ถ๋ค์ ์ํด ์ ์๊ฐ๋ฅผ ๊ฐ๋จํ๊ฒ ๋๋ฆฌ๋ ค๊ณ ํฉ๋๋ค.
์ด๋ jotai๊ฐ ๋ด๋ถ์ ์ผ๋ก react ์ context API๋ฅผ ์ด์ฉํ๊ธฐ ๋๋ฌธ์ ๊ฐ๋ฅํ ๊ฒ์ด๋ค. ๋ค๋ง, Provier๊ฐ ์๋ค๋ฉด ํ์ ์ปดํผ๋ํธ๋ค์์ ๊ตฌ๋ ํ๋ context๋ค์ด ๋ฆฌ๋ ๋๋ง์ด ๋์ง ์์ ๊ฒ์ด๋ค.jotai๋ ์ด๊ฒ์ ๊ฐ๋ฅํ๊ฒ ๋ง๋ค์์ผ๋ฉฐ, Provider ํ์ ์ปดํผ๋ํธ ์ ์ฒด๊ฐ ๋ฆฌ๋ ๋๋ง๋๋ ๋ฌธ์ ๋ฅผ ๊ฐ์ ํ๋ค๊ณ ๋ณด๋ฉด ๋๋ค.
์ด๋ฒ ํ๊ณ ๋ GDSC ๋ฆฌ๋๋ก์์ ๋ด์ฉ๋ง ๋ด์๋ณด๋ ค๊ณ ํ๋ค.
์ํฐ๋ ํ๋ฆฌ์จ๋ณด๋ฉ ์ฑ๋ฆฐ์ง, ์ทจ์ ํ๋, ํ ์ค ์๋ฅ ํฉ๊ฒฉ๊ณผ ๊ณผ์ , ์ปคํผ์ฑ ์์ฒญ, ๋ง์ง ๊ธฐ๋ก ์๋น์ค ๊ฐ๋ฐ, ๊ทธ๋ฆฌ๊ณ GDSC ๋ฆฌ๋๋ก์์ ํ๋์ ๋ํด ๋ค๋ฃจ๊ณ ์๋ค.
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ํ๋ค๋ณด๋ฉด ์ ํ๊ฒ ๋๋ ๋ฒ๋ค๋ฌ, ๊ทธ ์ค ์ ๊ฐ ์ ์ฉํ๊ณ ์๋ webpack๊ณผ Rollup์ ๋ํด์ ์์๋ณด๊ณ ๊ฐ๊ฐ ์ด๋ค ์ฅ๋จ์ ์ด ์๋์ง ์์๋ณด๋ ค๊ณ ํฉ๋๋ค.
์ํฐ๋ ํ๋ฆฌ์จ๋ณด๋ฉ ์ฑ๋ฆฐ์ง ์ฒซ๋ฒ์งธ ๊ณผ์ ย React์ History API ์ฌ์ฉํ์ฌ SPA Router ๊ธฐ๋ฅ ๊ตฌํํ๊ธฐ๋ฅผ ํด๊ฒฐํด๋ด ์๋ค. ์ด๋ฏธ ๊ธ ์ฐ๋ ์์ ์์๋ ์ ๋ถ ๊ฐ๋ฐํ๊ณ ์ ์ถํ์ง๋ง ๊ณ ๋ฏผํ๋ ์ ์ ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํฉ๋๋ค.
๊ตฌ๊ธ์ ์ ์ธ ๋จ๊ณ๋ฅผ ํตํด ์นํ์ด์ง๋ฅผ ์์ค๋ก ๊ฒฐ๊ณผ๋ฅผ ์์ฑํ๋ค. 1. ํฌ๋กค๋ง Google์ ์น์ ์ด๋ค ํ์ด์ง๊ฐ ์กด์ฌํ๋์ง ๊ฒ์ํ๊ณ ์๋ ค์ง ํ์ด์ง๋ฅผ ๋ชฉ๋ก์ ์ถ๊ฐํ๋ค.์๋ก์ด ํ์ด์ง์ UR
1. ์๋ก React์์์ ์ํ๊ด๋ฆฌ๋ ์ด 2๊ฐ์ง๋ก ๋ถ๋ฅํ ์ ์์ด์.์๋ฒ ์ํ๊ด๋ฆฌ, ๋ก์ปฌ ์ํ๊ด๋ฆฌ์ธ๋ฐ์. ์๋ฒ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ํ์ ์ผ๋กย SWR,ย React-Query๊ฐ ์๊ณ ๋ก์ปฌ ์ํ๊ด๋ฆฌ๋ ๋ํ์ ์ผ๋กย Recoil,ย Zustand,ย Jotai,ย Reduxย ๊ฐ์ ํด์ด ์์ด์. ๋ก์ปฌ ์ํ๊ด๋ฆฌ ํด์ 2๊ฐ์ง๋ก ๋ถ๋ฅํ ์ ์๋๋ฐย FLUX ๊ตฌ์กฐ,ย Atomic ๊ตฌ์กฐ๋ก ๋๋ ์ ์์ด์. ์ค๋์ย Flux ๊ตฌ์กฐ๋ฅผ ์ฌ์ฉํ๋ย Zustand๋ฅผ ์ฌ์ฉํด๋ณด๋ ค๊ณ ํด์.
๊ธฐ์กด์ ์์ฃผ ์ฌ์ฉํ๋ย Redux๋ ์ฌ์ฉ์์ ๋ช ๋ น(action)์ย Reducer->Store๋ก ์ ๋ฌํ์ฌ ์ํ๋ฅผ ๋ณํ์ํค๊ณ ๊ทธ ๊ฐ์ Component์ ๋ฐ์ํ๋ ์๋ฆฌ์ธ๋ฐ ๋๋ย React-Redux๋ฅผ ์ฌ์ฉํ๋ฉด์ย React์์ ์ฐ๋๊ฒ ์ข ์ด์ํ๋ฐ?/React์ค๋ฝ์ง ์์๋ฐ?๋ผ๊ณ ์๊ฐํ๋ค.
์ค๋์ ์๋ฐ์คํฌ๋ฆฝํธ์์์ ๊น์ ๋ณต์ฌ์ ์์ ๋ณต์ฌ๋ฅผ ์์๋ณด๋ ค๊ณ ํด์. ๋จ์ด์์๋ ์ ์ถํ ์ ์๋ฏ์ด ๊น์ ๋ณต์ฌ๋ ๋ด๋ถ ๊ฐ ์ ์ฒด๋ฅผ ๋ณต์ฌ, ์์ ๋ณต์ฌ๋ ์๊ฒ ๋ณต์ฌํ๋ ๊ฒ์ด๊ฒ ์ฃ .?
์ Vite์ ์ฌ์ฉํด์ผ ํ๋์?Vite์ ์ฌ์ฉํด์ผ ํ๋ ์ด์ ๋ฅผ ์ ๋ฆฌํ ๊ธ์ ๋๋ค. ์๋ก ๋นํธ? ๋น? ๊ทธ๊ฒ ๋ญ๊ฐ์? ๋จผ์ ย vite์ย ๋น ๋ฅธ ์น ํ๋ก์ ํธ ๊ฐ๋ฐ ๊ฒฝํ์ ํฌ์ปค์ค๋ฅผ ๋ง์ถฐ ํ์ํ๊ฒ ๋ ๋น๋ ๋๊ตฌ์์.๋ฐ์์ย veet๊ณผ ๋น์ทํย vit์ ๋๋ค.
๋ช ์์ ์ผ๋ก this๋ฅผ ๋ฐ์ธ๋ฉํ๋ ๋ฐฉ๋ฒ call ๋ฉ์๋ call์ ๋ชจ๋ ํจ์์์ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๊ณ this๋ฅผ ํน์ ๊ฐ์ฒด๋ก ์ง์ ์ด ๊ฐ๋ฅํด์. call(this, ํจ์์ ์ ๋ฌํ ์ธ์)call์ ์ฒซ๋ฒ์งธ ์ธ์๋ก this, ๋ ๋ฒ์งธ ์ธ์๋ก ํจ์์ ํ๋ผ๋ฏธํฐ๋ฅผ ๋ฐ์์.
์๋ฐ์คํฌ๋ฆฝํธ์์ ๊ฐ์ฅ ์ด๋ ค์ด ๊ฐ๋ ์ ๋ฝ์ผ๋ผ๊ณ ํ๋ค๋ฉด ์ ๋ย this์ ์คํ์ปจํ ์คํธ๋ฅผ ์ ํํ ๊ฒ๊ฐ์๋ฐ์. ์ด๋ฒ post์์๋ย this์ ๊ฐ๋ ์ ๋ํด ์์๋ณด๋๋ก ํด์.
๋ณ์ ์ ์ธ, ํ ๋น ๋ณ์ let a; ๋ณํ ์ ์๋ ๋ฐ์ดํฐ๋ฅผ ๋ง๋ ๋ค. ๊ทธ ๋ฐ์ดํฐ์ ์๋ณ์๋ a๋ก ํ๋ค. ๋ณ์ ์ ์ธ ๋ณ์๋ ์ ์ธํจ์ผ๋ก์ ๋ฉ๋ชจ๋ฆฌ ์์ญ์ ์ ์ฅ๋๋๋ฐ ์๋์ ๊ฐ์์.
Record ํ๊ฒฝ๋ ์ฝ๋ [Environment Record] ์๋ณ์์ ์๋ณ์์ ๋ฐ์ธ๋ฉ๋ ๊ฐ์ ๊ธฐ๋ก ํธ์ด์คํ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ๋ณ์๋ ํจ์๋ฅผ ๋จผ์ ๊ธฐ๋กํจ์ผ๋ก์ ์ค์ฝํ์ ์ต์๋จ์ ์์นํ๋ ๊ฒ์ฒ๋ผ ๋์ํ๋ ๊ฒ
๋ธ๋ผ์ฐ์ ์ปดํฌ๋ํธ ๋ธ๋ผ์ฐ์ ๋ฅผ ๊ตฌ์ฑํ๋ ์์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.