[๋‹ฅํ„ฐ์ฐจ๐Ÿš™] ์ถœ๊ทผ 23์ผ ์ฐจ

hotbreakbยท2022๋…„ 8์›” 9์ผ
8

ํšŒ์‚ฌ์ƒํ™œ

๋ชฉ๋ก ๋ณด๊ธฐ
9/35
post-thumbnail

์˜ค๋Š˜ ์•„์นจ์—๋Š” ๊ณ ๋ ˆ์—๋‹ค ํžˆ๋กœ์นด์ฆˆ์˜ ์ž‘์€ ์ด์•ผ๊ธฐ๋ฅผ ๊ณ„์†ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค๋ฅผ ์ฝ์—ˆ๋‹ค. ํ‰์ƒ์‹œ์— ์˜ํ™”์™€ ์ •์น˜์— ๊ด€์‹ฌ์ด ์—†๋Š”๋ฐ ์ด๊ฒƒ์„ ์—ฎ์€ ๋‚ด์šฉ์„ ์ฝ์œผ๋ ค ํ•˜๋‹ˆ ์ œ๋Œ€๋กœ ๋จธ๋ฆฟ์†์— ๋ฐ•ํžˆ์ง€๋„ ์•Š๊ณ  ์กธ๋ฆฌ๊ธฐ๋งŒ ํ–ˆ๋‹ค. ๊ทธ๋ž˜๋„ ๋‹ค๋ฅธ ์˜์—ญ์„ ๋„“ํ˜€๋ณด๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ ์•„์ง๊นŒ์ง„ ์–ด๋ ต๋‹ค.

์ถœ๊ทผ ์ดํ›„ ๋‚ด๊ฐ€ ์†ํ•œ ๊ณณ์€ "ํƒ€์ด์–ด ์Šค์ฟผ๋“œ"์˜€๋‹ค. ๋‹ฅํ„ฐ์ฐจ ๋‚ด์—์„œ ์ƒ๋‹ด์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š”๋ฐ, ์ƒ๊ฐ๋ณด๋‹ค ํƒ€์ด์–ด๋ฅผ ๊ตฌ๋งคํ•˜๊ณ ์ž ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์ด ๋งŽ์•„ ์ด๊ฒƒ์„ ๋”ฐ๋กœ ๋นผ๊ธฐ๋กœ ํ•˜์˜€๋‹ค. ์ฐจ๋Ÿ‰ ๋ชจ๋ธ์ด๋‚˜ ํƒ€์ด์–ด๋ฅผ ์„ ํƒํ•œ ํ›„ ์žฅ์ฐฉ์ ์„ ์„ ํƒํ•ด ์˜ˆ์•ฝํ•˜๋ฉด ์™„๋ฃŒ! ๐ŸŽ‰ ํƒ€์ด์–ดํ”„๋กœ์—์„œ ๊ตฌ๋งคํ•˜๋ฉด ์ฃผ์œ ๊ถŒ ์ฃผ๋Š” ์ด๋ฒคํŠธ ์ง„ํ–‰์ค‘ (์จ”๋ž€)

์–ด์ œ๋Š” ๋‚ด๊ฐ€ ๋งŒ๋“  ๋ถ€๋ถ„์ด ํผ๋ธ”๋ฆฌ์‹ฑ๋๋‹ค. ํ˜„์žฌ ์•ฑ์—์„œ ๋™์ž‘ํ•œ๋‹ค. ์˜ˆ์•ฝ ํŽ˜์ด์ง€์˜ ์ผ๋ถ€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ QA ํ•˜๋ฉด์„œ ๋ถ€์กฑํ–ˆ๋˜ ๋ถ€๋ถ„์„ ์ฑ„์›Œ๊ฐ”๋‹ค. ๋˜ํ•œ ์‚ฌ์šฉ์ž์˜ ๋ฐ์ดํ„ฐ ์ˆ˜์ง‘์„ ์œ„ํ•ด ์ฝ”๋“œ์— ์ด๋ฒคํŠธ ์‹ฌ๋Š” ๊ฒƒ์„ ์ถ”๊ฐ€ํ•˜์˜€๋‹ค.

