React Practice: 드래그 앤 드랍 To Do List 만들어보기

MilkyMilky·2022년 4월 10일

프로젝트 소개

노마드코더의 React Masterclass를 듣던중, 강의에서 구현한 To Do List를 더 발전시켜보고 싶다는 생각이 들었다. React와 React beautiful dnd, 그리고 Recoil State에 대해 더 깊게 파볼겸, 처음부터 다시 코드를 리셋하고 재설계해서 프로젝트를 구현해 나갔다.

해당 프로젝트는 React Typescript로 작성되었다.

프로젝트에서 구현한 기능들은 다음과 같다.

작성한 모든 투두를 localStorage에 저장 및 로드하기 ( ✔ )
투두 삭제하기- Drag & Drop 휴지통 ( ✔ )
보드 생성하기 ( ✔ )
보드끼리도 순서 바꾸기 ( ✔ )
보드가 가진 투두 전체 삭제 ( ✔ )
보드 삭제 ( ✔ )
투두 수정 ( ✔ )
보드 제목 수정 ( ✔ )

https://mangosteen0903.github.io/react-practice-to-do-list/

생각보다 구현하기 어려웠던 이유

-자잘한 버그들

프로젝트를 리셋하고 강의가 아닌 react-beautiful-dnd 공식문서를 보면서 구현했는데, 알 수 없는 이유로 드래그 앤 드랍이 덜컹 거리는듯한 현상이 일어났다.

콘솔창에 오류가 뜨는류의 문제도 아니였기 때문에 도대체 왜 이런 현상이 일어나는지 모르겠어서 공식문서의 데모 소스코드와 비교하면서 문제를 천천히 찾아나갔다.

결론은 css 문제였다. To Do들의 간격을 display:flex;로 두지 않고 margin으로 떨어트려 놓으니 덜컹거리는 듯한 문제가 마법같이 사라졌다.

이런식의 자잘한 버그들이 많았어서 참 애를 많이 먹었었다. 보드간의 이동을 구현했는데 투두들을 이리저리 옮기다보면 보드 위치가 다시 리셋된다던가...

-Recoil state 간의 연계

나만 이런식으로 구현했는지는 모르겠지만, 보드간의 이동과 To Do간의 이동을 구현하기 위해 두가지의 State를 썼다.

보드 State는 단순히 보드 이름만 나열된 Array이고, To Do는 오브젝트들이 모여있는 객체이다.

보드 State는 앱이 처음 시작할때 To Do State에서 key들을 받아와 initialize하는 과정을 거친다. 여기서 뻘짓을 좀 많이 했었는데, 위에서 언급한 보드 위치가 리셋되는 문제가 여기에 있다고 생각해서였다.

보드 State가 위치를 바꾸면, To Do State도 따라서 위치를 바꿔야 하는게 아닌가 싶어서 이리저리 뻘짓을 하다가, 결국엔 안그래도 된다는 결론에 다다라서 많이 허무했던 기억이 난다... 어찌됐던 해결됐으니 다행이다.

-JS의 List 핸들링

몇년동안 Python만 다루어오다가 JS로 넘어오니 Array를 다루는것이 많이 귀찮다... Array의 카피를 만들어서 그 안에서 지지고 볶고해서 다시 넘겨줘야 하는 번거로움을 수고해야 한다. 그래도 이번 프로젝트는 Array를 다룰 일이 많았기 때문에, JS에서 List를 어떻게 다루어야 할지 완전히 감이 잡힌것 같다.