react-draggable 라이브러리를 사용하다 warning 발견

 

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

 

 

react-draggable에서는 아래와 같이 말하고 있다.

If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
Unfortunately, in order for <Draggable> to work properly, we need raw access to the underlying DOM node.
If you want to avoid the warning, pass a `nodeRef` as in this example:

 

해결법

import React, { useRef } from "react";
import Draggable from "react-draggable";

const ImageDrag = () => {
  const nodeRef = useRef(null);

  return (
    <div>
      <Draggable nodeRef={nodeRef}>
        <img ref={nodeRef} src={주소} alt="이미지" />
      </Draggable>
    </div>
  );
};

export default ImageDrag;