์Šค์ฟผ๋“œ๋ฅผ ํ†ตํ•ด ๋ฐฐ์šด ๊ฒƒ

  1. ์ปดํฌ๋„ŒํŠธ์˜ ์—ญํ• ์„ ๋ถ„๋ช…ํ•˜๊ฒŒ ํ•ด์•ผ ํ•œ๋‹ค.

    • ์ด๊ฑด ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๋‹ค ์•Œ๊ณ  ์žˆ๋Š” ๊ฒƒ์ด์ง€๋งŒ ์‹ค์ฒœํ•˜๋Š” ๊ฒŒ ์–ด๋ ต๋‹ค. ์ปดํฌ๋„ŒํŠธ๊ฐ€ props๋ฅผ ๋ฐ›์•„์˜ฌ ๋•Œ ์ด๋ฆ„๋ถ€ํ„ฐ๊ฐ€ ์—ญํ• ์„ ๋‚˜ํƒ€๋‚ธ๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด ์ปดํฌ๋„ŒํŠธ์˜ ์™ธ๋ถ€์—์„œ๋Š” onChangeCount๋ผ๋ฉด, ๊ฐ’์„ ๋ฐ”๊พธ๋Š” ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ๋Š” onChange๋ผ๊ณ  ์ ์–ด์•ผ ํ•œ๋‹ค. ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฐ”๊นฅ์—์„œ count๋ฅผ ๋ฐ”๊พธ๋“  ๋ญ˜ ํ•˜๋“  ์•Œ ๋ฐ” ์•„๋‹ˆ๋‹ค.
  2. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ•˜๋Š” ์—ญํ• ์ด input ๊ฐ™์€์ง€ ์ƒ๊ฐํ•ด๋ด์•ผ ํ•œ๋‹ค.

    • ์˜ˆ์•ฝ ํŽ˜์ด์ง€์—์„œ ๋‚ ์งœ๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” DatePicker๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค. ์ด ์ปดํฌ๋„ŒํŠธ๋Š” ๋‚ ์งœ๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š”๋ฐ, ์™ธ๋ถ€ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฏธ๋ฆฌ ์ง€์ •๋œ ๋‚ ์งœ๋ฅผ ๋ฐ›์•„์˜ค๊ณ , ์ด ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ ๋‚ ์งœ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, input์ฒ˜๋Ÿผ value์™€ onChange๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๊ฑฐ์‹œ์ ์ธ ๊ด€์ ์—์„œ ๋ฐ”๋ผ๋ณด๋ฉด ๋ฌด์—‡์ด ํ•„์š”ํ•œ์ง€ ์•Œ ์ˆ˜ ์žˆ๋‹ค.
  3. ref์™€ const์˜ ์ฐจ์ด์ 

    • ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋  ๋•Œ ref์˜ ๊ฐ’์€ heap์— ์ €์žฅ๋˜์–ด ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ๊ฐ€ ๋ฐ”๋€Œ์ง€ ์•Š๊ณ  ๊ฐ’์ด ์ดˆ๊ธฐํ™”๋˜์ง€ ์•Š๋Š”๋‹ค. ๋ฐ˜๋ฉด const์˜ ๊ฐ’์€ ๋ฆฌ๋ Œ๋”๋ง๋  ๋•Œ ์ดˆ๊ธฐํ™”๋œ๋‹ค.
      const value = 0;
      const valueRef = useRef(0);
  4. ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‚˜๋ˆŒ ๋•Œ ๋„ˆ๋ฌด ์„ธ์„ธํ•˜๊ฒŒ ๋‚˜๋ˆ„๋ฉด ์žฌ์‚ฌ์šฉ์„ฑ์ด ๋–จ์–ด์ง„๋‹ค.

    • Tooltip์„ ๋งŒ๋“ค ๋•Œ ๋ฐฉํ–ฅ(์™ผ์ชฝ, ๊ฐ€์šด๋ฐ, ์˜ค๋ฅธ์ชฝ)์„ ๊ธฐ์ค€์œผ๋กœ ๋งํ’์„ ์ด ๋‹ค๋ฅด๊ฒŒ ๋ณด์ด๋„๋ก ๋งŒ๋“ค์—ˆ๋‹ค. ์ด๋•Œ ๋ฌธ์ œ์ ์€ ํ•˜๋‹จ์— ์žˆ๋Š” ๋ฌผ์Œํ‘œ์˜ ๋””์ž์ธ์ด ๋ฐ”๋€Œ๋ฉด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์“ฐ์ง€ ๋ชปํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋ž˜์„œ ํ•˜๋‹จ์— ์žˆ๋Š” ๊ฒƒ์€ children์œผ๋กœ ๋ฐ›๋Š” ๊ฒƒ์œผ๋กœ ์ˆ˜์ •ํ•˜์˜€๋‹ค.

  1. ์•ˆ๋  ๊ฑฐ ๊ฐ™์„ ๋•Œ๋Š” ๋นจ๋ฆฌ ์ฝ”๋“œ๋ฅผ ๋ฐ”๊พธ์ž.
    • Tooltip์„ ๋งŒ๋“ค ๋•Œ ํŒ€์žฅ๋‹˜๊ป˜์„œ ๋งŒ๋“ค์–ด์ฃผ์‹  ๊ฒƒ์ด ์žˆ์–ด์„œ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•˜๊ณ ์ž ๋ช‡ ์‹œ๊ฐ„์„ ํˆฌ์žํ–ˆ์ง€๋งŒ, ๋ฌผ์Œํ‘œ๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๊ฐ€ children์œผ๋กœ ์™”์„ ๋•Œ๋„ ๋™์ž‘ํ•˜๋Š” ๊ฒƒ์€ ๋ถˆ๊ฐ€๋Šฅํ–ˆ๋‹ค. ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ๊ฒŒ ์•„๊นŒ์›Œ์„œ ์–ด๋–ป๊ฒŒ๋“  ๋  ๊ฑฐ ๊ฐ™์•„์„œ ๋ถ™์žก์•˜๋Š”๋ฐ, ์ฐจ๋ผ๋ฆฌ ์•ˆ๋  ๊ฑธ ๋น ๋ฅด๊ฒŒ ์•Œ์•„์ฑ„๊ณ  ์ƒˆ๋กญ๊ฒŒ ์ฝ”๋“œ๋ฅผ ์งœ๋Š” ๊ฒŒ ํ›จ์”ฌ ํšจ์œจ์ ์ด์—ˆ๋‹ค๋Š” ๊ฒƒ์„ ๋‹ค ๋งŒ๋“ค๊ณ  ๋‚˜์„œ ๊นจ๋‹ฌ์•˜๋‹ค. ์ฝ”๋“œ๋ฅผ ๋ฐ”๊พธ๋Š” ๊ฒƒ์„ ์•„๊นŒ์›Œํ•˜์ง€ ๋ง์ž.
  2. visibleํ•œ ์˜์—ญ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฐฉ์‹์˜ ์ฐจ์ด
    • ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๊ธฐ ์ „์—๋Š” ์•„๋ฌด๊ฒƒ๋„ ์—†๋‹ค๊ฐ€ ๋ˆŒ๋ ธ์„ ๋•Œ ๋‚˜ํƒ€๋‚˜๋Š” ๋ถ€๋ถ„์„ ๋‚˜๋Š” visible && <div> ๋กœ ํ–ˆ๋Š”๋ฐ, ๋ชฉ์บ”๋””๋Š” overflow-hidden h-0 ์œผ๋กœ ํ‰์ƒ์‹œ์— ์ฒ˜๋ฆฌํ•˜๊ณ  visibleํ•˜๋ฉด ์—†์–ด์ง€๊ฒŒ ํ•ด๋’€๋‹ค. ๊ฐ™์€ ๊ฒƒ๋„ ๋‹ค๋ฅด๊ฒŒ ํ‘œํ˜„ํ•˜๋Š” ๊ฒŒ ๋†€๋ผ์› ๋‹ค.

