React.js (2) 썸네일형 리스트형 [React] React 프로젝트에 Drag and Drop 구현하기(react dnd) 2장 1장에서 이어집니다~ 빨간 밑줄친 부분을 추가하면 약간 뻣뻣하고 부자연스러웠던 애니메이션이 조금이나마 부드러워집니다. 다음으로 이부분을 이렇게 변경해주면 Drag를 하는 동안에 snapShot.isDragging이 true로 활성화 되면서 색깔이 진해지고 Drag를 해제하고 Drop이 되면 snapShot.isDraggi ng이 false로 돌아오면서 다시 연한색으로 돌아옵니다. div태그가 너무 많아서 아래있던 div의 클래스네임만 끌어와서 위의 div태그에 합쳤습니다~ 이미지에 잘못된 부분이 있는데 }flex items-center 이부분에서 }와 flex 사이에 스페이스바 한번 눌러서 공간을 주세요. 두개가 붙어있으면 css적용이 제대로 안됩니다~ Dragging을 한 이후에 바뀐 순서를 적용하게 .. [React] React 프로젝트에 Drag and Drop 구현하기(react dnd) 1장 터미널 창에 npm i react-beautiful-dnd 입력하여 모듈을 설치해 줍시다! 로 Drag and Drop을 하려는 곳을 감싸 줍니다. 로 감싸진 부분 안에서는 Drag and Drop이 가능합니다. 로 감싸진 부분은 Drag가 가능해 집니다. 위 이미지 처럼 DragDropContext, Droppable, Draggable import 해주시구요. 화면 안에 잘 안들어와서 글씨 크기를 많이 줄였습니다. ctrl + 마우스 휠을 굴려 확대해서 봐주세요^^;; 가장 먼저 이런식으로 감싸줍니다. 빨간 밑줄 친 부분 보고 잘 따라와 주세요. div태그 생성 해서 감싸 주고요, 이것도 역시 빨간 밑줄 참고해서 작성 바랍니다. React 18버전부터는 이러한 오류가 나온다고 합니다. 위 그림처럼 s.. 이전 1 다음
