[React] React 프로젝트에 Drag and Drop 구현하기(react dnd) 1장

간단한 TODO LIST 앱에 Drag and Drop을 구현해보려 한다.

 

터미널 창에 npm i react-beautiful-dnd 입력하여 모듈을 설치해 줍시다!

 

이 이미지 참고!

<DragDropContext />로 Drag and Drop을 하려는 곳을 감싸 줍니다.

<Droppable />로 감싸진 부분 안에서는 Drag and Drop이 가능합니다.

<Draggable />로 감싸진 부분은 Drag가 가능해 집니다.

위 이미지 처럼 DragDropContext, Droppable, Draggable import 해주시구요.

 

화면 안에 잘 안들어와서 글씨 크기를 많이 줄였습니다. ctrl + 마우스 휠을 굴려 확대해서 봐주세요^^;;

 

가장 먼저 이런식으로 감싸줍니다.

빨간 밑줄 친 부분 보고 잘 따라와 주세요. div태그 생성 해서 감싸 주고요,

이것도 역시 빨간 밑줄 참고해서 작성 바랍니다.

React 18버전부터는 이러한 오류가 나온다고 합니다.

위 그림처럼 src/index.js 에 들어가서 <App />컴포넌트를 감싸고 있는 StrictMode를 벗겨주시면 에러 해결 됩니다!

리스트를 드래그 해보면?

순서가 잘 바뀌네요 성공입니다.^^

일단은 드래그가 되긴 되는데 아직은 드롭을 하는 순간 리스트가 원래대로 돌아오네요.

너무 길어져서 다음장으로 넘어갑니다~