Drag and Drop using Hook

young·2022년 9월 11일
0

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

Hook

장점 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:

  • Over time, complex components become difficult to break or test
  • Classes have a tendency to confuse people and machines
  • Optimizations that actually end up creating a slower path instead of efficient ones
    (memo) 위의 문제들의 예시를 알 수 있으면 좋겠다.

useMemo

Returns a memoized value.

useCallback

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.

useEffect

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.

  • Cleaning up a effect
  • Conditionally firing an effect

** draggable element를 누를 때 내부의 다른 elements까지 전부 눌려서 상태 혼선을 일으키는 경우가 있음. 내부 elements가 click을 감지하지않게 하는 방법 있는지 찾아봐야할거 같음.

profile
재밌는 개발자?

0개의 댓글