useContext

Develop/React.js

[React] props ๋Œ€์‹  Context API ์“ฐ๊ธฐ

props ๋Œ€์‹ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์€? props ์‹ซ์œผ๋ฉด ์“ธ ์ˆ˜ ์žˆ๋Š”๊ฒŒ Context API(๋ฆฌ์•กํŠธ ๊ธฐ๋ณธ๋ฌธ๋ฒ•) ๊ณผ Redux(์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ) ๊ฐ€ ์žˆ๋‹ค. Context API๋Š” ์‹ค๋ฌด์—์„œ๋Š” ์ž˜ ์“ฐ๋Š” ํŽธ์€ ์•„๋‹ˆ๋ผ๊ณ  ํ•จ. ์ฐธ๊ณ ๋กœ ์•Œ์•„๊ฐ€์ž. ์–ธ์ œ ์“ฐ๋Š”๊ฐ€? ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์— ์žˆ๋Š” state ๋ฅผ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ ์“ฐ๊ณ  ์‹ถ์œผ๋ฉด props ๋ฅผ ์ผ์—ˆ๋‹ค ๊ทผ๋ฐ ์ž์‹์˜ ์ž์‹์˜ ์ž์‹์˜.... ์ž์‹์˜ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ props๋ฅผ ์ „์†กํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์ž‘์„ฑํ•˜๊ธฐ ํž˜๋“ค ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฐ ์˜๋ฏธ๋กœ ์“ฐ๋Š” ๊ฒŒ Context API ์ด๋‹ค. ๋จผ์ € ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์— ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ•œ๋‹ค. export let Context1 = React.createContext(); function App(){ let [์žฌ๊ณ , ์žฌ๊ณ ๋ณ€๊ฒฝ] = useState([10,11,12]); (..

wonny_dev
'useContext' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก

...