Error] findDOMNode is deprecated in StrictMode

1. 에러 발생 원인

react-draggable을 쓸 일이 생겨서 사용하던 중,

동작은 제대로 작동했으나 콘솔에 에러가 떴다. 

에러 이미지

보다시피 findDOMNode 는 StrictMode에서 제거되었다는 내용이다. 

StricMode는 React16에서 추가된 모드로 생명주기에 예상치 못한 오류를 발생시키는 것을 방지하고자 한다고 한다. 

 

참조 : https://ko.reactjs.org/docs/strict-mode.html

Strict 모드 – React

 

react-draggable 같은 경우 직접 개체를 컨트롤하다 보니 발생하는 문제인 것 같다. 

 

2. 해결책

2-1. StrictMode 해제 하기

굳이 strictMode를 사용하지 않는 다면 해제시켜주면 된다. 

// src/index.js

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// 이 부분은 다음과 같이 수정한다

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

 

2-2. nodeRef 주기 👍

사실 어지간한 프로젝트는 StrictMode 사용을 권장할테니, 위의 방법이 최선이라고 할 수 없다. 

제일 최적화된 방법은 useRef를 사용하는 것이다. 

사실 이게 react-draggable 공식 사이트에서도 제시한 방안이다. 

해결책 이미지

https://www.npmjs.com/package/react-draggable

react-draggable

 

import { useRef } from 'react';

const nodeRef = useRef(null);

<Draggable nodeRef={nodeRef}>
  <div ref={nodeRef} className="box"></div>
</Draggable>

이렇게 useRef를 사용하면 깔끔하게 해결된다!