# react-beautiful-dnd

11개의 포스트

[React] react-beautiful-dnd를 이용한Drag and Drop 구현

프로젝트를 기획하며 예전에 보았던 Drag and Drop이 매우 인상적이였기에 프로젝트에 이 기능을 추가하고 싶어 react-beautiful-dnd 라이브러리를 사용하여 DND를 만들어 보았다. 라이브러리여서 처음에는 '크게 어렵지 않을것이다.' 라고 생각을 했

2022년 6월 10일
·
0개의 댓글
post-thumbnail

React Beautiful Dnd

React로 list를 만들기 위한 아름답고 접근 가능한 드래그 앤 드롭Using innerRef(Draggable과 Droppable컴포넌트의 내부 props정의)< Draggable /> 및 < Droppable /> 컴포넌트 모두 HTMLElement를

2022년 5월 13일
·
0개의 댓글
post-thumbnail

React Practice: 드래그 앤 드랍 To Do List 만들어보기

노마드코더의 React Masterclass를 듣던중, 강의에서 구현한 To Do List를 더 발전시켜보고 싶다는 생각이 들었다. React와 React beautiful dnd, 그리고 Recoil State에 대해 더 깊게 파볼겸, 처음부터 다시 코드를 리셋하고

2022년 4월 10일
·
1개의 댓글

react-beautiful-dnd로 드래그 앤 드롭 구현하기 (특정 영역에만 드래그 적용하게)

코드는 타입스크립트 기준입니다.요구조건은 2가지였습니다.드래그 앤 드롭이 되어야 한다.지정된 영역에서 드래그하였을 때만 드래그가 되어야 한다.먼저, react-beautiful-dnd 라이브러리를 다운로드합니다.DragDropContext로 드래그 앤 드롭을 인식할 수

2022년 3월 4일
·
0개의 댓글
post-thumbnail

[React]react-beautiful-dnd Draggable 배열 생성, 이동시 화면 길이 고정

본격 메모장 만들기react-beautiful-dnd이 화면처럼 여러 게시판 안에 메모를 작성하고 게시판과 안에 있는 메모를 이동시키려고한다.일단 전체 게시물을 Wrapper로 감싸고 그안에 게시판들을 감싸는 Board, 메모를 작성하는 Boards, 메모를 작성하는

2022년 2월 24일
·
0개의 댓글

[JS]react-beautiful-dnd 와 오류 읽기

참고자료 링크를 들어가면 자세한 설명을 들을 수 는 있지만 빠르게 구현하기 위해 일단 코드를 치고본다.자바스크립트로 구현하려면타입스크립트로 구현하려면DragDropContext 만 구현하면 아래와 같은 오류발생이럴때는 이 부분만 보면 된다 onDragEnd와 자식 컴포

2022년 2월 22일
·
0개의 댓글
post-thumbnail

1.11- React masterClass (trello cloning2)

어제 작업한 곳에 스타일을 조금 입혔다아직 onDragEnd 함수를 완성하지 못하여 옮겨지지는 않지만 여러개의 board와 card가 정상적으로 뜬다.atom의 state가 하나의array일때 했던것처럼 먼저 어떤 정보를 받아오는데 test해보면 동일하게 drag한 d

2022년 1월 11일
·
0개의 댓글
post-thumbnail

1.10- React masterClass (trello cloning1)

저번에 넘거갔던 selector의 기능 중 set에 대해서 알아보자 set은 atom state를 수정(set)하는 것을 도와주는 속성이다. 쉽게말해 selector({key: 'value', get: ()=>{}, set: ()=>{} })에서 key는 select

2022년 1월 10일
·
0개의 댓글

[react-query] Optimistic Update

이전에 쓴 \[react-query] useQuery의 데이터 불변성을 지켜야할까?? 와 이어진다. 이전 글에서는 useQuery로 받아온 data를 어떻게 건들이지 않아야하는지를 다뤘다. 이번에는 해당 데이터를 어떻게 수정해서 mutate까지 이어지는지 적어보고자

2021년 11월 2일
·
0개의 댓글
post-thumbnail

[react-query] useQuery의 데이터 불변성을 지켜야할까??

개요 이전에 유저별 등록 게임 모달을 만들면서 유저별로 등록한 게임을 다루면서 유저가 직접 게임의 우선순위를 부여할 수 있게 하기 위해서 react-beautiful-dnd 라이브러리를 사용해서 직접 조정할 수 있게 만들었었다. 서버와의 연결을 해서 유저가 등록한

2021년 11월 1일
·
0개의 댓글
post-thumbnail

drag n drop 기능 구현하기

기존에 react.js로 진행중이던 todoList의 기능을 추가하던중 drag and drop기능을 추가하여 보았다.rbd는 drag and drop을 쉽게 구현할수 있게 해주는 npm이다.1.import {DragDropContext, Droppable} from

2021년 2월 12일
·
0개의 댓글