๋ด ์ฑ์ ๋ก์ปฌ ํ๊ฒฝ์์ ์ ์๋ํ์ง๋ง ์๋ฒ์ ๋ฐฐํฌํ ๋ ์ฝ์์ ์ค๋ฅ: '๋ถ๋ณ ์๋ฐ: ์์๋ ๋๋๊ทธ ๋๋กญ ์ปจํ
์คํธ ์ฐพ๊ธฐ'๊ฐ ์๋ฒ์ ๋ฐฐํฌ๋ ๋ ์ธ์๋ฉ๋๋ค.
๋๋ ๋ฌด์์ด ์๋ชป๋์๋์ง ์ ํ ๋ชจ๋ฅธ๋ค. ๊ทผ๋ณธ ์์ธ์ด ๋ฌด์์ธ์ง ์กฐ์ธํด ์ฃผ์๊ฒ ์ต๋๊น?
๋ด ๋ก์ปฌ ๋
ธ๋ ๋ฒ์ ์ 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"
ํจํค์ง๋ฅผ ์ต์ ๋ฒ์ ์ผ๋ก ์ ๊ทธ๋ ์ด๋ํ๋๋ฐ ๋ก์ปฌ ํ๊ฒฝ์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค.
^๊ฐ ์๊ณ ๋ก์ปฌ์์ ์์ฌ๋ฅผ ์ฌ์ฉํ์ง๋ง ํด๋ผ์ฐ๋์์ 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
๊ฐ์ฌํฉ๋๋ค. ์ด๊ฒ์ ์ ์๊ฒ ์์ฒญ๋ ๋ํต์ ๋์ด์ฃผ์์ต๋๋ค. ์, ๋ฌธ์๋ ํ์คํ ์ ํํ์ง ์์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ค์๊ณผ ๊ฐ์ด ํ ์คํธ ํ์ผ ๊ตฌ์ฑ ์์๋ฅผ ๋ํํด์ผ ํฉ๋๋ค.
<DndProvider backend={HTML5Backend}> <Component /> </DndProvider>