TechBridge

Render Props ํŒจํ„ด

โ† ๋ชฉ๋ก์œผ๋กœ

๐Ÿ“‹ ์‹ค์Šต ์•ˆ๋‚ด

โœ๏ธ CODE EDITOR (JSX)
โ–ถ ์‹คํ–‰ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ์ฝ”๋“œ๋ฅผ ํ…Œ์ŠคํŠธํ•˜์„ธ์š”.
๐Ÿ‘๏ธ ๋‚ด ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋‚ด ์ฝ”๋“œ ์‹คํ–‰ ๊ฒฐ๊ณผ
๐ŸŽฏ ์™„์„ฑ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ชฉํ‘œ
์œ„ ์—๋””ํ„ฐ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•ด์„œ ์ด ๊ฒฐ๊ณผ๋ฌผ๊ณผ ๋˜‘๊ฐ™์ด ๋งŒ๋“ค์–ด๋ณด์„ธ์š”!
๐Ÿ’ก TODO ์ฃผ์„์„ ์ฑ„์›Œ์„œ ์œ„ ๊ฒฐ๊ณผ๋ฌผ์ฒ˜๋Ÿผ ๋™์ž‘ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”
๐Ÿค– AI ์„ ์ƒ๋‹˜์—๊ฒŒ ์งˆ๋ฌธํ•˜๊ธฐ ์ด๋ฒˆ ๊ฐ•์˜ ์ „์šฉ โ–ผ
  ์„ ์ƒ๋‹˜์ด ๋‹ต๋ณ€ ์ค‘์ด์—์š”...
โš ๏ธ ํ•™์Šต ๊ด€๋ จ ์งˆ๋ฌธ๋งŒ ๋‹ต๋ณ€ํ•ฉ๋‹ˆ๋‹ค. ๊ด€๋ จ ์—†๋Š” ์งˆ๋ฌธ์€ ์ž๋™์œผ๋กœ ํ•™์Šต์œผ๋กœ ์œ ๋„๋ฉ๋‹ˆ๋‹ค.
Q1. Render Props ํŒจํ„ด์— ๋Œ€ํ•œ ๊ฐ€์žฅ ์˜ฌ๋ฐ”๋ฅธ ์„ค๋ช…์€?
๐Ÿ’ก Render Props๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ•จ์ˆ˜๋ฅผ prop์œผ๋กœ ๋ฐ›๊ณ , ๊ทธ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ JSX๋ฅผ ๋ฐ˜ํ™˜๋ฐ›๋Š” ํŒจํ„ด์ž…๋‹ˆ๋‹ค. ๋กœ์ง์€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ด€๋ฆฌํ•˜๊ณ , UI๋Š” prop์œผ๋กœ ์ „๋‹ฌ๋œ ํ•จ์ˆ˜๊ฐ€ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
Q2. "children as a function" ํŒจํ„ด์— ๋Œ€ํ•œ ์˜ฌ๋ฐ”๋ฅธ ์„ค๋ช…์€?
๐Ÿ’ก "children as a function"์€ Render Props์˜ ๋ณ€ํ˜•์œผ๋กœ, render๋ผ๋Š” prop ๋Œ€์‹  children์— ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. ๋™์ผํ•œ ๊ฐœ๋…์ด๋ฉฐ ๋” ์ž์—ฐ์Šค๋Ÿฌ์šด JSX ๋ฌธ๋ฒ•์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
Q3. MouseTracker ์ปดํฌ๋„ŒํŠธ๊ฐ€ render prop์„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ๋ฒ•์€?
๐Ÿ’ก render prop์€ ํ•จ์ˆ˜์ด๋ฏ€๋กœ render({ x, y })์ฒ˜๋Ÿผ ํ•จ์ˆ˜ ํ˜ธ์ถœ ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด ํ•จ์ˆ˜๋Š” JSX๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฏ€๋กœ, ํ˜ธ์ถœ ๊ฒฐ๊ณผ๊ฐ€ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค.
Q4. Render Props ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•ด render prop์— inline ํ•จ์ˆ˜ ๋Œ€์‹  ์‚ฌ์šฉํ•˜๋Š” ํ›…์€?
๐Ÿ’ก useCallback์„ ์‚ฌ์šฉํ•˜๋ฉด render prop์œผ๋กœ ์ „๋‹ฌ๋˜๋Š” ํ•จ์ˆ˜๊ฐ€ ๋งค ๋ Œ๋”๋ง๋งˆ๋‹ค ์ƒˆ๋กœ ์ƒ์„ฑ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. PureComponent๋‚˜ React.memo๋กœ ์ตœ์ ํ™”๋œ ์ปดํฌ๋„ŒํŠธ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ๋•Œ ํŠนํžˆ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.
Q5. Render Props๊ฐ€ ํ˜„๋Œ€ React์—์„œ ์ปค์Šคํ…€ ํ›…์œผ๋กœ ๋Œ€์ฒด๋˜๋Š” ๊ฒฝํ–ฅ์ด ์žˆ๋Š” ์ด์œ ๋Š”?
๐Ÿ’ก ์ปค์Šคํ…€ ํ›…์€ ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ๋ฅผ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๊ณ  ๋กœ์ง๋งŒ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Render Props์˜ "Pyramid of Doom" ์ค‘์ฒฉ ๋ฌธ์ œ๋ฅผ ํ›…์œผ๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๐ŸŽ‰

ํ€ด์ฆˆ ํ†ต๊ณผ!

์ ์ˆ˜: 0์  โ€” ์ˆ˜๊ณ ํ•˜์…จ์Šต๋‹ˆ๋‹ค!

๋‹ค์Œ ๊ฐ•์˜๋กœ โ†’
๐Ÿ˜…

์•„์‰ฝ๋„ค์š”!

์ ์ˆ˜: 0์  โ€” 70์  ์ด์ƒ์ด ๋˜์–ด์•ผ ํ†ต๊ณผํ•ฉ๋‹ˆ๋‹ค.