<div id="readability-page-1" class="page"><div>
 <a href="/m/category/React%2C%20Next%2C%20Redux/%E2%9A%9B%20%20React.JS">React, Next, Redux/⚛ React.JS</a><h2>React에서 dnd 구현하기 (react-dnd)</h2>
 <cite>
 DarrenKwonDev
 </cite>
 </div><time>2021. 7. 6. 21:22</time>
 
 
 <a href="#comment" onclick="Utils.smoothScroll(this);return false">
 
 </a>
 
 
 
 
 
 
 
 <div>
 <h4 data-ke-size="size20">web API로서의 dnd API</h4>
<a href="https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API" target="_blank" rel="noopener">https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API</a>
<figure id="og_1625553664399" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="HTML 드래그 앤 드롭 API - Web API | MDN" data-og-description="HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API" data-og-url="https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API" data-og-image="https://scrap.kakaocdn.net/dn/F99AQ/hyKN1STH8W/dsbN4RqSZvnaBCrVndX82k/img.png?width=1920&amp;height=1080&amp;face=0_0_1920_1080"><a href="https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API" target="_blank" rel="noopener" data-source-url="https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API">

<div>
HTML 드래그 앤 드롭 API - Web API | MDN
HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다.
developer.mozilla.org
</div>
</a><img src="https://scrap.kakaocdn.net/dn/F99AQ/hyKN1STH8W/dsbN4RqSZvnaBCrVndX82k/img.png?width=1920&amp;height=1080&amp;face=0_0_1920_1080"></figure>

onDragStart, onDragEnter, onDragEnd 이벤트 리스너를 달아서 dnd를 구현한다.
draggable 속성을 부여하면 해당 DOM은 draggable이 된다.
반면 droppable 속성은 별도로 없으며 onDragEnter로 특정 draggble이 들어왔는지, 그리고 onDragEnd로&nbsp; 놓아졌는지를 체크하는 식으로 구현한다.

dnd의 논리는 다음과 같다. pure javascript dnd 관련 검색해보면 많은 예시들이 있으니 참고하자.

1)&nbsp; draggable의 onDragStart 이벤트를 통해 어떤 draggable이 움직이고 있는지 파악한다.
2) onDragEnter 속성이 있는 DOM위에 draggable이 올라간다면,
&nbsp; 2-1) 실시간으로 옮겨지는 결과를 보여주고 싶다면 onDragEnder에서 순서 state를 바꾼다. (대부분)
&nbsp; 2-2) 시각적으로 옮겨지지 않아도 상관 없다면 별다른 처리를 해주지 않아도 된다. (거의 없을 것으로 예상)
3) 실제로 drop하면 onDragEnd 이벤트가 발생한다.&nbsp;
&nbsp; 3-1) draggable의 순서를 이미 onDragEnter에서 조정해주었다면 딱히 할 작업이 없다. React와 같은 SPA를 사용한다면 isDragging 상태를 지워준다던가, 이벤트 핸들러를 삭제해준다던가 하면 된다.

여기서 주의할 점은, setState를 통해 카드가 이동될 때마다 렌더되지 않도록 하자.
예를 들어 아래와 같은 속성을 가진 카드가 존재한다면, 각 컴포넌트(Card)마다 고유한 속성을 state로 관리하는 것이 아니라 전체 순서를 배열로 다루고 있다가, 변화가 일어나면, 배열의 순서에 맞게 Card를 다시 재배치(재렌더링)하는 것이 효율적이다.
<pre id="code_1625553983026" data-ke-language="javascript" data-ke-type="codeblock"><code>// draggable에 현혹되지 말고 뒤에 있는 data가 중요함
const [ data, setData ] = useState([
 { id: 1, title: "lala", content: "haha" },
 { id: 2, title: "wawa", content: "whawha" },
 ...
])

&lt;Draggable state={ ... } /&gt;</code></pre>

ref code)&nbsp;<a href="https://github.com/asatraitis/react-hooks-dragndrop">https://github.com/asatraitis/react-hooks-dragndrop</a>


<h4 data-ke-size="size20">React-dnd</h4>
<a href="https://react-dnd.github.io/react-dnd/about">https://react-dnd.github.io/react-dnd/about</a>
이번에 주로 사용해 볼 라이브러리이다. 회사에서 쓴다...

사용 전 <a href="https://react-dnd.github.io/react-dnd/docs/overview" target="_blank" rel="noopener">overview</a>를 읽어볼 것을 추천한다고 한다. 건질만한 내용을 정리해보자면 다음과 같다.

1. React DnD uses Redux internally
2. Data의 조작의 결과로 View가 바뀌는 것이지, View를 중심으로 생각해선 안된다. 데이터 중심으로 dnd를 이해할 것
3. moniter와 collect 함수 =&gt; react-dnd의 고유 개념으로, dnd 이벤트에 따라 변화되는 state를 draggable 혹은 droppable의 props로 전달해주는 녀석입니다.
예를 들어 아래의 collect 함수는 monitor.canDrop()이 T/F인지 hightlighted라는 이름으로 props에 들어가, canDrop인 경우에 따라 색을 바꾼다던지 등의 처리를 손쉽게 해줍니다.
<pre id="code_1625573933120" data-ke-language="javascript" data-ke-type="codeblock"><code>function collect(monitor) {
 return {
 highlighted: monitor.canDrop(),
 hovered: monitor.isOver()
 }
}</code></pre>

