👨‍💻 사건

---

Beautiful-dnd 를 통해, 드래그 앤 드랍을 구현하였다.
Starting Memeber 의 공간을 각 포지션 별로 드랍 공간과 드래그 공간을 만들고, Sub Member 의 공간을 드랍 공간과 드래그 공간을 만들었다.

각 공간에 위치한 선수는 UID 를 통해 구별을 하도록 하였다.

Drag N Drop 컴포넌트

🌎 DragDropContext : Provider 와 같은 dnd 상태를 제공해주는 역할, onDragEnd 를 통해 이벤트 등록가능 ( 빨간색 )
🤏 Droppable : Drop 가능한 영역 표시 ( 검은색 )
👌 Draggable : Drag 가능하도록 만들어줌 ( 초록색 )

위 사진에서 좌측이 Starting Member 의 각 포지션이고, 우측이 Sub Memeber 의 영역이다.

Sub 영역 → UID 배열 ( ex. [12345,123566] )
Starting 각 영역 → position 과 UID 로 이루어진 객체 ( ex. { position : GK , player : 12345 }

버그 발견

Sub → Starting, Starting → Sub, Sub → Sub 의 경우에는 문제없이 동작하였으나, Starting → Starting 으로 동작했을때 문제가 발생했다.

각 위치를 Swap 했을때, 변경은 되나 하나의 위치에서 아래와 같은 문제가 발생하여, 더이상 드래그가 되지 않았다.

❗️ react-beautiful-dndUnable to find draggable with id

시도한 방법

1. Draggable 컴포넌트를 인식하지 못한다고 판단하여, 다른 태그를 제거해 보았다 → 문제없음
2. Draggable ID 문제 확인 → 문제없음
3. onDragEnd 상태 확인 ( result ) → 문제없음
4. 렌더 과정 확인 → 문제발견!

✅ 해결

---

렌더 과정에서 ID 값

Draggalbe ID 값은 현재 위치한 선수의 UID 로 설정 되어있었다.
Draggable ID 가 123 인 [A] 컴포넌트를 456 인 [B] 컴포넌트에 드랍된다고 가정하자.

그럼 과정이 아래와 같을 것이다.

[A] 드래그 → [B] 컴포넌트로 드래그 → [A] 컴포넌트 드랍과 동시에 [B] 컴포넌트 ID를 [A] 컴포넌트의 ID인 123 으로 변경 -> 반대로 [A] 컴포넌트 ID 를 456 으로 변경

"✅ [A] 컴포넌트 드랍과 동시에 [B] 컴포넌트 ID를 [A] 컴포넌트의 ID인 123 으로 변경" 이 과정에서, [A] 컴포넌트도 ID 가 123 이 되고, [B] 컴포넌트도 123 이 된다.

즉❗️ 같은 ID 가 2개가 생긴다는 것이다.

이러면서 에러가 발생하여서, ID를 동일하게 만들지 않기위해
'Position명-UID' 로 해두어 중복을 방지하였다.

💭 개선

---

• Squad 에 포함되지 않는 선수를 클릭하여, DetailPage 로 이동을 하면 정상적으로 렌더가 되는데, 상태관리 Squad 에 포함되거나, DB에 저장된 Squad 에 포함된 선수를 클릭하여 Detail Page 로 이동하면 "Warning: Cannot update a component (HotReload) while rendering a different component (FieldPlayerMainStat)" 에러가 발생하고 있다.