미니 프로젝트 진행 중 드래그 앤 드롭이 필요하게 되었다.
빨래를 드래그해서 washing machine 안에 넣은 ui를 구현하고 싶었기 때문이다.
이를 위해 코드를 하나하나 치다가 결국 ...
React DnD를 발견하게 되었고 ...
개발자라함은 또 그 개발도 중요하지만 이미 만들어진 것들을 잘 활용하는게
개발자의 역량 아닐까라는 합리화를 하며
DND를 사용해 보것다 .
우선
npm install react-dnd react-dnd-html5-backend를 통해 프로젝트 내에 dnd를 설치
import styled, { keyframes } from 'styled-components';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import WashingMachine from './components/WashingMachine';
import ClothesContainer from './components/ClothesContainer';
function App() {
return (
<DndProvider backend={HTML5Backend}>
<AppCss>
<Background>
<WashingMachine />
<ClothesContainer />
</Background>
</AppCss>
</DndProvider>
);
}
export default App;
사용할 컴포넌트를 DndProvider로 감싸주고 HTML5Backend를 backend프롭스로 넘겨준다 .
drag 할 컴포넌트 파일에
import { useDrag } from 'react-dnd';추가하고
function Clothes({ data }) {
const [{ isDragging }, drag] = useDrag(() => ({
type: 'image',
item: { id: data.id },
collect: (monito) => ({
isDragging: !!monito.isDragging(),
}),
end: (item, monitor) => { //드래그가 끝났을때 작동하는 부분.
// console.log('끝');
// 잘못된 곳에 넣어도 콘솔이 찍힘
}
},
}));
return <Img ref={drag} isDragging={isDragging} data={data}></Img>;
}- isDragging : drag 여부를 true / false로 확인
- type은 드래그 컴포넌트의 타입 정의 => 드랍에서 확인할 때 필요
- item은 드래그 컴포넌트의 메타정보 (?)
- collect는 isDragging 변수가 현재 드래깅중인지 아닌지를 리턴해주는 부분.
세탁기에 드래그한 옷이 떨어져야하니깐
세탁기에 drop옵션을 넣어준다.
import { useDrop } from 'react-dnd';
먼저 useDrop을 임폴트 해준다
function WashingMachine() {
const [{ isOver }, drop] = useDrop(() => ({
accept: 'image',
drop: (item) => openModal(item.id),
collect: (monito) => ({
isOver: !!monito.isOver(),
}),
hover(item, { id: draggedId }) {
console.log(draggedId !== item.id);
//여기서 문 열리고
},
}));
const openModal = (item) => {
console.log(item, 'open');
//문 닫히고
return;
};
return (
<WaterContainer>
<Machine ref={drop}>
<Above></Above>
<Canvas>
<Header>
<Programmer></Programmer>
<LED></LED>
<Button>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</Button>
<Separator>
<span></span>
<span></span>
<span></span>
</Separator>
</Header>
<Flare>
<span>
<p></p>
</span>
<span>
<p></p>
</span>
</Flare>
<Body className="open"></Body>
<InnerBody>
<WaveOne></WaveOne>
<WaveTwo></WaveTwo>
<WaveThree></WaveThree>
<WaveFour></WaveFour>
</InnerBody>
<Footer>
<Edge></Edge>
<Fix></Fix>
</Footer>
</Canvas>
<Base></Base>
</Machine>
</WaterContainer>
);
}- accept: drag의 타입과 일치하는 것만 받음
- drop : 끝나고 난 뒤 실행
- collect: drag의 collect와 같은 기능
- hover : drag랑 호버를 같이 했을 때 실행
기본적인 코드로 진행했을 때 콘솔을 아름답게 찍힌다.
그럼 hooks와 조합하여 나머지 기능을 완성해보자 !
출처
https://react-dnd.github.io/react-dnd/about
https://velog.io/@dowon938/react-dnd-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-drag-drop-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
I'm beginner