ํ”„๋ก ํŠธ ์Šคํ„ฐ๋””์—์„œ ๋ฐฐ์šด ๊ฒƒ

  1. interface ๋Œ€์‹ ์— type์„ ์‚ฌ์šฉํ•œ๋‹ค.

    • interface๋Š” ๊ฐ™์€ ํƒ€์ž…์„ ์ค‘๋ณตํ•ด์„œ ์„ ์–ธํ•˜๋ฉด ์—๋Ÿฌ๋‚˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ property๊ฐ€ ์ถ”๊ฐ€๋œ๋‹ค. ๊ฐœ๋ฐœ์ž์˜ ์‹ค์ˆ˜๊ฐ€ ์ƒ๊ธธ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฅผ ๋ง‰๊ธฐ ์œ„ํ•ด type์„ ์“ด๋‹ค.
  2. type์„ types.ts์—์„œ ๊ด€๋ฆฌํ•˜์ง€ ์•Š๋Š”๋‹ค.

    • type์ด ์‚ฌ์šฉ๋˜๋Š” ๊ฐ€์žฅ ์ž‘์€ ์ปดํฌ๋„ŒํŠธ์— ์„ ์–ธํ•ด์„œ importํ•˜๋Š” ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•œ๋‹ค. ๊ตณ์ด ์ „์—ญ์—์„œ ์•Œ ํ•„์š”๋Š” ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๋“ฏ. ์ž‘์€ ๊ณณ์—์„œ ํฐ ๋ฐ๋กœ ๋Œ๊ณ  ๊ฐ€์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ. ํƒ€์ž…๋„ ๋งˆ์น˜ ์ปดํฌ๋„ŒํŠธ์ฒ˜๋Ÿผ ์—ฌ๊ธฐ๋Š” ๊ฑฐ ๊ฐ™๋‹ค.