4. Connectors는 쉽게 말해 그냥 predefined된 역할이고, DOM에게 부여할 수 있습니다.
5. drag source(draggable), drop targets(droppable)은 react-dnd의 가장 기본적인 유닛.


<h4 data-ke-size="size20">그래서 구체적으로 어떻게 쓰는가?</h4>
















Provider setting
<pre id="code_1625483061387" data-ke-language="javascript" data-ke-type="codeblock"><code>import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'

ReactDOM.render(
 &lt;DndProvider backend={HTML5Backend}&gt;
 &lt;App /&gt;
 &lt;/DndProvider&gt;,
 document.getElementById('root')
)</code></pre>







<h4 data-ke-size="size20">beautiful-dnd</h4>
예전에 써놓은 글이 있음. 강의도 있던데, 꽤나 유용했음.
<a href="https://darrengwon.tistory.com/1052" target="_blank" rel="noopener">https://darrengwon.tistory.com/1052</a>




 
 
					
 
 
 </div></div>

HotHandCoding

DarrenKwon

web API로서의 dnd API
https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API
 
onDragStart, onDragEnter, onDragEnd 이벤트 리스너를 달아서 dnd를 구현한다.
draggable 속성을 부여하면 해당 DOM은 draggable이 된다.
반면 droppable 속성은 별도로 없으며 onDragEnter로 특정 draggble이 들어왔는지, 그리고 onDragEnd로  놓아졌는지를 체크하는 식으로 구현한다.
 
dnd의 논리는 다음과 같다. pure javascript dnd 관련 검색해보면 많은 예시들이 있으니 참고하자.
 
1)  draggable의 onDragStart 이벤트를 통해 어떤 draggable이 움직이고 있는지 파악한다.
2) onDragEnter 속성이 있는 DOM위에 draggable이 올라간다면,
  2-1) 실시간으로 옮겨지는 결과를 보여주고 싶다면 onDragEnder에서 순서 state를 바꾼다. (대부분)
  2-2) 시각적으로 옮겨지지 않아도 상관 없다면 별다른 처리를 해주지 않아도 된다. (거의 없을 것으로 예상)
3) 실제로 drop하면 onDragEnd 이벤트가 발생한다. 
  3-1) draggable의 순서를 이미 onDragEnter에서 조정해주었다면 딱히 할 작업이 없다. React와 같은 SPA를 사용한다면 isDragging 상태를 지워준다던가, 이벤트 핸들러를 삭제해준다던가 하면 된다.
 
여기서 주의할 점은, setState를 통해 카드가 이동될 때마다 렌더되지 않도록 하자.
예를 들어 아래와 같은 속성을 가진 카드가 존재한다면, 각 컴포넌트(Card)마다 고유한 속성을 state로 관리하는 것이 아니라 전체 순서를 배열로 다루고 있다가, 변화가 일어나면, 배열의 순서에 맞게 Card를 다시 재배치(재렌더링)하는 것이 효율적이다.
// draggable에 현혹되지 말고 뒤에 있는 data가 중요함
const [ data, setData ] = useState([
 { id: 1, title: "lala", content: "haha" },
 { id: 2, title: "wawa", content: "whawha" },
 ...
])
<Draggable state={ ... } />
 
ref code) https://github.com/asatraitis/react-hooks-dragndrop
 
 
React-dnd
https://react-dnd.github.io/react-dnd/about
이번에 주로 사용해 볼 라이브러리이다. 회사에서 쓴다...
 
사용 전 overview를 읽어볼 것을 추천한다고 한다. 건질만한 내용을 정리해보자면 다음과 같다.
 
1. React DnD uses Redux internally
2. Data의 조작의 결과로 View가 바뀌는 것이지, View를 중심으로 생각해선 안된다. 데이터 중심으로 dnd를 이해할 것
3. moniter와 collect 함수 => react-dnd의 고유 개념으로, dnd 이벤트에 따라 변화되는 state를 draggable 혹은 droppable의 props로 전달해주는 녀석입니다.
예를 들어 아래의 collect 함수는 monitor.canDrop()이 T/F인지 hightlighted라는 이름으로 props에 들어가, canDrop인 경우에 따라 색을 바꾼다던지 등의 처리를 손쉽게 해줍니다.
function collect(monitor) {
 return {
 highlighted: monitor.canDrop(),
 hovered: monitor.isOver()
 }
}
 
4. Connectors는 쉽게 말해 그냥 predefined된 역할이고, DOM에게 부여할 수 있습니다.
5. drag source(draggable), drop targets(droppable)은 react-dnd의 가장 기본적인 유닛.
 
 
그래서 구체적으로 어떻게 쓰는가?
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Provider setting
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
ReactDOM.render(
 <DndProvider backend={HTML5Backend}>
 <App />
 </DndProvider>,
 document.getElementById('root')
)
 
 
 
 
 
 
 
beautiful-dnd
예전에 써놓은 글이 있음. 강의도 있던데, 꽤나 유용했음.
https://darrengwon.tistory.com/1052

React에서 dnd 구현하기 (react-dnd)

댓글