[React] Props Drilling

์œ ์•„ํ˜„ยท2022๋…„ 12์›” 27์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
14/28
post-thumbnail

โค๏ธโ€๐Ÿ”ฅ Props Drilling

  • ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ state๋ฅผ props๋ฅผ ํ†ตํ•ด ์ „๋‹ฌํ•˜๊ณ ์ž ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋กœ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด ๊ทธ ์‚ฌ์ด๋Š” props๋ฅผ ์ „๋‹ฌํ•˜๋Š” ์šฉ๋„๋กœ๋งŒ ์“ฐ์ด๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฑฐ์น˜๋ฉด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ํ˜„์ƒ
  • ์•„๋ž˜์˜ ๊ทธ๋ฆผ์ฒ˜๋Ÿผ ์ปดํฌ๋„ŒํŠธ A์˜ state๋ฅผ ์ปดํฌ๋„ŒํŠธ D๋กœ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด์„œ ์‚ฌ์ด์— ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ B, C๋ฅผ ๊ฑฐ์ณ์•ผ ํ•œ๋‹ค.

๐Ÿค” Props Drilling์˜ ๋ฌธ์ œ์ 

Props๋กœ ์ „๋‹ฌํ•˜๋Š” ํšŸ์ˆ˜๊ฐ€ 5ํšŒ ์ด๋‚ด๋กœ ๋งŽ์ง€ ์•Š๋‹ค๋ฉด Props Drilling์€ ํฐ ๋ฌธ์ œ๊ฐ€ ๋˜์ง€ ์•Š์ง€๋งŒ ๊ทธ ์ด์ƒ์œผ๋กœ ๋งŽ์•„์ง€๊ฑฐ๋‚˜ ๊ทœ๋ชจ์™€ ๊ตฌ์กฐ๊ฐ€ ๋ณต์žกํ•ด ์ง€๋ฉด์„œ Props์˜ ์ „๋‹ฌ ๊ณผ์ •์ด ๋Š˜์–ด๋‚œ๋‹ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

  • ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ โ†“
  • ์ฝ”๋“œ์˜ ์œ ์ง€๋ณด์ˆ˜์˜ ์–ด๋ ค์›€
  • state ๋ณ€๊ฒฝ ์‹œ, Props ์ „๋‹ฌ ๊ณผ์ •์—์„œ ๋ถˆํ•„์š”ํ•˜๊ฒŒ ๊ด€์—ฌ๋œ ์ปดํฌ๋„ŒํŠธ๋“ค ๋˜ํ•œ ๋ฆฌ๋ Œ๋”๋ง์ด ๋ฐœ์ƒ(์›น ์„ฑ๋Šฅ ์•…์˜ํ–ฅ)

โค๏ธโ€๐Ÿ”ฅ Props Drilling ๋ฐฉ์ง€

  1. ์ปดํฌ๋„ŒํŠธ์™€ ๊ด€๋ จ์žˆ๋Š” state๋Š” ๋  ์ˆ˜ ์žˆ์œผ๋ฉด ๊ฐ€๊นŒ์ด ์œ ์ง€ํ•œ๋‹ค.
  2. ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. (์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ ์‹œ, ์ „์—ญ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ์ €์žฅ์†Œ์—์„œ ์ง์ ‘ state๋ฅผ ๊บผ๋‚ด ์“ธ ์ˆ˜ ์žˆ์–ด Props Drilling์„ ๋ฐฉ์ง€ํ•˜๊ธฐ์— ๋งค์šฐ ํšจ๊ณผ์ ์ด๋‹ค.)

0๊ฐœ์˜ ๋Œ“๊ธ€