๋ฏน์Šค์ธ๊ณผ ํ•˜์ด ์˜ค๋” ์ปดํฌ๋„ŒํŠธ ๋น„๊ต ๋ถ„์„

HOC vs Mixins

ํ•˜์ด ์˜ค๋” ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฆฌ์•กํŠธ ์ง„์˜์˜ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ ๊ธฐ๋ฐ˜ํ•œ ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ ํŒจํ„ด์ž…๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ์˜ ์ฝ”๋“œ๋ฅผ ์žฌ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์ด๊ธฐ๋„ ํ•˜์ง€๋งŒ ์บก์Šํ™”(encapsulation)๊ณผ ์ปดํฌ๋„ŒํŠธ ์ถ”์ƒํ™”๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๊ธฐ๋„ ํ•œ๋ฐ์š”. ์ปดํฌ๋„ŒํŠธ์˜ ๋กœ์ง์„ ํ›ผ์†ํ•˜์ง€ ์•Š๊ณ  ์žฌ์‚ฌ์šฉ์„ฑ์„ ์ตœ๋Œ€ํ•œ ๋Œ์–ด์˜ฌ๋ฆฌ๊ฒ ๋‹ค๋Š” ์ „๋žต์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ํ•œ๋ฒˆ ๋“ค์–ด๋ณผ๊ฒŒ์š”.

HOC๋ฅผ ์ด์šฉํ•œ ์ ‘๊ทผ ๋ฐฉ์‹์˜ ์˜ˆ

์ผ๋ฐ˜์ ์œผ๋กœ HOC๋ฅผ ์ด์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌํ˜„ํ•˜๊ฒŒ ๋˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ปดํฌ๋„ŒํŠธ ๊ด€๊ณ„์—์„œ ์ธต์ด ํ•˜๋‚˜ ๋” ์ƒ๊น๋‹ˆ๋‹ค.

  • ์ผ๋ฐ˜ : ์ƒ์œ„ - ํ•˜์œ„
  • HOC : ์ƒ์œ„ - HOC - ํ•˜์œ„

์œ„์™€ ๊ฐ™์ด HOC๋ฅผ ์ด์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐœ๋ฐœํ•ด ๋‚˜๊ฐ€๋Š” ๊ฒฝ์šฐ ์ƒ์œ„์™€ ํ•˜์œ„์˜ ์ปดํฌ๋„ŒํŠธ ๋กœ์ง์€ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์€ ์ฑ„ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•ด ๋‚˜๊ฐˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ์˜ˆ๋กœ๋Š” ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์— ํŠน์ • ์ด๋ฏธ์ง€๋ฅผ ๋กœ๋”ฉํ•˜๊ธฐ ์œ„ํ•œ url๋งŒ ์ฃผ์ž…ํ•˜๊ณ , ํ•˜์œ„์—์„œ๋Š” ๊ทธ url์„ ๋ฟŒ๋ฆฌ๊ธฐ๋งŒ ํ•˜๋ฉด ๋˜๊ฒ ๋„ค์š”. ์ถ”๊ฐ€์ ์ธ ๋กœ์ง์€ HOC์—์„œ ํ•ด๊ฒฐํ•˜๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.

Mixins๋ฅผ ์ด์šฉํ•œ ์ ‘๊ทผ ๋ฐฉ์‹

์œ„์™€ ๊ฐ™์ด HOC๋ฅผ ์ด์šฉํ•œ ์ ‘๊ทผ ๋ฐฉ์‹์€ ์ปดํฌ๋„ŒํŠธ์˜ ๋ ˆ์ด์–ด๋ฅผ ๋ณต์žกํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ๋‹ฌ๋ฆฌ ๋งํ•ด ์ปดํฌ๋„ŒํŠธ์˜ props, event ๋“ฑ์„ ๋„˜๊ฒจ์•ผ ํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ ๋งŽ์•„์ง€์ฃ . ์ด์— ๋น„ํ•ด mixins๋Š” ๋ฌธ๋ฒ•๋„ ๊ฐ„๋‹จํ•˜๊ณ  ์ž…๋ฌธ์ž์—๊ฒŒ ๋ฒ„๊ฑฐ์šด HOC ์‚ฌ๊ณ  ๋ฐฉ์‹์„ ํ•˜์ง€ ์•Š์•„๋„ ๋˜๋Š” ์ด์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋Šฅ ํ…Œ์ŠคํŠธ ์ธก๋ฉด์—์„œ๋Š” HOC๊ฐ€ mixins๋ณด๋‹ค ์œ ๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ(sepration of concerns)๋ผ๋Š” ์ธก๋ฉด์—์„œ๋Š” ์ปดํฌ๋„ŒํŠธ์˜ ์—ญํ• ์ด ๊นจ๋—์ด ๋ถ„๋ฆฌ๊ฐ€ ๋˜๋ฉด์„œ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

๊ฒฐ๋ก 

๋”ฐ๋ผ์„œ, ๊ฐœ์ธ์˜ ์„ ํ˜ธ๋„ ์ฐจ์ด๊ฒ ์ง€๋งŒ ๋ทฐ์—์„œ๋Š” mixins๋‚˜ scoped slot์„ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•˜๊ณ  ๊ทธ๋ž˜๋„ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋‚˜ ์ปดํฌ๋„ŒํŠธ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๊ทน๋Œ€ํ™”ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด HOC๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ๋ฅผ ์žฌํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.