728x90
๋ฐ˜์‘ํ˜•

ContextAPI 1

React] Hook : useContext

useContext ๊ฐœ๋ฐœํ•˜๋‹ค ๋ณด๋ฉด props๋ฅผ ์—ฌ๋Ÿฌ ๋ฒˆ ๋„˜๊ธธ ๋•Œ๊ฐ€ ์ฐพ์•„์˜ค๊ณค ํ•ฉ๋‹ˆ๋‹ค. ์ฆ์กฐ๋ถ€๋ชจ → ์กฐ๋ถ€๋ชจ → ๋ถ€๋ชจ → ์ž์‹ → ... ์ด๋ ‡๊ฒŒ props๋ฅผ ๊ณ„์† ๋„˜๊ธฐ๋‹ค ๋ณด๋ฉด ์—„์ฒญ๋‚œ ๋…ธ๊ฐ€๋‹ค๋ฅผ ํ•ด์•ผ ๋  ์ˆ˜๋„ ์žˆ๊ณ , ์œ ์ง€๋ณด์ˆ˜ ์ธก๋ฉด, ๊ฐ€๋…์„ฑ ๋“ฑ ์•ˆ ์ข‹์€ ์ ์ด ๋งŽ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด ์ „์—ญ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” Context๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. Context๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ฆ์กฐ๋ถ€๋ชจ์—์„œ ์ž์‹๊นŒ์ง€ ํ•œ ๋ฒˆ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (์‚ฌ์šฉํ•˜๊ธฐ์— ๋‹ค๋ฅธ hook๋ณด๋‹ค ๋ณต์žกํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.) createContext(initialValue) context๊ฐ์ฒด ์ƒ์„ฑ createContextํ˜ธ์ถœ ์‹œ, Provider์™€ Consumer ๋ฐ˜ํ™˜ Context.Provider ์ƒ์„ฑํ•œ context๋ฅผ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌ u..

Front-End/React 2023.06.23
728x90
๋ฐ˜์‘ํ˜•