์ค๋ ์์นจ์๋ ๊ณ ๋ ์๋ค ํ๋ก์นด์ฆ์ ์์ ์ด์ผ๊ธฐ๋ฅผ ๊ณ์ํ๊ฒ ์ต๋๋ค๋ฅผ ์ฝ์๋ค. ํ์์์ ์ํ์ ์ ์น์ ๊ด์ฌ์ด ์๋๋ฐ ์ด๊ฒ์ ์ฎ์ ๋ด์ฉ์ ์ฝ์ผ๋ ค ํ๋ ์ ๋๋ก ๋จธ๋ฆฟ์์ ๋ฐํ์ง๋ ์๊ณ ์กธ๋ฆฌ๊ธฐ๋ง ํ๋ค. ๊ทธ๋๋ ๋ค๋ฅธ ์์ญ์ ๋ํ๋ณด๋ ค๊ณ ํ๋๋ฐ ์์ง๊น์ง ์ด๋ ต๋ค.
์ถ๊ทผ ์ดํ ๋ด๊ฐ ์ํ ๊ณณ์ "ํ์ด์ด ์ค์ฟผ๋"์๋ค. ๋ฅํฐ์ฐจ ๋ด์์ ์๋ด์ ๋ฐ์ ์ ์๋๋ฐ, ์๊ฐ๋ณด๋ค ํ์ด์ด๋ฅผ ๊ตฌ๋งคํ๊ณ ์ ํ๋ ์ฌ๋๋ค์ด ๋ง์ ์ด๊ฒ์ ๋ฐ๋ก ๋นผ๊ธฐ๋ก ํ์๋ค. ์ฐจ๋ ๋ชจ๋ธ์ด๋ ํ์ด์ด๋ฅผ ์ ํํ ํ ์ฅ์ฐฉ์ ์ ์ ํํด ์์ฝํ๋ฉด ์๋ฃ! ๐ ํ์ด์ดํ๋ก์์ ๊ตฌ๋งคํ๋ฉด ์ฃผ์ ๊ถ ์ฃผ๋ ์ด๋ฒคํธ ์งํ์ค (์จ๋)
์ด์ ๋ ๋ด๊ฐ ๋ง๋ ๋ถ๋ถ์ด ํผ๋ธ๋ฆฌ์ฑ๋๋ค. ํ์ฌ ์ฑ์์ ๋์ํ๋ค. ์์ฝ ํ์ด์ง์ ์ผ๋ถ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋๋ ๊ฒ๋ถํฐ ์์ํด์ QA ํ๋ฉด์ ๋ถ์กฑํ๋ ๋ถ๋ถ์ ์ฑ์๊ฐ๋ค. ๋ํ ์ฌ์ฉ์์ ๋ฐ์ดํฐ ์์ง์ ์ํด ์ฝ๋์ ์ด๋ฒคํธ ์ฌ๋ ๊ฒ์ ์ถ๊ฐํ์๋ค.
์ปดํฌ๋ํธ์ ์ญํ ์ ๋ถ๋ช ํ๊ฒ ํด์ผ ํ๋ค.
onChangeCount
๋ผ๋ฉด, ๊ฐ์ ๋ฐ๊พธ๋ ์ปดํฌ๋ํธ ์์์๋ onChange
๋ผ๊ณ ์ ์ด์ผ ํ๋ค. ์ปดํฌ๋ํธ๋ ๋ฐ๊นฅ์์ count
๋ฅผ ๋ฐ๊พธ๋ ๋ญ ํ๋ ์ ๋ฐ ์๋๋ค.์ปดํฌ๋ํธ๊ฐ ํ๋ ์ญํ ์ด input
๊ฐ์์ง ์๊ฐํด๋ด์ผ ํ๋ค.
DatePicker
๋ฅผ ๋ง๋ค์๋ค. ์ด ์ปดํฌ๋ํธ๋ ๋ ์ง๋ฅผ ์ ํํ ์ ์๊ฒ ํด์ฃผ๋๋ฐ, ์ธ๋ถ ์ปดํฌ๋ํธ์์ ๋ฏธ๋ฆฌ ์ง์ ๋ ๋ ์ง๋ฅผ ๋ฐ์์ค๊ณ , ์ด ์ปดํฌ๋ํธ ์์์ ๋ ์ง๋ฅผ ๋ณ๊ฒฝํ ์ ์๋ค. ์ฆ, input
์ฒ๋ผ value
์ onChange
๊ฐ ์๋ค๋ ๊ฒ์ด๋ค. ๊ฑฐ์์ ์ธ ๊ด์ ์์ ๋ฐ๋ผ๋ณด๋ฉด ๋ฌด์์ด ํ์ํ์ง ์ ์ ์๋ค.ref
์ const
์ ์ฐจ์ด์
ref
์ ๊ฐ์ heap์ ์ ์ฅ๋์ด ๋ฉ๋ชจ๋ฆฌ ์ฃผ์๊ฐ ๋ฐ๋์ง ์๊ณ ๊ฐ์ด ์ด๊ธฐํ๋์ง ์๋๋ค. ๋ฐ๋ฉด const
์ ๊ฐ์ ๋ฆฌ๋ ๋๋ง๋ ๋ ์ด๊ธฐํ๋๋ค.const value = 0;
const valueRef = useRef(0);
์ปดํฌ๋ํธ๋ฅผ ๋๋ ๋ ๋๋ฌด ์ธ์ธํ๊ฒ ๋๋๋ฉด ์ฌ์ฌ์ฉ์ฑ์ด ๋จ์ด์ง๋ค.
Tooltip
์ ๋ง๋ค ๋ ๋ฐฉํฅ(์ผ์ชฝ, ๊ฐ์ด๋ฐ, ์ค๋ฅธ์ชฝ)์ ๊ธฐ์ค์ผ๋ก ๋งํ์ ์ด ๋ค๋ฅด๊ฒ ๋ณด์ด๋๋ก ๋ง๋ค์๋ค. ์ด๋ ๋ฌธ์ ์ ์ ํ๋จ์ ์๋ ๋ฌผ์ํ์ ๋์์ธ์ด ๋ฐ๋๋ฉด ์ปดํฌ๋ํธ๋ฅผ ์ฐ์ง ๋ชปํ๋ค๋ ๊ฒ์ด๋ค. ๊ทธ๋์ ํ๋จ์ ์๋ ๊ฒ์ children
์ผ๋ก ๋ฐ๋ ๊ฒ์ผ๋ก ์์ ํ์๋ค.Tooltip
์ ๋ง๋ค ๋ ํ์ฅ๋๊ป์ ๋ง๋ค์ด์ฃผ์ ๊ฒ์ด ์์ด์ ๊ทธ๋๋ก ์ฌ์ฉํ๊ณ ์ ๋ช ์๊ฐ์ ํฌ์ํ์ง๋ง, ๋ฌผ์ํ๊ฐ ์๋ ๋ค๋ฅธ ์ปดํฌ๋ํธ๊ฐ children
์ผ๋ก ์์ ๋๋ ๋์ํ๋ ๊ฒ์ ๋ถ๊ฐ๋ฅํ๋ค. ์ฝ๋๋ฅผ ์์ ํ๋ ๊ฒ ์๊น์์ ์ด๋ป๊ฒ๋ ๋ ๊ฑฐ ๊ฐ์์ ๋ถ์ก์๋๋ฐ, ์ฐจ๋ผ๋ฆฌ ์๋ ๊ฑธ ๋น ๋ฅด๊ฒ ์์์ฑ๊ณ ์๋กญ๊ฒ ์ฝ๋๋ฅผ ์ง๋ ๊ฒ ํจ์ฌ ํจ์จ์ ์ด์๋ค๋ ๊ฒ์ ๋ค ๋ง๋ค๊ณ ๋์ ๊นจ๋ฌ์๋ค. ์ฝ๋๋ฅผ ๋ฐ๊พธ๋ ๊ฒ์ ์๊น์ํ์ง ๋ง์.visible && <div>
๋ก ํ๋๋ฐ, ๋ชฉ์บ๋๋ overflow-hidden h-0
์ผ๋ก ํ์์์ ์ฒ๋ฆฌํ๊ณ visibleํ๋ฉด ์์ด์ง๊ฒ ํด๋๋ค. ๊ฐ์ ๊ฒ๋ ๋ค๋ฅด๊ฒ ํํํ๋ ๊ฒ ๋๋ผ์ ๋ค.interface
๋์ ์ type
์ ์ฌ์ฉํ๋ค.
interface
๋ ๊ฐ์ ํ์
์ ์ค๋ณตํด์ ์ ์ธํ๋ฉด ์๋ฌ๋๋ ๊ฒ์ด ์๋๋ผ property๊ฐ ์ถ๊ฐ๋๋ค. ๊ฐ๋ฐ์์ ์ค์๊ฐ ์๊ธธ ์ ์๊ธฐ ๋๋ฌธ์ ์ด๋ฅผ ๋ง๊ธฐ ์ํด type
์ ์ด๋ค.type์ types.ts์์ ๊ด๋ฆฌํ์ง ์๋๋ค.
์ง์ง picker๋ tooltip์ ์ด๋๊ฐ๋ ๋ง๋๋ ui์ธ๊ฑฐ ๊ฐ์์ ๊ทผ๋ฐ ์๊ฐํด๋ณด๋ฉด ๊ทธ๋ฐ ๊ธฐ๋ณธ์ ์ธ ์์๋ค์ ์ด๋ป๊ฒ ํ๋ก์ ํธ์ ๋ง๊ฒ ์ค๊ณํ๊ณ ๊ตฌํํด๋ด๋๋ ์ค์ํ๋ฏ์