Drag & Drop

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 React PairProgramming과제를 진행하며 회고를 정리하는 글이다.

 

- 현상 및 발견

JS에서는 드래그가 발생하는 DOM을 직접 조작하는 방식이었는데 React는 드래그가 발생하면 상태를 변경하여 리 렌더를 하는 방식으로 코드를 작성해야 했다.

   

- Event 처리

// JS에서 Drag Event

$draggableList.addEventListener('dragenter', e => {
    e.preventDefault();

    e.target.closest('li')?.classList.toggle('over');
  });

$draggableList.addEventListener('dragleave', e => {
  e.preventDefault();

  e.target.closest('li')?.classList.toggle('over');
});

const [over, setOver] = React.useState(null);

const handleDragEnter = idx => {
    setOver(idx);
  };

<Draggable draggable={true} onDragEnter={() => handleDragEnter(i)}>
		<Language>{language}</Language>
    <GiHamburgerMenu />
</Draggable>

   

- 상태로 리 렌더링

// JS
swap($dropTarget, $dragTarget);

checkLanguageOrder($container);

// React
const [languages, setLanguages] = React.useState(fisherYatesShuffle(LANGUAGES));
...
setLanguages(newLanguages);
...

 

- 배운점

JS에서는 dragenter와 dragleave이벤트가 둘 다 필요 하였지만 React에서는 dragenter에서 리 렌더링을 하기 때문에 dragleave이벤트 처리가 필요 없어졌다.

   

 

- 선언

react-draggable 같은 라이브러리도 검색해봤었는데 사용법을 익히는데 시간이 걸릴 것 같아 아직 사용해보지 못했다.

종강하고 개인적으로 다시 짜볼 때 써봐야겠다.