📌오류

React-beautiful-dnd 패키지 설치 후에
간단한 샘플을 작업하고 있었는데 오류를 만났다.

오류 내용

A setup problem was encountered.
> Invariant failed:
provided.innerRef has not been provided with a HTMLElement.
You can find a guide on using the innerRef callback functions at:
https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md

provided.innerRef has not been provided with a HTMLElement.

오류는 HTMLElement 형태로 제공되지 않았다는 의미.

✅해결

버전이 잘못 됐는가 의심되어 찾아보니 현재 내가 작업 중인
React 버전에서도 정상적으로 사용이 가능하다는 내용이 많았다.

패키지의 문서와 깃헙을 확인해보니 해결책은 아주 잘 정리되어 있었지만
비교해봐도 필요한 부분은 모두 적용된 상태였다.

import된 컴포넌트나 연관된 요소들 중 HTML로 반환되지 않는 값이 있는지 확인이 필요하다.
이런 식으로 내부의 것을 반환할 수 있게 작성해야 할 것을...

<div className="example">
	{ () => (<div>...</div>) }
</div>

<div className="example2">
	{ () => { return (<div>...</div>) }
</div>

에이 설마 내가 이런 걸... 틀렸지 😊
그냥 그냥 알아 먹지 못하게 적어 놓고 오옹? 왜 안 되지이? 하고 있었다.

<div className="something-like-poop">
	{ () => { <div>...</div> } }
</div>

반환되는 값이 정상적이지 않았으니 위의 오류대로라면
좋은 말로 할 때 그릴 수 있는 HTMLElement 내놓으란 뜻이었다.