External Store
External Store
๋ฆฌ์กํธ ์ธ๋ถ์ Store(์ ์ฅ์)๋ฅผ ๋๊ณ ์ํ๋ฅผ ๊ด๋ฆฌํจ์ผ๋ก์จ, ์ํ๋ฅผ ์ ์ดํ๋ ๊ด์ฌ์ฌ์ UI(์ปดํฌ๋ํธ)์ ๊ด์ฌ์ฌ๋ฅผ ๋ถ๋ฆฌ
React ์ปดํฌ๋ํธ ์ ์ฅ์์๋ โ์ ์ญโ์ฒ๋ผ ์ฌ๊ฒจ์ง๋ค.
โProp Drillingโ ๋ฌธ์ ๋ฅผ ์ฐ์ํ๊ฒ ํด๊ฒฐํ ์ ์๋ ๋ฐฉ๋ฒ ์ค ํ๋(React๋ก ํ์ ํ๋ฉด Context๋ ์ธ ์ ์๋ค).
External โ (React) ์ธ๋ถ๋ฅผ ์๋ฏธํ๋ค.
์ผ๋ฐ์ ์ธ ์ํคํ ์ฒ์์๋ UI(React)๊ฐ ๊ฐ์ฅ ๋ฐ๊นฅ์ชฝ์ด์ง๋ง ์ฌ๊ธฐ์ ๋งํ๋ Extenral์ ์์ด๋ ๋ฐ์ด๋๋ผ๋ ๊ด์ ์ด ์๋๋ผ React ์ ์ฅ์์ ์ธ๋ถ๋ฅผ ์๋ฏธ
forceUpdate
React๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์๋ React ์ธ๋ถ๋ฅผ ํตํด ์ํ๊ด๋ฆฌ๋ฅผ ํ๋ ๊ฒ์ด๋ฏ๋ก useState๋ฅผ ์ฌ์ฉํ์ฌ ์ํ๊ด๋ฆฌ๋ฅผ ํ๋๊ฒ์ด ์๋๋ค.
๊ทธ๋์ ํ๋ฉด์ ๋ฆฌ๋ ๋๋ง ์ํฌ ๋ฐฉ๋ฒ์ด ํ์ํ๋ฐ ์๋์ ๊ฐ์ด ๊ฐ์ ์ ์ผ๋ก ๋ฆฌ๋ ๋๋งํ๋ ๋ฐฉ์์ ์ฌ์ฉํ๋ค.
React ๊ณต์๋ฌธ์์ ๋์์๋ forceUpdate ์ฝ๋
๊ฐ๋ฅํ๋ฉด ํด๋น ํจํด์ ํผํ๋ผ๊ณ ์ฃผ์๋ฅผ ์ฃผ๊ณ ์๋ค.
useReducer
React์์ ์ ๊ณตํ๋ ์ํ ๊ด๋ฆฌ ํ ์ด๋ฉฐ, useState์ ์ ์ฌํ์ง๋ง ์ํ ์ ๋ฐ์ดํธ ๋ก์ง์ ์ปดํฌ๋ํธ ์ธ๋ถ๋ก ๋ถ๋ฆฌํ ์ ์๋ค.
useReducer๊ฐ ๊ธฐ๋ณธํ์ด๊ณ useState๋ ๋ด๋ถ์ ์ผ๋ก useReudcer๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ์์ด๋ค.
์ฌ๋ฌ ์ปดํฌ๋ํธ์์ ๊ณต์ ๋๋ ์ํ๋ฅผ ๊ด๋ฆฌํ ๋ ๋์์ด ๋๋ค.
์ฐ๋ฆฌ๊ฐ ํํ ์๊ณ ์๋ Redux์ ๊ทธ๊ฒ๊ณผ ๋น์ทํจ
dispatch: ์ก์ ์ ๋ณด๋ด๋ ํจ์๋ฅผ ๋ฐํ
reducer: ์ํ ์ ๋ฐ์ดํธ ๋ก์ง์ ์ฒ๋ฆฌํ๋ ํจ์
๋ฆฌ์ํธ ๋ด๋ถ์ ์ผ๋ก ์ฌ์ฉํ๋ ์ํ๊ด๋ฆฌ(useState, useReduer, props, context)๋ฅผ Internal Store๋ผ๊ณ ํ๋ค.
useCallback
React์์ ์ ๊ณตํ๋ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ ํ ์ด๋ฉฐ, ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํด ํจ์๋ฅผ ์บ์ํ๊ณ ์ฌ์ฌ์ฉํ๋ค.
๋งค ๋ ๋๋ง ๋ง๋ค ์๋ก์ด ํจ์๋ฅผ ์์ฑํ์ง ์๊ณ ์ด์ ์ ์์ฑ๋ ํจ์๋ฅผ ์ฌ์ฌ์ฉํ๋๋ก ๋ณด์ฅํจ
์์์ปดํฌ๋ํธ์ props๋ก ์ฝ๋ฐฑํจ์๋ฅผ ์ ๋ฌํ ๋ props์ ๋ณํ๋ก ๋ถํ์ํ๊ฒ ๋ฆฌ๋ ๋๋ง ๋๋ ๊ฒ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ค.
useCallback๋ง ์ฌ์ฉํ๋ค๊ณ ํด์ ์ต์ ํ ๋๋ ๊ฒ์ด ์๋๋ผ ๋ ๋ค๋ฅธ ์ฑ๋ฅ ์ต์ ํ ํ
์ธ React.memo()
์ ๊ฐ์ด ์ฌ์ฉํด์ผ ์ต์ ํ ๋๋ค๋ ๊ฒ์ ์ ์
React.memo Hooks
์ด์ ์ ๋ ๋๋ง๋ ๊ฒฐ๊ณผ๋ฅผ ์บ์ํ๊ณ , ๋ค์ ๋ ๋๋ง ์ ํ์ฌ props์ ์๊ฒ ๋น๊ต(๋ณ๊ฒฝ๊ฐ๋ฅ)ํด์ ๊ฐ๋ค๋ฉด ๋ฆฌ๋ ๋๋ง์ ํ์ง ์๊ณ ์บ์๋ ๊ฒฐ๊ณผ๋ฅผ ์ฌ์ฉํ๋ ์์ผ๋ก ๋ฆฌ๋ ๋๋ง์ ๋ฐฉ์งํ๋ค.
useEffect์ ์์กด์ฑ ๋ฐฐ์ด๊ณผ ๋น์ทํ๋ฐ ํจ์ ๋ด๋ถ์์ ์ฐธ์กฐํ๋ ์ํ๋ props ์ค์์ ๋ณ๊ฒฝ๋๋ ๊ฒ์ด ์์๋ ์๋ก์ด ํจ์๋ฅผ ์์ฑํ๋๋ก ์ง์ ํ๋ค.
Props Drilling
๋ถ๋ชจ์์ React ํธ๋ฆฌ์ ๋ชจ๋ ์ค์ฒฉ๋ ์์์๊ฒ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ ๊ฒ์ ์๋ฏธํ๋ค.
์๋ ์ฝ๋์ ๊ฐ์ด ์ค๊ฐ ๋จ๊ณ์ ์ปดํฌ๋ํธ๊ฐ props๋ฅผ ๋จ์ํ ์์์๊ฒ ์ ๋ฌํ๊ธฐ๋ง ํ๋ ํํ๋ฅผ props drilling์ด๋ผ ํจ
Props Drilling์ ๋ฌธ์ ์
์ปดํฌ๋ํธ ๊ตฌ์กฐ๊ฐ ๋ณ๊ฒฝ๋๋ฉด props๋ฅผ ์ ๋ฌํ๋ ๋ชจ๋ ์ปดํฌ๋ํธ๋ฅผ ์์ ํด์ผ ํ๋ฏ๋ก ๋ฒ๊ฑฐ๋กญ๋ค.
์ฝ๋๊ฐ ๊ธ๋ฐฉ ๋ณต์กํด์ง๊ณ ์ค์ํ๊ธฐ ์ฝ๋ค.
Context API
React์์ ์ ๊ณตํด์ฃผ๋ Context API Hooks๋ก Props Drilling์ ์ต์ํํ ์ ์๋ค.
Context์ ์ฌ์ฉ ๋ชฉ์ ์ ๋ณต์กํ๊ฒ "์ค์ฒฉ ๋" ํ์ ์ปดํฌ๋ํธ๋ค์ ๋ฐ์ดํฐ๋ฅผ ๊ณต์ ํ๋ ๊ฒ
Context๋ฅผ ์ฌ์ฉํ๋ฉด ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ์ด ์ด๋ ค์ฐ๋ฏ๋ก ๊ผญ ํ์ํ ๊ฒฝ์ฐ์๋ง ์ฌ์ฉํด์ผ ํ๋ค.
Context ์ ์ฉ ์ฝ๋
๋๊ฒจ์ฃผ๋ Props๋ค์ ๋ชจ๋ ์ ๊ฑฐํ๋ ๊น๋ํด์ก๋ค.
Context API + useReduecr ์กฐํฉ์ผ๋ก ์ํ๊ด๋ฆฌ๋ฅผ ํ๋ด๋ผ์ ์์ง๋ง ๊ด๋ฆฌ๋๋ ์ปจํ ์คํธ ๊ฐ ์ค ์ผ๋ถ๊ฐ ๋ณ๊ฒฝ์ด ๋์์ ๋ ๋ณ๊ฒฝ๋์ง ์์ ๋ค๋ฅธ ์ํ๊ฐ์ ์ฐ๊ฒฐ๋ ์ปดํฌ๋ํธ ๋ํ ๋ฆฌ๋ ๋๋ง์ด ๋ฐ์ํ๋ Side Effect๊ฐ ์๋ค.
External Store ์ง์ ๊ตฌํํด๋ณด๊ธฐ with Tsyringe
์ฌ๋ฌ ์คํ ์ด๋ฅผ ํตํด ๊ด๋ฆฌ๋๋ extenral store๋ฅผ ์ง์ ๊ตฌํ ํด๋ณด์.
ObjectStore.
์ฌ๋ฌ ์คํ ์ด์ ๋ฒ ์ด์ค๊ฐ ๋๋ ๋ถ๋ชจ ํด๋์ค
CounterStore
useObjectStore
useCounterStore
Usage
CounterController.tsx
Counter.tsx
์ด๋ฐ ์ ๊ทผ์ ์ ํ๋ฉด, React๊ฐ UI๋ฅผ ๋ด๋นํ๊ณ , ์์ํ TypeScript(๋๋ JavaScript)๊ฐ ๋น์ฆ๋์ค ๋ก์ง์ ๋ด๋นํ๋, ๊ด์ฌ์ฌ์ ๋ถ๋ฆฌ(Separation of Concerns)๋ฅผ ๋ช ํํ ํ ์ ์๋ค. ์์ฃผ ๋ฐ๋๋ UI ์์์ ๋ํ ํ ์คํธ ๋์ , ์ค๋ ์ ์ง๋๋(๋ฐ๋๋ฉด ์น๋ช ์ ์ธ) ๋น์ฆ๋์ค ๋ก์ง์ ๋ํ ํ ์คํธ ์ฝ๋๋ฅผ ์์ฑํด ์ ์ง๋ณด์์ ๋์์ด ๋๋ ํ ์คํธ ์ฝ๋๋ฅผ ์น๋ฐํ๊ฒ ์์ฑํ ์ ์๋ค.
Last updated