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์ โ 70์ ์ด์์ด ๋์ด์ผ ํต๊ณผํฉ๋๋ค.