(기능구현 회고) 폴더 선택구조 구현

devAnderson·2022년 3월 8일

TIL

목록 보기

70/105

block

별거 아니라고 생각했던 너, 너는 나에게 모욕감을 줬어

🚨 1. 기록의 이유

처음에 아주 간단하리라고 생각했던 파인더 폴더블록구조였으나 상당히 많은 로직이 존재하는 것에 고통을 느끼며 만들었다.

가장 어렵게 되는 부분이 클릭, ctrl+클릭, shift+클릭 의 과정이 모두 연동이 되기 때문에 경우의 수를 아주 잘 구분해서 만들어줘야 한다는 점에서 몹시 어려웠고,

조금만 틀어져도 에러로 이어지는 연결구조 덕택에 다시 구현하라고 하면 시간이 너무 낭비될 것 같으므로 참고자료로 남겨두는 기록이다.

🚨 2. 주요 사항

우선 메인이 되는 컴포넌트는 아래의 하이라이트 부분과 같다

해당 폴더 내에 메인 상태는 크게 3가지로 나누어진다

lastClickedIdx : 폴더 블록 구조 특성상, 일반클릭, ctrl+클릭은 해당 클릭이 되는 요소의 마지막 index를 추적하고 있어야 하기 때문에 만든 상태이다.
clickedList : 클릭이 되어 하이라이트가 되야하는 대상들을 모은 상태이다.
shiftMoveDir : shift+클릭을 할 경우, 마지막 클릭으로 치부되지 않지만 동일한 방향으로 클릭을 했느냐 아니면 반대방향으로 클릭을 했느냐에 따라 기존의 리스트 내용 + 추가내용을 해야하는지, 아니면 완전히 새로 초기화하고 반대편 방향으로까지의 리스트를 업데이트해야하는지가 결정되므로 만든 상태이다.

이를 기반으로, 아주 섬세하게 상태를 분류하면서 업데이트 로직을 짜야 한다.

case a. 오로지 일반 클릭만 할 경우

이 경우에는 클릭된 리스트 배열에 오로지 단 하나, 클릭된 자신의 아이템만 남게 되므로 가장 최하단에 해당 상태 업데이트를 만들어두었다.

case b. ctrl + 클릭을 할 경우

일단, 기본적으로 맥북은 ctrl이 아닌 command키로 값이 전달되므로 두 경우의 수를 가져가야 한다. "event.ctrlKey" , "event.metaKey"

그러고 난 후, ctrl+클릭의 케이스를 보면 만약 클릭을 했는데 리스트에 없는 경우와 클릭을 했는데 이미 리스트에 있는 경우로 나눠야 한다.

만약 존재한다면, 폴더 구조로 확인해보면 클릭된 리스트를 필터해서 없애고, 마지막으로 클릭된 요소를 해당 클릭된 리스트의 가장 끝부분으로 설정되는 것을 확인하였다.

만약 존재하지 않는다면, 기존 배열을 복사해 push한 후, 순서를 재배열한 뒤에 이것을 상태업데이트하면된다. 그리고 가장 마지막에 클릭된 대상을 추적하는 상태업데이트도 같이 진행한다.

참고로, 해당 케이스에서 if중첩으로 깊어지는 것을 피하기 위해 일부러 return을 통해 하단에 있는 구조는 실행하지 않도록 만들어두었다.

case C. shift+클릭을 한 경우

정말 이때가 분기점이 많아지기 시작한다.

만약 아무것도 클릭된 리스트가 없는데 중간에 클릭된다면, 거기까지 모두 클릭되고 마지막으로 클릭된 idx를 0번째로 설정해야 한다

만약 마지막으로 클릭된 인덱스와 동일한 인덱스를 누른다면 해당 인덱스를 제외하고 리스트를 비운다.
그 외에는 shift를 누르고 일정 범위를 선택하는 케이스이다. 이때 중요한것은, 동일 방향으로 클릭해서 움직일 경우라면 기존것과 함께 추가가 되야하지만, 반대방향으로 클릭해서 움직인다면 기존의 것들을 초기화하고 새롭게 범위가 지정된 만큼만 설정되야 한다.

따라서 이것을 위해 선택했을 당시의 인덱스와 저장되어 있던 마지막 클릭 인덱스를 비교해서 최대값과 최솟값을 분리하고, shift이동방향에 대한 자료구조를 확인해서 같은 방향이면 기존것을 복사하면서 업데이트하고, 아니라면 그냥 최댓값과 최솟값 사이로 이루어진 배열을 업데이트시키면 된다.