์ด ์™ธ์—,

  • ๋””์ž์ธ์‹œ์Šคํ…œ์€ ์—†๋‹ค. ์‹œ์Šคํ…œ์„ ์œ„ํ•œ ์‹œ์Šคํ…œ์ด ์ƒ๊ธธ ์ˆ˜ ์žˆ๋‹ค๊ณ  ํ•˜์…จ๋‹ค. ๋ถ„๋ช…ํ•˜์ง€ ์•Š์œผ๋ฉด ๋งŒ๋“ค์ง€ ์•Š๋Š” ๊ฒŒ ์ ˆ์•ฝ์ ์ด๋ผ๋Š” ๋œป. ๊ทธ๋ ‡๋‹ค๊ณ  ๋งŒ๋“ค์ง€ ์•Š์„ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. ์•„์ง๊นŒ์ง„ ์‹œ๊ฐ„์ด ๋” ํ•„์š”ํ•˜๋‹ค๋Š” ๊ฒƒ.
  • ํ…Œ์ŠคํŠธ์ฝ”๋“œ๋„ ์—†๋‹ค. ์ด๊ฑฐ ๋งŒ๋“ค ์‹œ๊ฐ„์ด ์—†๋‹ค โฐ ์งธ๊น์งธ๊น
  • ์ฝ”๋“œ ๋ฆฌ๋ทฐ ๊ต‰์žฅํžˆ ์„ฌ์„ธํ•˜๊ฒŒ ํ•ด์ฃผ์‹ ๋‹ค. ์˜คํƒˆ์ž ํ•˜๋‚˜๋„ ์žก๋Š” ํŒ€์žฅ๋‹˜์˜ ๋ˆˆ์ฐ๋ฏธ ๐Ÿ‘€โšก๏ธ
  • ํ•„์š”ํ•˜๋ฉด ์•ผ๊ทผ๋„ ํ•œ๋‹ค. ๊ณต๋ถ€ํ•˜๋Š” ๊ฑฐ ๊ฐ™์•„์„œ ์ข‹๋‹ค. ์˜์ง€ํ•  ์‚ฌ๋žŒ๋“ค๋„ ๋งŽ๋‹ค.

์•ž์œผ๋กœ๋Š”,

  • ๋””์ž์ธ์  ์—๋Ÿฌ๊ฐ€ ์žˆ๋Š” ๋ถ€๋ถ„์„ ๊ณ ์ณ์•ผ ํ•œ๋‹ค.
  • ์œ ์ €๊ฐ€ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ ์ƒ๊ธฐ๋Š” ์—๋Ÿฌ๋ฅผ ํŒŒ์•…ํ•ด์•ผ ํ•œ๋‹ค.
  • ๋‹ค์Œ ์ฃผ์— ํšŒ์‹ํ•œ๋‹ค. ํ•œ ๋ฒˆ๋„ ์•ˆ ํ•ด๋ด์„œ ์•ฝ๊ฐ„ ์„ค๋ Œ๋‹ค.
profile
๊ธ€์Ÿ์ด ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์ž, ํ—ฌ๋ Œ์ž…๋‹ˆ๋‹ค.

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

comment-user-thumbnail
2022๋…„ 8์›” 9์ผ

์ง„์งœ picker๋ž‘ tooltip์€ ์–ด๋”œ๊ฐ€๋‚˜ ๋งŒ๋‚˜๋Š” ui์ธ๊ฑฐ ๊ฐ™์•„์š” ๊ทผ๋ฐ ์ƒ๊ฐํ•ด๋ณด๋ฉด ๊ทธ๋Ÿฐ ๊ธฐ๋ณธ์ ์ธ ์š”์†Œ๋“ค์„ ์–ด๋–ป๊ฒŒ ํ”„๋กœ์ ํŠธ์— ๋งž๊ฒŒ ์„ค๊ณ„ํ•˜๊ณ  ๊ตฌํ˜„ํ•ด๋‚ด๋ƒ๋„ ์ค‘์š”ํ•œ๋“ฏ์š”

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2022๋…„ 8์›” 9์ผ

์Šคํ„ฐ๋””ํ•œ๊ฒƒ์„ ์Šคํ„ฐ๋””ํ•˜๋ฉด์„œ ๋งŽ์ด ๋ฐฐ์›Œ์š”~ ์ด๋Ÿฐ๊ธ€ ๋”์จ์ฃผ์„ธ์š”

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2022๋…„ 8์›” 15์ผ

ํšŒ์‚ฌ ๋‹ค๋‹ˆ๋ฉด์„œ 10๋ฒˆ์งธ๊ธ€...๊ฐํƒ„ํ•˜๊ณ  ๊ฐ‘๋‹ˆ๋‹ค๐Ÿ‘

1๊ฐœ์˜ ๋‹ต๊ธ€