Ref
Hooking, Using Drag and Drop in React
Mastering Drag and Drop using React Hooks, Youtube Tutorial
Mastering Drag and Drop with ReactJS, class 사용
Hooks API Reference, React Docs
장점 1, 재사용성.
: Hooks create a common way to reuse code by incorporating a single function call to use React features, without writing a class.
장점2, Hook으로 이하의 문제를 해결할 수 있다.
: Hooks were also created to solve for some common problems encountered when coding in ReactJS:
Returns a memoized value.
Returns a memoized callback.
The array of dependencies is not passed as arguments to the effect function. Conceptually, though, that’s what they represent: every value referenced inside the effect function should also appear in the dependencies array.
Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase). Doing so will lead to confusing bugs and inconsistencies in the UI.
Instead, use useEffect. The function passed to useEffect will run after the render is committed to the screen.
(주의!!) If you use this optimization, make sure the array includes all values from the component scope (such as props and state) that change over time and that are used by the effect. Otherwise, your code will reference stale values from previous renders. Learn more about how to deal with functions and what to do when the array values change too often.
** draggable element를 누를 때 내부의 다른 elements까지 전부 눌려서 상태 혼선을 일으키는 경우가 있음. 내부 elements가 click을 감지하지않게 하는 방법 있는지 찾아봐야할거 같음.