react-draggable 사용 중 findDOMNode 에러

발생 에러 :

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. Learn more about using refs safely here

 

경고: findDOMNode는 StrictMode에서 더 이상 사용되지 않습니다. findDOMNode는 StrictMode 내부에 있는 DraggableCore의 인스턴스를 전달했습니다. 대신 참조하려는 요소에 직접 참조를 추가하세요. 여기에서 ref를 안전하게 사용하는 방법에 대해 자세히 알아보세요.

 

원인 : 

findDOMNode 는 StrictMode에서 제거되었다는 내용으로,  StricMode는 React16에서 추가된 모드로 생명주기에 예상치 못한 오류를 발생시키는 것을 방지하고자 한다고 한다. 

 

해결책 :

// 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:

 function MyComponent() {
   const nodeRef = React.useRef(null);
   return (
     <Draggable nodeRef={nodeRef}>
       <div ref={nodeRef}>Example Target</div>
     </Draggable>
   );
 }

불행히도 <Draggable>이 제대로 작동하려면 원시 액세스가 필요합니다.

기본 DOM 노드에. 경고를 피하려면 `nodeRef`를 전달하십시오.

 

해결 완료!