에픽 드래그앤 드랍을 보완하다 순서변경을 위한 드래그앤 드랍을 빠르게 움직이면 드래그위치를 알려주는 파란 선이 느리게 움직이는것을 발견함

왜그런가 react dev tools 리렌더링 체커를 켜봤는데 움직일때마다 로드맵 컴포넌트 전체가 리렌더링되고 있었음

이상하게도 헤더까지 리렌더링되고있음

알고보니 에픽 막대를 드래그앤 드랍할때도 이런 리렌더링이 발생했음

다행이게도 날짜변경에는 그런 리렌더링이 발생 x

왜그럴까?

로드맵페이지의 컴포넌트 구성

<Roadmap>
		<div>
	  	[<EpicEntryItem>, <EpicEntryItem>, ...]
		<div>
    <RoadmapCalendar>
				<RoadmapBars>
						[<RoadmapItem>, <RoadmapItem>, ...]

현재 EpicEntryItem 컴포넌트가 드래그앤 드랍 이벤트 리스너가 등록된 컴포넌트인데, 해당 리스너 함수는 상위의 Roadmap 컴포넌트에서 내려주는 형태

그럼 드래그앤 드랍이 발생할때마다 Roadmap 컴포넌트 내부의 상태가 변해 RoadmapCalendar 컴포넌트도 리렌더링 되는건 이해가 됨

근데 RoadmapItem을 움직이면 왜 Roadmap컴포넌트 전체가 리렌더링되는걸까..??

일단 Roadmap에서 관리하던 드래그 상태를 EpicEntryItem 내부에 로컬 상태로 옮겨보자

** 프로파일링 결과 첨부할것 **

옮기기 전 브랜치 → feature/roadmap-misc

옮긴 후 브랜치 → feature/epic-delete

확실히 부드러운 표현이 가능해짐

프로파일러로 확인해봐도 드래그하며 훑고 지나가는 컴포넌트들만 리렌더링됨