이제 드래그는 되도록 만들었으니 드랍했을때 상태를 고정하는 함수를 만들어야 한다. 우리는 함수를 통해 정보를 전달해야하기는 하나 우선 화면을 바꾸는데 집중해서 함수를 만들어야 한다. 현재 적용하고 있는 함수는 onDragEnd 함수 하나밖에 없다. onDragEnd의 인자로 어떤 것이 전달되는지 확인해보면 아래와 같다. const onDragEnd = (res) => { console.log("목표 드래그") console.log("res", res) } 우선 목표 드래그의 onDragEnd 함수에 res 라는 인자를 전달하고 console.log로 찍어볼 수 있도록 했다. 그랬더니 우리가 이전에 지정한 draggableId를 포함해 combine, destination, draggableId, mode..

Goal 컴포넌트를 드래그 할 수 있도록 만들었다. 이제 그 내부의 Todo 부분을 드래그 할 수 있도록 해야하는데 내부도 Droppable 영역으로 지정해야 하기 때문에 Droppable 태그를 넣어준다. 위와 같은 순서가 될 것이다. 이번에 리턴해 줄 Todo 는 Goal 안에서 map으로 돌고 있는 컴포넌트다. 아래와 같이 생겼다. return ( {/* Goal 컴포넌트 시작 */} {data.goalTitle} {/* Goal 컴포넌트 종료 */} {/* Todo 컴포넌트 map 시작 */} {data.todos.map((data, idx) => { return ( ); })} {/* Todo 컴포넌트 map 종료 */} ); 현재 Goal 컴포넌트가 드래그 되고 있고 이번에는 이 내부의 Tod..

요소를 드래그 해 순서를 바꾸는 기능을 구현하고 있다. 드래그 앤 드랍은 HTML5에서 기본적으로 API를 제공하고 있다. 하지만 해당 기능을 일일이 적용해서 드래그 기능을 만들게 된다면 시간도 오래걸리고 어렵기 때문에 라이브러리를 사용한다. 엄청 다양한 라이브러리가 있고 여러 라이브러리를 테스트해봤는데 atlassian 의 react-beautiful-dnd 라이브러리가 가장 단순해서 적용하기 쉬웠었다. 하지만 실제로 내 프로젝트에 적용하기가 너무 어려워서 고전을 겪고 있다. 일단 순서를 바꿔야 하는 정보들을 map으로 돌려서 렌더링 하고 있고, 중첩을 지원하지 않는 다양한 제약이 있긴 하다. 그래서 다시 한 번 차근차근 개념에 대해 생각해보면서 글을 적으면서 만들어보고 성공이냐 실패냐를 정해야 할 거..