react-beautiful-dnd(선택 이유)

예전에 유데미 강의를 들으면서 자바스크립트로 구현했던 드래그 앤 드롭을 리액트에서 구현하기 위해서 라이브러리를 찾아보던 중 이전에 사용했던 react-dnd보다 친절한 라이브러리가 없을까 라는 생각으로 npm에서 찾아봤다. 그래서 이번에 작업하면서 사용하기로 결정한 것은 rect-beautiful-dnd였다.

 

일단 주간 사용량이 150만건이고 가장 최근에 이슈가 해결된 것으로 보아 그래도 관리는 되고 있다고 생각이 들었다.

 

직접 구현해도 되지만 왜 라이브러리를 쓰냐 라고 한다면 깔끔한 드래그앤 드롭 이벤트를 구현하려면 dragstart - drag - dragenter - dragover - drop - dragleave 의 6가지 절차를 각각 잘 만들어줘야 하는데 이걸 각각 기능구현하고 애니메이션 작업을 하는 것보다 라이브러리를 사용했을 때 훨씬 간결하고 깔끔한 코드라인이 나온다는 점이다.

(귀찮아서라기보다 개발에 드는 시간을 줄이기 위해서 선택했다. 코딩은 재밌으니까. 이전에 이미 해보기도 했었고.)

 

react-beatiful-dnd 구현에 대한 것은 다음 글에서 필수적으로 다루어야 되는 context부터 함수, 메소드들을 설명하면서 이야기해보자.