# react-beautiful-dnd

sumi-0011

error 1 : Prop data-rbd-draggable-context-id did not match Drag and Drop(DND)을 구현해야하는 요구사항이 있어 DND 라이브러리인 react-beautiful-dnd를 사용하여 DND를 구현하는 와중 과 같은 에러를 만나게 되었다. DND 예제를 똑같이 따라했을 뿐인데, 내 환경에서만 돌아가지 않았었다. 해당 프로젝트의 환경은 밑과 같았다. 예제 환경만 다른 부분은 next.js를 사용하고 있는 부분이라고 생각하여 next.js 위주로 집중적으로 문제를 찾아보았다. 문제 해결 방법 찾기 스택 오버플로우를 참조하여 해답을 찾을 수 있었다. Next.js과 같은 경우에는 서버에서 코드가 돌아갈 수도 있는데, react-beautiful-dnd 라이브러리가 초

yunj05763

나는 팀 프로젝트를 하던 중 DragAndDrop이라는 기능을 구현하라고 하여 구글링을 통하여 DnD의 구현을 도와주는 라이브러리를 찾던 중 라는 라이브러리를 찾게되었다. react에서 설치는 이고, typescript를 사용할 경우 로 install을 받으면 된다. react-beautiful-dnd에서 지원하는 것들 DragDropContext : DragDropContext는 DnD가 일어나는 전체영역을 말한다. 여기서 드래그 앤 드랍기능을 구현을 하게된다 (onDragEnd={...}) Draggable : Draggable은 쉽게 말해서 drag당하는 객체를 묶어주는 태그이다. Droppable : Droppable은 drop을 할 수 있게 해주는 kanban보드 영역이다 ![](https://velog.velcdn.com/images/yunj05763/post/3

nine9

📌오류 React-beautiful-dnd 패키지 설치 후에 간단한 샘플을 작업하고 있었는데 오류를 만났다. 오류 내용 provided.innerRef has not been provided with a HTMLElement. > 오류는 HTMLElement 형태로 제공되지 않았다는 의미. ✅해결 버전이 잘못 됐는가 의심되어 찾아보니 현재 내가 작업 중인 React 버전에서도 정상적으로 사용이 가능하다는 내용이 많았다. 패키지의 문서와 깃헙을 확인해보니 해결책은 아주 잘 정리되어 있었지만 비교해봐도 필요한 부분은 모두 적용된 상태였다. import된 컴포넌트나 연관된 요소들 중 HTML로 반환되지 않는 값이 있는지 확인이 필요하다. 이런 식으로 내부의 것을 반환할 수 있게 작성

kkyes1210

✍7.9 Same Board Movement ✅ 1. 수정이 일어난 보드만 복사 ✅ 2. 그 복사본을 기존 것들의 옆에 붙여주기 ✍7.10 Cross Board Movement 두개의 복사본을 만들어야하는데, source를 복사해와서 복사본에서 원하는 요소를 지워주고 destination을 복사해온 뒤 source에서 지워준 요소를 붙여넣어주면 된다. 지금까지 코딩해 온 것으로 잘 작동하지만, 모든 아이템을 한곳에다가 몰아넣고 다른 빈 board에 넣으려고 하면 맨 위까지 끌어올려서 힘들게 넣어야하는 불편함이 생긴다. receiver의 배경색도 바꾸면서 이 기능도 조금 고쳐보자. (다음 챕터에서 계속) ✍7.11 Droppable Snapshot ✨1. 움직일 때마다 맨 위까지 가야지만 이동이 끝나게 되는 문제를 고쳐보자. ✨2. 어떻게 배경색을 바꾸고 움직이는 카드들의 스타일을 바꿀지 배워보자. snapshot에서 우클릭한 뒤 "형식 정의로 이동"을 누르면

kkyes1210

✍7.0 Get Selectors 만약 selector안에서 atom에 접근하고 싶다면 atom의 값을 가져오게끔 하는 get 함수를 사용하면 된다. 이 챕터에서 state는 minutes 하나 뿐이다. minutes과 hour 모두 state로 저장하지 않고 selector를 사용해서 state를 가져오고 output을 수정한 것! ✅추가적으로, string을 number로 바꾸는 방법은 앞에 +만 붙여주면 된다. ✍7.1 Set Selectors 7.0에서 구현한 hour input은 onChangeEvent 함수가 없어서 읽기 전용의 input 이였다. 이번 챕터에서는 selector의 또 다른 속성인 set을 알아보자. set은 state를 set하는 것을 도와주는 속성이며, atom을 수정하는 것을 도와준다. selector에서의 useRecoilState 도 결과값으로 array를 받게 된다. array의 첫번째 요소는 get property

pbs1014

프로젝트를 기획하며 예전에 보았던 Drag and Drop이 매우 인상적이였기에 프로젝트에 이 기능을 추가하고 싶어 react-beautiful-dnd 라이브러리를 사용하여 DND를 만들어 보았다. 라이브러리여서 처음에는 '크게 어렵지 않을것이다.' 라고 생각을 했지만.. 실제로는 '어떤 데이터들을 사용하는가?', 'DB에서 어떻게 관리되는가?' 등등 여러 사항에 따라 코드의 변동이 큰 라이브러리 이기에 DOCS를 읽고 동작원리를 이해 한 후에 부드러운 DND구현이 가능했다. 참고한 자료 NPM : https://www.npmjs.com/package/react-beautiful-dnd GitHub : https://github.com/atlassian/react-beautiful-dnd 한국어DOCS : https://github.com/LeeHyungGeun/react-beautiful-dnd-kr 예제 : https://codesandbox.io/examples/pa

nuo

react beautiful dnd React로 list를 만들기 위한 아름답고 접근 가능한 드래그 앤 드롭 Using innerRef (Draggable과 Droppable컴포넌트의 내부 props정의) 및 컴포넌트 모두 HTMLElement를 제공해야 합니다. 이것은 DraggableProvided 및 DroppableProvided 객체의 innerRef 속성을 사용하여 수행됩니다. url: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md#using-innerref dragHandleProps 특정 영역을 통해서만 드래그를 가능하도록 하고 싶을 때 사용한다. ex) {...provided.dragHandleProps} DragDropContext url: https://gith

milkymilky0116

프로젝트 소개 노마드코더의 React Masterclass를 듣던중, 강의에서 구현한 To Do List를 더 발전시켜보고 싶다는 생각이 들었다. React와 React beautiful dnd, 그리고 Recoil State에 대해 더 깊게 파볼겸, 처음부터 다시 코드를 리셋하고 재설계해서 프로젝트를 구현해 나갔다. 해당 프로젝트는 React Typescript로 작성되었다. 프로젝트에서 구현한 기능들은 다음과 같다. 작성한 모든 투두를 localStorage에 저장 및 로드하기 ( ✔ ) 투두 삭제하기- Drag & Drop 휴지통 ( ✔ ) 보드 생성하기 ( ✔ ) 보드끼리도 순서 바꾸기 ( ✔ ) 보드가 가진 투두 전체 삭제 ( ✔ ) 보드 삭제 ( ✔ ) 투두 수정 ( ✔ ) 보드 제목 수정 ( ✔ ) ![](https://velog.velcdn.com/images/milkymilky0116/post/2a597a52-fbc1-4

dkdlel102

코드는 타입스크립트 기준입니다. 요구조건은 2가지였습니다. 드래그 앤 드롭이 되어야 한다. 지정된 영역에서 드래그하였을 때만 드래그가 되어야 한다. 1. 라이브러리 다운로드 먼저, react-beautiful-dnd 라이브러리를 다운로드합니다. 2. DragDropContext 태그 삽입 DragDropContext로 드래그 앤 드롭을 인식할 수 있는 영역을 지정합니다. 어플리케이션을 감싸는 형태도 좋다고 하지만 이 프로젝트에서는 특정 페이지에서만 dnd를 사용하므로 페이지의 최상단을 아래와 같이 감싸주었습니다. > onDragEnd는 드롭했을 때 발생하는 이벤트로 밑에서 정의하겠습니다. 3. Droppable 태그 삽입 위와 같이 Droppable 태그로 드래그 앤 드롭할 영역을 감싸주고 droppableId를 지정해주고 ul에 해당하는 FormList에 ref와 props를 보내줍니다. > 그래야 어떤 노드에서 이벤트가 발생

daily_d

react-beautiful-dnd 이 화면처럼 여러 게시판 안에 메모를 작성하고 게시판과 안에 있는 메모를 이동시키려고한다. 일단 전체 게시물을 Wrapper로 감싸고 그안에 게시판들을 감싸는 Board, 메모를 작성하는 Boards, 메모를 작성하는 Card로 구성한다. css는 니콜라스의 도움을 받아 작성함 그리고 일단 화면 테스트용 메모 배열을 만든다. 테스트 배열을 화면에 뿌려주기 위해 Draggable을 함수안에 넣어놓고 toDos배열을 map함수로 나열해준다. {provided.placeholder}는 Board의 크기를 고정해서 Card가 이동할때Board 의 길이가 줄었다 늘었다 하는걸 막기 위해 추가한 설정이다.

daily_d

참고자료 링크를 들어가면 자세한 설명을 들을 수 는 있지만 빠르게 구현하기 위해 일단 코드를 치고본다. 자바스크립트로 구현하려면 타입스크립트로 구현하려면 App.tsc DragDropContext 만 구현하면 아래와 같은 오류발생 이럴때는 이 부분만 보면 된다 onDragEnd와 자식 컴포넌트가 빠져있다는 뜻임 따라서 onDragEnd와 자식컴포넌트를 넣어준다. 🎈참고자료 npm https://www.npmjs.com/package/react-beautiful-dnd react-beautiful-dnd 사용방법 https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd

jae-hun-e

어제 작업한 곳에 스타일을 조금 입혔다 아직 onDragEnd 함수를 완성하지 못하여 옮겨지지는 않지만 여러개의 board와 card가 정상적으로 뜬다. atom의 state가 하나의array일때 했던것처럼 먼저 어떤 정보를 받아오는데 test해보면 동일하게 drag한 data는 source와 draggableId에 drop한 data는 destination 있으며 달라진점은 droppableId가 board에 따라 달라져서 고려해줘야 한다는 점이다. 먼저 동일한 자리에 drop했을때 그대로 return해주도록 하고 이전과 동

jae-hun-e

저번에 넘거갔던 selector의 기능 중 set에 대해서 알아보자 set은 atom state를 수정(set)하는 것을 도와주는 속성이다. 쉽게말해 selector({key: 'value', get: ()=>{}, set: ()=>{} })에서 key는 selector를 식별하는 고유값, get은 atom의 state를 받아와(get) 원하는 방식으로 가공 후 반환해주는 state 역할을 하게 되고, set은 atom의 state를 새로운 값으로 수정해(set) 줄 수 있는 setState역할을 하게된다. setState를 사용할 때 setState((state) => { newState})를 사용하는 것과 같이 selector에서 set도 set : ({set}, newValue)=>{ set(atomState, newvalue) } 로 atomState 변경할 값을 set()함수의 두번째 인자로 넣어주고 useSetRocilState, useRecoilSt

raverana96

개요 이전에 쓴 * [react-query] useQuery의 데이터 불변성을 지켜야할까??* 와 이어진다. 이전 글에서는 useQuery로 받아온 data를 어떻게 건들이지 않아야하는지를 다뤘다. 이번에는 해당 데이터를 어떻게 수정해서 mutate까지 이어지는지 적어보고자 한다. (이것때문에 하루종일 맘고생했다😢) Optimistic Update? 서버 업데이트를 하기 전에 미리 화면의 UI를 바꿔준 후, 서버와의 통신 결과에 따라 확정 / 롤백을 결정하는 방식이다. (아, 어차피 되게 되어있다구~ 해서 낙관적이라고 명명했나보다.) 코드는 다음과 같다. (+ 계정 위치를 바꿀 때마다 변

raverana96

Should I keep immutable in data, useQuery?? 개요 이전에 유저별 등록 게임 모달을 만들면서 유저별로 등록한 게임을 다루면서 유저가 직접 게임의 우선순위를 부여할 수 있게 하기 위해서 react-beautiful-dnd 라이브러리를 사용해서 직접 조정할 수 있게 만들었었다. 서버와의 연결을 해서 유저가 등록한 게임을 []로 받아온 상황. 여기서 헷갈렸던 것이 useQuery를 통해 받아오는 data를 직접 수정해도 되는지였다. 오늘 작업을 하기 전부터 기대 반 걱정 반이었는데, 결론부터 말하자면 수정이 가능하다!! 하지만! 그렇게 하면 데이터의 불변성을 지킬 수 없다. 우선 불변성을 고려하지 않은 코딩이다. 이렇게해도 작동은 한다. 어떤 side effect가 생길지 몰라서 걱정되는 것 뿐... data의 불변성을 지키지 않는 코드 설명 먼저 서버에서 필요한 데이터를 받아왔다. 여기서 받아온 데이

kyungjune

기존에 react.js로 진행중이던 todoList의 기능을 추가하던중 drag and drop기능을 추가하여 보았다. 1.react-beautiful-dnd 설치 rbd는 drag and drop을 쉽게 구현할수 있게 해주는 npm이다. 2. ul부모태그 감싸기 1.import {DragDropContext, Droppable} from "react-beautiful-dnd" 한다. 드래그할 리스트의 가장 부모 태그를 래핑한다. (provider와 비슷한 기능으로 생각하면된다.) 3. droppable 영역 설정 droppableId를 설정한다. (특정 인스턴스를 추적할수있다.) 가장상위 태그인 ul태그에 props와 ref를 준다. 4. draggable