useContext & Provider
Context API
๋ง์ ์ปดํฌ๋ํธ์์ ์ฌ์ฉ๋๋ ๋ณ๊ฒฝ์ด ์ ์ผ์ด๋์ง ์๋ ๊ฐ์ ๋ํด ์ปจํ ์คํธ API ์ฌ์ฉ์ ๊ณ ๋ ค
์ปจํ ์คํธ API: ์ปดํฌ๋ํธ ํธ๋ฆฌ์ ๋ชจ๋ ํ์ ํธ๋ฆฌ์ ๊ฐ์ ์ ๊ณตํ๊ธฐ ์ํ ๋ฐฉ๋ฒ
์ปจํ ์คํธ ๊ฐ์ฒด:
React.createContext()
๋ก ์์ฑ๋จ, ํ๋ก๋ฐ์ด๋/์๋น์๋ฅผ ํฌํจํ๋ค.Provider ์ปดํฌ๋ํธ: ์ปจํ ์คํธ๋ฅผ ์ ๊ณตํ๋ฉฐ, ํ์ ์ปดํฌ๋ํธ๊ฐ ์ปจํ ์คํธ ๊ฐ์ ๊ตฌ๋ ํ ์ ์๋๋ก ํจ
useContext ํ : ์ปจํ ์คํธ ๊ฐ์ ์๋นํ๊ธฐ ์ํ ํ ์ผ๋ก, ์ปจํ ์คํธ ๊ฐ์ฒด๋ฅผ ์ธ์๋ก ๋ฐ์ ํ์ฌ ์ปจํ ์คํธ ๊ฐ์ ๋ฐํํจ
๋ถํ์ํ ๋ฆฌ๋ ๋๋ง ๋ฐฉ์งํ๊ธฐ
Context ๊ฐ์ ์๋นํ๋ ์ปดํฌ๋ํธ ์ธ์ ํ์ ์ปดํฌ๋ํธ๋ค์ ๋ฆฌ๋ ๋๋ง ๋์ง ์๋๋ค.
์ปค์คํ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ๋ฅผ ๋ฆฌ๋ ๋๋งํ์ง ์๊ฒ ํ๊ธฐ ์ํด children ํ๋กญ์ ์ฌ์ฉํ๋ผ.
Provider ์ปดํฌ๋ํธ๊ฐ ํ์ ์ปดํฌ๋ํธ๋ค์ children ํ๋กํผํฐ๋ก ์ ๊ทผํ์ฌ Provider ์ปดํฌ๋ํธ ์์์ ์ํ๋ฅผ ๊ฐฑ์ ํด๋ children ํ๋กํผํฐ๋ ๋ณ๊ฒฝ๋์ง ์๊ธฐ ๋๋ฌธ
children์ ์ฌ์ ํ ๊ฐ์ ๊ฐ์ฒด
Context ๊ฐ์ฒด๋ก ๋ฌถ์ธ ํ๋กํผํฐ๋ค์ ์ด ์ค ํ๋๋ผ๋ ๋ณ๊ฒฝ๋๋ฉด, ๋ณ๊ฒฝ๋ ๊ฐ๊ณผ ๋ฌด๊ดํ ์ปดํฌ๋ํธ๋ ๋ฆฌ๋ ๋๋ง ๋๋ค.
์ปจํ ์คํธ๋ฅผ ์ฌ์ฉํ๋ '๋ชจ๋ ' ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋๋ค.
ํ๋ก๋ฐ์ด๋์ ๋๊ธฐ๋ ์ปจํ ์คํธ ๊ฐ(๊ฐ์ฒด)์ด ๋ค์ ์์ฑ๋์ด ํ ๋น๋๊ธฐ ๋๋ฌธ
์ด๋ฐ ์ด์ ๋ก ํ๋ก๋ฐ์ด๋ ์ปดํฌ๋ํธ์ ๋ถ๋ชจ๊ฐ ๋ฆฌ๋ ๋๋ง๋์ด๋ ๋์ผํ๊ฒ ๋ฆฌ๋ ๋๋ง๋๋ค.
์ด ์ด์๋ useMemo๋ก ์ปจํ ์คํธ ๊ฐ์ ๊ฐ์ธ๋ฉด ํด๊ฒฐ ๊ฐ๋ฅํ๋ค.
์ฌ๋ฌ ํ๋ก๋ฐ์ด๋๋ฅผ ํตํด ์ปจํ ์คํธ ๊ฐ์ ๋ถํ ํ๋๊ฒ๋ ๋ฐฉ๋ฒ์ด๋ค.
ํจ๊ป ์๋น๋๋ ๊ฐ๋ค๋ก ๋ฌถ์ด๋ผ
ํจ๊ป ์๋น๋๋ ๊ฒฝ์ฐ๊ฐ ๋๋ฌธ ๊ฐ์ ๋ํด์๋ ์ฌ๋ฌ ๊ฐ์ ์ปจํ ์คํธ๋ก ๋ถ๋ฆฌํ๋๊ฒ์ ๊ณ ๋ ค
ํ๋ก๋ฐ์ด๋ ์ค์ฒฉ์ด ์ฌํด์ง๋ฉด(wrapper hell) ์ฌ๋ฌ ํ๋ก๋ฐ์ด๋๋ฅผ ํ ๊ณณ์ ๊ทธ๋ฃนํํด์ฃผ๋ ์ปค์คํ ํ๋ก๋ฐ์ด๋๋ฅผ ๋ง๋ค๋ฉด ๋๋ค.
Last updated