react-beautiful-dnd(구현)

이 부분은 실제 내가 구현한 화면을 보면서 이야기를 하면 편하겠다.

프로젝트에서 조커를 픽하면 조커의 위치를 선택하는 화면을 구성한 것.

(혹시나 프로젝트가 궁금하다면 : https://davinci-code.online)

조커 선택 화면

 react-beatiful-dnd는 사용하는 것은 복잡할 수 있지만 이해하고 나니 너무 간단(?) 했다.

 큰 틀은 처음 Context를 할당해주고 Drop 시킬 영영과 Drag 해줄 친구를 설정하고 Context에서 제공되는 메소드를 통해 드래그가 시작될 때 드래그가 끝날 때 등 각각의 이벤트를 만들어 주면 되는 것이었고 이걸 이해했음에도 계속 react-beutiful-dnd 에러가 콘솔에 찍히면서 애를 좀 먹었는데 이것 또한 스택오버플로우를 보면서 해결하니 금방 해결되었다.

 구현된 화면과 처리되는 로직을 보면서 꽤나 만족했다.