useContext & Provider

Context API

๋งŽ์€ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ณ€๊ฒฝ์ด ์ž˜ ์ผ์–ด๋‚˜์ง€ ์•Š๋Š” ๊ฐ’์— ๋Œ€ํ•ด ์ปจํ…์ŠคํŠธ API ์‚ฌ์šฉ์„ ๊ณ ๋ ค

  • ์ปจํ…์ŠคํŠธ API: ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ์˜ ๋ชจ๋“  ํ•˜์œ„ ํŠธ๋ฆฌ์— ๊ฐ’์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•

  • ์ปจํ…์ŠคํŠธ ๊ฐ์ฒด: React.createContext() ๋กœ ์ƒ์„ฑ๋จ, ํ”„๋กœ๋ฐ”์ด๋”/์†Œ๋น„์ž๋ฅผ ํฌํ•จํ•œ๋‹ค.

  • Provider ์ปดํฌ๋„ŒํŠธ: ์ปจํ…์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•˜๋ฉฐ, ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ปจํ…์ŠคํŠธ ๊ฐ’์„ ๊ตฌ๋…ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•จ

  • useContext ํ›…: ์ปจํ…์ŠคํŠธ ๊ฐ’์„ ์†Œ๋น„ํ•˜๊ธฐ ์œ„ํ•œ ํ›…์œผ๋กœ, ์ปจํ…์ŠคํŠธ ๊ฐ์ฒด๋ฅผ ์ธ์ˆ˜๋กœ ๋ฐ›์•„ ํ˜„์žฌ ์ปจํ…์ŠคํŠธ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•จ

๋ถˆํ•„์š”ํ•œ ๋ฆฌ๋ Œ๋”๋ง ๋ฐฉ์ง€ํ•˜๊ธฐ

  • Provider ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋“ค์„ children ํ”„๋กœํผํ‹ฐ๋กœ ์ ‘๊ทผํ•˜์—ฌ Provider ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ ์ƒํƒœ๋ฅผ ๊ฐฑ์‹ ํ•ด๋„ children ํ”„๋กœํผํ‹ฐ๋Š” ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ

    • children์€ ์—ฌ์ „ํžˆ ๊ฐ™์€ ๊ฐ์ฒด

  • Context ๊ฐ์ฒด๋กœ ๋ฌถ์ธ ํ”„๋กœํผํ‹ฐ๋“ค์€ ์ด ์ค‘ ํ•˜๋‚˜๋ผ๋„ ๋ณ€๊ฒฝ๋˜๋ฉด, ๋ณ€๊ฒฝ๋œ ๊ฐ’๊ณผ ๋ฌด๊ด€ํ•œ ์ปดํฌ๋„ŒํŠธ๋„ ๋ฆฌ๋ Œ๋”๋ง ๋œ๋‹ค.

    • ์ปจํ…์ŠคํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” '๋ชจ๋“ ' ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋œ๋‹ค.

    • ํ”„๋กœ๋ฐ”์ด๋”์— ๋„˜๊ธฐ๋Š” ์ปจํ…์ŠคํŠธ ๊ฐ’(๊ฐ์ฒด)์ด ๋‹ค์‹œ ์ƒ์„ฑ๋˜์–ด ํ• ๋‹น๋˜๊ธฐ ๋•Œ๋ฌธ

    • ์ด๋Ÿฐ ์ด์œ ๋กœ ํ”„๋กœ๋ฐ”์ด๋” ์ปดํฌ๋„ŒํŠธ์˜ ๋ถ€๋ชจ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋˜์–ด๋„ ๋™์ผํ•˜๊ฒŒ ๋ฆฌ๋ Œ๋”๋ง๋œ๋‹ค.

      • ์ด ์ด์Šˆ๋Š” useMemo๋กœ ์ปจํ…์ŠคํŠธ ๊ฐ’์„ ๊ฐ์‹ธ๋ฉด ํ•ด๊ฒฐ ๊ฐ€๋Šฅํ•˜๋‹ค.

  • ์—ฌ๋Ÿฌ ํ”„๋กœ๋ฐ”์ด๋”๋ฅผ ํ†ตํ•ด ์ปจํ…์ŠคํŠธ ๊ฐ’์„ ๋ถ„ํ• ํ•˜๋Š”๊ฒƒ๋„ ๋ฐฉ๋ฒ•์ด๋‹ค.

    • ํ•จ๊ป˜ ์†Œ๋น„๋˜๋Š” ๊ฐ’๋“ค๋กœ ๋ฌถ์–ด๋ผ

    • ํ•จ๊ป˜ ์†Œ๋น„๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋“œ๋ฌธ ๊ฐ’์— ๋Œ€ํ•ด์„œ๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ปจํ…์ŠคํŠธ๋กœ ๋ถ„๋ฆฌํ•˜๋Š”๊ฒƒ์„ ๊ณ ๋ ค

  • ํ”„๋กœ๋ฐ”์ด๋” ์ค‘์ฒฉ์ด ์‹ฌํ•ด์ง€๋ฉด(wrapper hell) ์—ฌ๋Ÿฌ ํ”„๋กœ๋ฐ”์ด๋”๋ฅผ ํ•œ ๊ณณ์— ๊ทธ๋ฃนํ™”ํ•ด์ฃผ๋Š” ์ปค์Šคํ…€ ํ”„๋กœ๋ฐ”์ด๋”๋ฅผ ๋งŒ๋“ค๋ฉด ๋œ๋‹ค.

Last updated