1. drag 상태 관리

dragstart의 origin과 drop의 target 노드를 전역 상태에서 관리하면 setState로 변경될 때마다 리렌더링 발생한다. 요구사항에서는 DOM 변경만 하고 drop 했을 때 상태를 변경하라고 하였으니 전역 상태로 관리해주면 안된다.

class List extends Component {
  constructor(id) {
    super();
    this.id = id;
    this.$origin = null;
    this.$target = null;
  }

  addEvent() {
    return [
      this.createEvent({
        type: "dragstart",
        selector: ".list-container",
        handler: (e) => {
          this.$origin = e.target.closest(".list-container");
          e.dataTransfer.effectAllowed = "move";
        },
      }),
      this.createEvent({
        type: "dragenter",
        selector: ".list-container",
        handler: (e) => {
          if (this.$origin !== e.target.closest(".list-container")) {
            this.$target = e.target.closest(".list-container");
            this.swap(this.$origin, this.$target);
          }
        },
      }),
    ];
  }
}

drag & drop이 발생하는 컴포넌트에서 지역 변수로서 관리해주면 된다.

2. 이벤트 등록 조건 수정

각자의 컴포넌트들을 window에 등록해줄 때, 이벤트 위임이므로 걸러주기 위해 matches를 사용하였는데, 이 경우 이벤트가 발생한 요소만 해당되고 이벤트 발생한 부모 요소를 찾을 수 없어 list 요소에 drag 이벤트가 발생하지 않는 문제가 발생하였다.

// Component
checkEvent() {
    if (this.addEvent) {
      this.addEvent().forEach(({ type, selector, handler }) => {
        if (events.find(event => event.type === type && event.selector === selector)) return;

        if (selector === '') {
          window.addEventListener(type, e => handler(e));
        } else {
          window.addEventListener(type, e => {
            if (!e.target.matches(selector) && !e.target.closest(selector)) return;
            handler(e);
          });
        }

        events = [...events, { type, selector, handler }];
      });
    }
  }

자신을 포함한 부모쪽에서 selector를 찾을 수 있기 때문에 closest도 추가해준다.

3. DOM만 변경하고 상태는 변경시키지 않는 경우

list 드래그 시 dragenter가 발생할 때, DOM을 직접 변경하여 화면에 list가 서로 바뀐 것처럼 보이도록 구현하였다. 하지만, drop을 발생시켰을 때, 1번 list에서 2번 리스트로 dragenter 되었다가 다시 1번 list로 드래그 한체로 돌아와서 drop을 하면 DOM 상에서 바뀌지 않았는데, 상태가 바뀐 것으로 감지하여 상태 lists의 순서를 변경하는 문제가 발생하였다.

// state
const arrangeList = (idOrder) => {
  console.log(state);
  setState({
    lists: state.lists.sort((a, b) => {
      const aOrder = idOrder.findIndex((id) => id === a.id);
      const bOrder = idOrder.findIndex((id) => id === b.id);
      return aOrder < bOrder ? -1 : aOrder > bOrder ? 1 : 0;
    }),
  });
  console.log(state);
};

// List Component
class List extends Component {
  addEvent() {
    ...
    this.createEvent({
        type: 'drop',
        selector: '.list-container',
        handler: e => {
          e.stopPropagation();
          arrangeList([...document.querySelectorAll('.list-container')].map($c => +$c.id));
          return false;
        },
      }),
  }
}

dragenter 이벤트 핸들러에서 DOM을 직접 변경해주었기 때문에, DOM이 변경되었는지 확인하기 위해서는 DOM API를 사용할 수 밖에 없었다.
DOM에 직접 접근하여 drop 이벤트가 발생하였을 때, DOM의 list-container 요소들을 가져와서 id로 배열을 반환하여 인수로 전달해주었다. 이 때 전달한 인수는 화면에 나타난 list의 순서를 의미한다.

페어프로그래밍2의 목적

이번 페어프로그래밍2의 목적은 리액트 프레임워크를 배우기 전에 컴포넌트가 무엇인지 제대로 알고 가기 위함이였다.

컴포넌트란?

모든 컴포넌트는 자신이 어디에 그려질지 알면 안된다.

→ render가 알아야 한다.

컴포넌트는 어떤 모습으로 그려질 것인가에 대한 정보를 가지고 있다.
render가 그 정보들을 가지고 그려주는 역할을 한다.
App 컴포넌트가 자식 컴포넌트까지도 알아야 그려줄 수 있다.
부모 컴포넌트가 자식컴포넌트를 알고 있으면 새롭게 그려질 정보와 이전의 그려진 정보를 비교하여 효율적인 렌더링이 가능하다.

컴포넌트가 부모요소의 컨테이너를 받아서 그곳에 innerHTML로 그리면 이는 부모가 그린 HTML에 종속되는 것이므로 컴포넌트를 독립적으로 사용할 수 없게되므로 컴포넌트 개념을 벗어난다.

효율적인 렌더링을 위해서…

효율적인 렌더링을 위해서는 diff 알고리즘을 구현하였었다. 만약 App 컴포넌트가 일부분을 그리고 나머지 부분을 다른 컴포넌트가 받아서 그리는 하향식 구조로 설계를 하게된다면 diff 알고리즘이 하향식으로 비교해나가는데 이는 어디가 최하단인지 판별해주기가 까다로워진다.

그러므로 재조정은 App 컴포넌트가 해야한다. App 컴포넌트는 다른 컴포넌트에게 그들을 그리기 위한 정보를 전달받아 이것들을 모아서 render 함수로 보내서 화면에 렌더링을 시켜준다. render 함수는 그려주는 역할을 하고 App 컴포넌트는 그려지기위한 정보를 모두 가지고 있어야한다.

소감

코드 작성에 대해 어떤 생각을 가지고 구현했는지 명확하게 얘기할 수 있으면 Ok
- 되는대로 짜는 것이 아니라 명확한 이유가 가지고 짜면 위의 문제가 해결
내가 작성한 코드는 나만 잘 알고 있다. 상대방에게 설명할 때, 상대방이 어느정도 알고 있을 것이라는 생각은 접어두자.

drag이벤트 상태관리