[React / VanillaJS] UI ์์ ์ง์ ๋ง๋ค๊ธฐ Part 2
๋ํ์ ์ธ UI ์์๋ค์ React ๋ฒ์ ๋ฐ ์์ JavaScript ๋ฒ์ ์ผ๋ก ๋ง๋ค์ด ๋ณด๋ฉด์, Web API๋ฅผ ํ์ฉํ ๋ค์ํ ๊ด์ ๊ณผ ๋ฐฉ๋ฒ์ ๊ฒฝํํ๊ณ , ํ๋ก ํธ์๋ ๊ฐ๋ฐ ์ค๋ ฅ์ ํ์ธต ๋์ด์ฌ๋ ค ๋ณด์ธ์.
์๊ฐ์ 313๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ

๋ค๋ฅธ ์๊ฐ์๋ค์ด ์์ฃผ ๋ฌผ์ด๋ณด๋ ์ง๋ฌธ์ด ๊ถ๊ธํ์ ๊ฐ์?
- ํด๊ฒฐ
์ ๋ค๋ฆญ์ ์ฌ์ฉํ์ค ๋ ์ฝค๋ง
<img src="https://cdn.inflearn.com/public/files/posts/7d23899b-d523-43fd-86f3-a149ebb964ab/e54ae683-aca0-46a0-8f13-eab436979e92.png" media-type="img"
reacttypescriptdomuivanilla-jsoridori2705
ใป
0
147
2
- ํด๊ฒฐ
popover createPortal ๋ฐฉ์์์
portalํ ์์๋ฅผ ์๋์ฒ๋ผ ์์ฑํ๊ณ ์๋๋ฐ ์ ๋ ์ด๊ฑฐ๋ฅผ popover๋ฅผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์๊ฐ ์ ๊ฒฝ์์ธ ์ ์๋๋ก ํ๋ ๋ฐฉ๋ฒ์ด ์์ง์์๊น ํด์ ๋
reacttypescriptdomuivanilla-jsoridori2705
ใป
0
135
2
- ํด๊ฒฐ
์ค๋ต๋ฐ๋ฅผ ๋ง๋ค ๋ snackBarContext์ snackBarSetContext
์ค๋ต๋ฐ๋ฅผ ๋ง๋ค ๋ snackBarContext์ snackBarSetContext๋ฅผ ๋๋ก ๋๋์ ์ ๊ด๋ฆฌํ๋๋ฐ ์ด๋ ๊ฒ ํ์ ์ด์ ๋ ์ฅ์ ์ ์ ํํ ์ ์ ์์๊น์?๋จ์ ๋ ์๋ ค์ฃผ์๋ฉด ๊ฐ์ฌ๋๋ฆฌ๊ฒ ์ต๋๋ค.
reacttypescriptdomuivanilla-jsoridori2705
ใป
0
138
2
- ํด๊ฒฐ
snackbar๋ฅผ createportal๋ฅผ ์ป์ ๋ ๊ฐฏ์ ์กฐ์ ์ด ๊ฐ๋ฅํ๊ฐ์?
context๋ฅผ ์ป์๋๋ data length๋ก ์ฒดํฌํ๋ฉด ์ต๋ 5๊ฐ๊ฐ ๋์ง ์๊ฒ ๋์ด์ ์คํ๋์ง ์๊ฑฐ๋ ๊ฐ์ฅ ๋ฐ์ ์ค๋ต๋ฐ๋ฅผ ๋ซ์ ๋ฒ๋ฆฐ๋ค๋๊ฐ ์ฝ๊ฒ ๊ตฌํ์ ๊ฐ๋ฅํ ๊ฒ ๊ฐ์๋ฐ portal๋ฅผ ์ฐ๋ฉด ์ปจํธ๋กค์ด ๊ฐ๋ฅํ๊ฐ? ๊ถ๊ธํฉ๋๋ค
reacttypescriptdomuivanilla-js์ง๋
ใป
0
184
1
- ํด๊ฒฐ
useCallback, useMemo์ ์ฐจ์ด์ ๋ํด์ ๊ถ๊ธํฉ๋๋ค.
[์ ๋ ํธ๋ฐ์ค (3/5) headless #2 hook ์ ์ฉ] ๋ถ๋ถ์์ getTriggerProps/getListProps ์ฒ๋ผ ๊ฐ ์ปดํฌ๋ํธ๊ฐ ํ์ํ ๊ฒ๋ค์ useCallback์ผ๋ก ๊ฐ์ธ
reacttypescriptdomuivanilla-js๋ณด๋
ใป
0
346
1
- ํด๊ฒฐ
createPortal ํ์ฉํด์ modal ๋ง๋ค ๋ ํ์ฉํ MutationObserver ์ฝ๋ ๊ด๋ จ ์ง๋ฌธ
import { useEffect, useRef } from "react" const mutationObserverOption: MutationObserverInit = { childList: true, subtree: true } con
reacttypescriptdomuivanilla-jsworking.zima
ใป
0
345
3
- ํด๊ฒฐ
๊ฐ์์๋ฃ (๋ณด์ผ๋ฌํ๋ ์ดํธ) ๋ค์ด๋ก๋ ๊ด๋ จ ์ง๋ฌธ
๊ฐ์ ์ปค๋ฆฌํ๋ผ์ ๋ณด๋ฉด "๊ฐ์์๋ฃ (์์ฑ๋ณธ)"๊ณผ "๊ฐ์์๋ฃ (๋ณด์ผ๋ฌํ๋ ์ดํธ)" ๋ค์ด๋ก๋๋ฅผ ๊ตฌ๋ถํด ๋์ จ๋๋ฐ, ๋ค์ด๋ก๋๋ "๊ฐ์์๋ฃ (์์ฑ๋ณธ)"๋ง ๋ง ๋ฐ๊ฒ ๋์ด ์๋๊ฑฐ ๊ฐ์ต๋๋ค.ํน์ ๋ณด์ผ๋ฌํ๋ ์ดํธ ๊ฐ์์๋ฃ๋ ์์ง ์ค๋น๊ฐ ๋์ง ์์๊ฒ์ผ๊น์?์์ฑ๋ณธ <a
reacttypescriptdomuivanilla-jsworking.zima
ใป
0
241
1
- ํด๊ฒฐ
๋ชจ๋ฌ๋ง๋๋ ๋ฐฉ์ ์ง๋ฌธ
์๋ ํ์ธ์ ์ฌ๋จ๋ ๊ฐ์ ๋๋ฌด ์๋ฃ๊ณ ์์ต๋๋ค์ด๋ฒ ๊ฐ์ ๋ฃ๊ณ ์๊ฐ์ด ๋๋๊ฒ ์ ๋ ์ง๊ธ๊น์ง ๋ชจ๋ฌ์ ๋ง๋ค๋ ๊ฐ๊ฐ์ ๋ชจ๋ฌ์ ์์ฑ๋ณธ์ผ๋ก ๋ง๋ค๊ณ ๋ชจ๋ฌ์ ๋ถ๋ฅด๋ ํธ๋ฆฌ๊ฑฐ๋ฒํผ์ด๋ ๊ทธ,๋ฐ๊ฒ์ ์ํ๋ฅผ ์ฃผ๊ณ ์ํ์ ๋ณ๊ฒฝ์๋ฐ๋ผ ๊ทธ ์๋์ ๊ทธ๋ฆฌ๋ ๋ฐฉ์์ผ๋ก ๋ชจ๋ฌ์ ๊ตฌํํ์ต๋๋ค<
reacttypescriptdomuivanilla-js์ฑ๋ฏผ์
ใป
0
231
1
- ํด๊ฒฐ
์บ๋ฌ์ ๋์์๋ฆฌ
์๋ ํ์ธ์ ์ฌ๋จ๋ ๊ฐ์ ๋๋ฌด ์๋ฃ๊ณ ์์ต๋๋ค์ ๊ฐ ์ง๊ธ ์บ๋ฌ์ ๊ณต๋ถํ๋ฉด์ ๊ถ๊ธํ๊ฒ์ด์บ๋ฌ์ ๊ฐ ์ด๋ฏธ์ง์ ref๋ฅผ ๋ค ํ ๋นํ๋ค์ฌ๋ผ์ด๋ ์ด๋ฒคํธ ํ์ดํ ํด๋ฆญ์ ์ด๋ํ ์ธ๋ฑ์ค๋ฅผ ๊ณ์ฐํ๊ณ ์ธ๋ฑ์ค๋ฅผ ๊ธฐ์ค์ผ๋ก c
reacttypescriptdomuivanilla-js์ฑ๋ฏผ์
ใป
0
295
2
- ํด๊ฒฐ
dropdown ๋ด๋ถ์์ data์ ํ์ ์ ์์์ผ ํ ๊น์?
์์ ์ง๋ฌธ๋ค์์ ์น์ ํ๊ฒ ๋ต๋ณ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค! ํญ์ ๋ง์ด ๋ฐฐ์ฐ๊ณ ์์ต๋๋ค <DropDown.Trigger
reacttypescriptdomuivanilla-js๊น์ฒจ์ง
ใป
0
188
1
- ํด๊ฒฐ
Provider๋ฅผ ์ธ๋ถ์ ๋ ธ์ถํ๋ ๊ฒ๋ณด๋ค ๋ด๋ถ ๋ก์ง์ผ๋ก ์จ๊ธฐ๋ ๊ฒ์ ์ด๋ค๊ฐ์?
reacttypescriptdomuivanilla-js๊น์ฒจ์ง
ใป
0
278
2
- ํด๊ฒฐ
keyEventMap๋ฅผ ์ ์ญ์ ๊ตฌํํ์ ์ด์ ๊ฐ ๊ถ๊ธํฉ๋๋ค!
const KeyEventMap: Partial['key'], KeyEventHandler>> = { ArrowUp: (e, { size, focusIndex
reacttypescriptdomuivanilla-js๊น์ฒจ์ง
ใป
0
265
2
- ํด๊ฒฐ
ํ ์ผ์๋๋ก ํฌํ๋ก ๋ชจ๋ฌ์์ฑ์ ๋ค์ ํด๋ฆญ์ด ์๋ฉ๋๋ค
<div id='modalRoot' ref={ref} className='fixed inset-0 z-100 flex flex-col items-cent
reacttypescriptdomuivanilla-js๋ ๋ ๊ตฟ
ใป
1
307
2






