[리액트/TS] React-beautiful-dnd를 사용해서 drag & drop 표현하기

 

이번엔 드래그 앤 드랍을 구현해야했습니다. 이전에도 구현했던 적이 있었는데, 그건 이미 누군가 적어둔 코드를 카피 앤 페이스트 했던지라😅 (양심고백). 처음부턱 적용하게 되니 어떤 라이브러리를 쓸까, 또는 라이브러리를 쓸 필요가 있을까? 등의 고민을 하게 되었습니다. 

동료가 라이브러리를 쓰지 않고 구현하려고 했는데, 다시 생각해보니 코드가 너무 복잡해져서 쓰는게 좋을 것 같다고 리서치를 부탁했고, 저는 두 가지의 옵션을 찾았습니다. 

 

 

• react-dnd
• react-beautiful-dnd 

 

 

두 가지를 비교했을 때, beautiful-dnd가 현저히 많이 사용되고, 그 만큼 이슈도 많긴했습니다. ㅎ 

자유도적인 면을 비교했을 때는 react-dnd가 확실히 더 높아보였지만, 저는 칸반을 만드는 것도 아니고 vertical로 드래그 앤 드롭 기능만 구현이 되면 되는 거였기 때문에 자연스러운 애니메이션까지 구현해주는 react-beautiful-dnd를 선택했습니다. 

 

 

제가 참고한 demo code입니다! 

• https://codesandbox.io/s/todoapp-9wstd?file=/src/TaskCard.js

 

 

 

 

 

제가 구현해야하는 드래그앤 드랍은 아래의 그림과 같았습니다. 

• 하나의 리스트 안에 섞이면 안되는 drag&drop 그룹이 2개 있고,
• 빈 칸도 남겨져있어서 그 곳은 drag&drop이 되면 안되는 상황! 
• 1번 드래그 그룹과 2번 드래그 그룹은 섞이면 안됩니다. 

 

 

다행이도 데이터가 섞일 일이 없기때문에 1번 그룹 데이터를 묶고 2번 그룹 데이터를 묶어서 따로 드래그 앤 드룹을 만들어 줍니다. 

그리고 화면에는 총 5개의 슬롯이 보여야하기 때문에 두 그룹을 감싼 컴포넌트 아래에 5에서 두 그룹이 더해진 길이를 뺀 나머지를 빈 칸으로 만들어서 표현해줍니다. 

 

이 다음부터는 쉽습니다. 드래그 앤 드랍만 적용시켜주면 되기때문이죠!

 

  const handleDragItem = (result: any) => {
    try {
      if (!result.destination) {
        return;
      }

      const items = [...outerData];
      const reorederItems = items.splice(result.source.index, 1)[0];
      items.splice(result.destination.index, 0, reorederItems);
      // redux에 아이템 update 시켜줍니다
      dispatch(
        changeSelectItemsIndex({
          from: result.source.index,
          to: result.destination.index,
          isOuter: true,
        }),
      );
    } catch (err) {
      console.error(err);
    }
  };

    <DragDropContext onDragEnd={handleDragItem}>
          <Droppable droppableId="listOuter" direction="vertical">
            {(provided) => (
              <div
                className="listOuter"
                {...provided.droppableProps}
                ref={provided.innerRef}
              >
                {data.map((item: ProductItemsDTO, idx) => {
                  return (
                    <Draggable
                      key={`${item.id}`}
                      draggableId={`${item.id}`}
                      index={idx}
                    >
                      {(provided) => (
                        <div
                          key={item.id}
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                        >
                          <List className="draggable" key={item.id}>
                            <StyledPadding>
                              <StyledDragContainer $active={item.id === index}>
                                <StyledThumImg
                                  src={item.productColors[0].mainImageUrl}
                                  onClick={() => clickProd(item)}
                                />
                              </StyledDragContainer>
                            </StyledPadding>
                          </List>
                        </div>
                      )}
                    </Draggable>
                  );
                })}
               {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext>

 

 

 

 

 

 

 

✨ React Beautiful dnd

https://www.npmjs.com/package/react-beautiful-dnd

react-beautiful-dnd