Headless

Headless UI Component

์ปดํฌ๋„ŒํŠธ์˜ ์Šคํƒ€์ผ๊ณผ ๊ธฐ๋Šฅ์„ ๋ถ„๋ฆฌํ•ด์„œ ์„ค๊ณ„ํ•˜๋Š” ๋ฐฉ์‹

  • ์Šคํƒ€์ผ๊ณผ ๊ธฐ๋Šฅ์€ ์„œ๋กœ ๋‹ค๋ฅธ ๊ด€์‹ฌ์‚ฌ์ด๊ธฐ ๋–„๋ฌธ์— ๋ถ„๋ฆฌํ•˜๋Š”๊ฒƒ์ด ์œ ์ง€๋ณด์ˆ˜์™€ ํ™•์žฅ์„ฑ ์ธก๋ฉด์—์„œ ์œ ๋ฆฌํ•จ

    • ์Šคํƒ€์ผ๊ณผ ๊ธฐ๋Šฅ์ด ํ•œ ์ปดํฌ๋„ŒํŠธ์— ์–ฝํ˜€ ์žˆ์œผ๋ฉด, ์„œ๋กœ ์˜ํ–ฅ์„ ์ฃผ๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊ธฐ๊ธฐ ์‰ฌ์›€

    • ์Šคํƒ€์ผ์€ ์ž์ฃผ ๋ฐ”๋€Œ๊ณ , ๋‹ค์–‘ํ•œ ์ผ€์ด์Šค๋ฅผ ๊ณ ๋ คํ•ด์•ผ ํ•ด์„œ ๊ธฐ๋Šฅ๊ณผ ํ•จ๊ป˜ ์—ฎ์—ฌ ์žˆ์œผ๋ฉด ์ˆ˜์ •์ด๋‚˜ ํ™•์žฅ์ด ์–ด๋ ต๊ณ  ๋ณต์žกํ•ด์ง

    • ๋‘ ๊ด€์‹ฌ์‚ฌ๊ฐ€ ๋’ค์„ž์ด๋ฉด ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ๋„ ๋–จ์–ด์ง€๊ณ , ๋ณ€๊ฒฝ ์‹œ ์˜๋„์น˜ ์•Š์€ ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๋ฅผ ์œ ๋ฐœํ•  ์ˆ˜ ์žˆ์Œ

  • ๊ธฐ๋Šฅ์ด ๋‹จ์ˆœํ•œ ์•„ํ† ๋ฏน ์ปดํฌ๋„ŒํŠธ๋ผ๋„, ์ ‘๊ทผ์„ฑ์ด๋‚˜ ์„ธ์„ธํ•œ ๋™์ž‘๊นŒ์ง€ ์ œ๋Œ€๋กœ ๊ตฌํ˜„ํ•˜๋ ค๋ฉด ํ•„์—ฐ์ ์œผ๋กœ ์ผ์ • ์ˆ˜์ค€์˜ ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ ์ฝ”๋“œ๊ฐ€ ์ƒ๊ธฐ๊ฒŒ ๋จ

  • ์Šคํƒ€์ผ์ด ๋‹ค๋ฅด๋”๋ผ๋„ ๊ทผ๋ณธ์ ์ธ ๊ธฐ๋Šฅ์€ ๋™์ผํ•œ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Œ, ๊ธฐ๋Šฅ๋งŒ ๋ถ„๋ฆฌํ•ด๋‘๋ฉด ๋‹ค์–‘ํ•œ ์Šคํƒ€์ผ ์š”๊ตฌ์‚ฌํ•ญ์— ์œ ์—ฐํ•˜๊ฒŒ ๋Œ€์‘ ๊ฐ€๋Šฅ

  • ์ธํ„ฐํŽ˜์ด์Šค์™€ ๊ธฐ๋Šฅ์ด ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒฝ์šฐ ์ผ๊ด„์ ์œผ๋กœ ๋ฐ˜์˜ ๊ฐ€๋Šฅ

  • ๋น„์Šทํ•œ ์ปดํฌ๋„ŒํŠธ์—์„œ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ด์ง (๋ฒ„ํŠผ -> ๋ฒ„ํŠผ, ํ† ๊ธ€, ์Šค์œ„์น˜)

๊ตฌํ˜„ ๋ฐฉ์‹

Hooks

  • ๊ธฐ๋Šฅ์„ Hooks๋กœ ๋ถ„๋ฆฌํ•ด์„œ ๊ด€์‹ฌ์‚ฌ ๋ถ„๋ฆฌ

Compound

ํ•˜๋‚˜์˜ ๋™์ž‘์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ณต์žกํ•œ UI๋ฅผ, ์—ญํ• ์— ๋งž๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ž‘์€ ์ปดํฌ๋„ŒํŠธ๋กœ ๋‚˜๋ˆ„๊ณ  ์™ธ๋ถ€์—์„œ ์œ ์—ฐํ•˜๊ฒŒ ์กฐํ•ฉํ•˜๊ณ  ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“  ํŒจํ„ด

  • ๋‚ด๋ถ€์ ์œผ๋กœ๋Š” Context API๋ฅผ ํ™œ์šฉํ•ด ์ƒํƒœ์™€ ๋กœ์ง์„ ๊ณต์œ 

  • ์‚ฌ์šฉํ•˜๋Š”๊ณณ์—์„œ ๊ฐ ์—ญํ• ์— ๋งž๋Š” ์ปดํฌ๋„ŒํŠธ์— ํ•„์š”ํ•œ props๋งŒ ์ „๋‹ฌํ•˜๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์—, ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ๊ณผ ๋ช…ํ™•์„ฑ์ด ๋†’์•„์ง

Render prop (Function as Child)

prop์œผ๋กœ React.JSX ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•ด์„œ ๋ Œ๋”๋ง์„ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋งก๊ธฐ๋Š” ๋ฐฉ์‹

// ๋ถ€๋ชจ
return (
  <Toggle>
    {( isSelected, toggle ) => (
      <Button onClick={toggle}>
        { isSelected ? 'on' : 'off' }
      </Button>
    )}
  </Toggle>
)

// ์ž์‹
return (
  <Toggle>
    ...
    { props.children({isSelected, toggle}) }
  </Toggle>
)
  • render prop ํ•จ์ˆ˜์— ๊ฐ’์„ ์ธ์ž๋กœ ์ „๋‹ฌํ•˜๋ฉด, ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋Š” ํ•ด๋‹น ๊ฐ’์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ Œ๋”๋ง์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์Œ

  • ๊ถŒํ•œ์— ๋”ฐ๋ผ ์„œ๋กœ ๋‹ค๋ฅธ UI๋ฅผ ๋ณด์—ฌ์ค˜์•ผํ•  ๋•Œ ์ฒ˜๋Ÿผ, ์กฐ๊ฑด์— ๋”ฐ๋ผ ๋ถ„๊ธฐ ๋ Œ๋”๋ง์ด ํ•„์š”ํ•œ ์ƒํ™ฉ์— ์œ ์šฉ

Last updated