React-dnd: ๋ถˆ๋ณ€ ์œ„๋ฐ˜: ์„œ๋ฒ„์— ๋ฐฐํฌํ•  ๋•Œ ์˜ˆ์ƒ๋˜๋Š” ๋“œ๋ž˜๊ทธ ๋“œ๋กญ ์ปจํ…์ŠคํŠธ ์ฐพ๊ธฐ

์— ๋งŒ๋“  2019๋…„ 07์›” 31์ผ  ยท  11์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: react-dnd/react-dnd

๋‚ด ์•ฑ์€ ๋กœ์ปฌ ํ™˜๊ฒฝ์—์„œ ์ž˜ ์ž‘๋™ํ•˜์ง€๋งŒ ์„œ๋ฒ„์— ๋ฐฐํฌํ•  ๋•Œ ์ฝ˜์†”์— ์˜ค๋ฅ˜: '๋ถˆ๋ณ€ ์œ„๋ฐ˜: ์˜ˆ์ƒ๋œ ๋“œ๋ž˜๊ทธ ๋“œ๋กญ ์ปจํ…์ŠคํŠธ ์ฐพ๊ธฐ'๊ฐ€ ์„œ๋ฒ„์— ๋ฐฐํฌ๋  ๋•Œ ์ธ์‡„๋ฉ๋‹ˆ๋‹ค.
๋‚˜๋Š” ๋ฌด์—‡์ด ์ž˜๋ชป๋˜์—ˆ๋Š”์ง€ ์ „ํ˜€ ๋ชจ๋ฅธ๋‹ค. ๊ทผ๋ณธ ์›์ธ์ด ๋ฌด์—‡์ธ์ง€ ์กฐ์–ธํ•ด ์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?
๋‚ด ๋กœ์ปฌ ๋…ธ๋“œ ๋ฒ„์ „์€ 8.11.3์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ธฐ๋ณธ ํด๋ผ์šฐ๋“œ ๋…ธ๋“œ ํ™˜๊ฒฝ(v6.7.0)์—์„œ ์ •์  ํŒŒ์ผ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ์„œ๋ฒ„์—์„œ 8.11.3์„ ์‚ฌ์šฉํ•˜๊ณ  ๋นŒ๋“œํ•˜๊ธฐ ์œ„ํ•ด ์ต์Šคํ”„๋ ˆ์Šค ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
๋‚˜๋Š” ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค :
"๋ฐ˜์‘-dnd": "^9.0.1"
"react-dnd-html5-backend": "^9.0.0"
"react-dnd-touch-backend": "^9.0.2"

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ…Œ์ŠคํŠธ ํŒŒ์ผ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋ž˜ํ•‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

<DndProvider backend={HTML5Backend}> <Component /> </DndProvider>

๋ชจ๋“  11 ๋Œ“๊ธ€

ํŒจํ‚ค์ง€๋ฅผ ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ–ˆ๋Š”๋ฐ ๋กœ์ปฌ ํ™˜๊ฒฝ์—์„œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

^๊ฐ€ ์žˆ๊ณ  ๋กœ์ปฌ์—์„œ ์›์‚ฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ ํด๋ผ์šฐ๋“œ์—์„œ npm์„ ์‚ฌ์šฉํ•˜์—ฌ ๋นŒ๋“œํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋กœ์ปฌ ๋ฐ dev์—์„œ ๋‹ค๋ฅธ ํŒจํ‚ค์ง€ ๋ฒ„์ „์„ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  9.3.3 ๋ฐ 9.3.2๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋™์ผํ•œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. '๋ถˆ๋ณ€ ์œ„๋ฐ˜: ์˜ˆ์ƒ๋œ ๋“œ๋ž˜๊ทธ ๋“œ๋กญ ์ปจํ…์ŠคํŠธ ์ฐพ๊ธฐ. ๋งฅ๋ฝ์„ ์žƒ์—ˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  9.2.1์€ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.

+1 ๋‚˜๋„ ์ด๊ฑฐ ๋ฐ›์Œ

ํ™˜๊ฒฝ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

"react": "^16.8.6", "react-dnd": "^9.3.4", "react-dnd-html5-backend": "^9.3.4", "react-dom": "^16.8.6",

์ด๊ฒƒ์€ ์•„๋งˆ๋„ DndProvider ๊ฐ€ ๊ตฌ์„ฑ ์š”์†Œ ํŠธ๋ฆฌ์—์„œ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋„ˆ๋ฌด ๋‚ฎ๊ฒŒ ๋ž˜ํ•‘ํ–ˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

ํ•ด๊ฒฐํ•˜์…จ๋‚˜์š”? ๋‚˜๋Š” ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๊ณ  ๋‚ด ์•ฑ์— ๋ฒˆ๋“ค๋กœ ์ œ๊ณต๋˜๋Š” ๋‹ค๋ฅธ ๋ฒ„์ „์˜ ์—ฌ๋Ÿฌ react-dnd ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ๋Š” ๊ฒƒ์œผ๋กœ ๋‚˜ํƒ€๋‚ฌ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋ˆ„๊ตฐ๊ฐ€๋ฅผ ๋•๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋˜ํ•œ ๊ฐ™์€ ๋ฌธ์ œ์— ์ง๋ฉดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ์•˜์Šต๋‹ˆ๊นŒ? ๊ณต์œ ํ•˜์‹ญ์‹œ์˜ค.

<DndProvider /> ์ˆ˜์ถœํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์ผ๋‹จ ๊ทธ๋ ‡๊ฒŒํ•˜๋ฉด ๋ชจ๋“  ๊ฒƒ์ด ์ž˜ ์ž‘๋™ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ…Œ์ŠคํŠธ ํŒŒ์ผ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋ž˜ํ•‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

<DndProvider backend={HTML5Backend}> <Component /> </DndProvider>

๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ…Œ์ŠคํŠธ ํŒŒ์ผ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋ž˜ํ•‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

<DndProvider backend={HTML5Backend}> <Component /> </DndProvider>

์ด ์ •๋ณด๊ฐ€ http://react-dnd.github.io/react-dnd/docs/overview ํŽ˜์ด์ง€์—์„œ ์ œ๊ณต๋˜๊ธฐ๋ฅผ ์ง„์‹ฌ์œผ๋กœ ๋ฐ”๋ž๋‹ˆ๋‹ค

๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์‚ฌ์šฉ์ž๋Š” ์ด๊ฒƒ์„ ์ฐพ๊ธฐ ์œ„ํ•ด ์ฒด์ŠคํŒ์˜ ์ „์ฒด ๊ตฌํ˜„์„ ์Šคํฌ๋กคํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Expected drag drop context ์˜ค๋ฅ˜๋„ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๋‚˜์—๊ฒŒ ์ด๊ฒƒ์€ DndProvider ์ด useDrag ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ง๊ณ„ ๋ถ€๋ชจ ๋…ธ๋“œ์ธ ๊ฒฝ์šฐ์—๋งŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด์ „ ๋ฒ„์ „(9.0.0)์—์„œ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ํžŒํŠธ๋Š”

์ด๊ฒƒ์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒ๋‹จ ๊ทผ์ฒ˜์— ๋งˆ์šดํŠธ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค( DndProvider ).

ํ™•์‹คํžˆ ํ‹€๋ฆฝ๋‹ˆ๋‹ค.

@markusmauch

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์ €์—๊ฒŒ ์—„์ฒญ๋‚œ ๋‘ํ†ต์„ ๋œ์–ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ, ๋ฌธ์„œ๋Š” ํ™•์‹คํžˆ ์ •ํ™•ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