부트캠프교육중301 [React] MotionValue에서 console.log motionValue가 바뀌면 컴포넌트가 재랜더링되지 않는다. 그래서 console.log 적용안된다. 이렇게 해줘야한다. useEffect(() => { x.onChange(() => console.log(x.get())); }, [x]); 2023. 9. 11. [React] 다른 board끼리의 움직임 1. 먼저 sourceboard의 복사본을 만들어줘야한다. const sourceBoard = [...allBoards[source.droppableId]] 2. target도 만들자 const destinationBoard = [...allBoards[destination.droppableId]] 3. 지우고 추가하고 하자 sourceBoard.splice(source.index, 1); destinationBoard.splice(destination?.index, 0, draggableId) 4. 모두 출력하자 return { ...allBoards, [source.droppableId]: sourceBoard, [destination.droppableId]: destinationBoard, } 2023. 9. 8. [React] 같은 board안에서의 움직임 원래 cde순서로 되있던걸 e를 드래그해서 가운데 위치로 바꿨다 console.log찍었더니 일단 칸반의 이름은 Doing으로 동일해서 destination 이랑 source의 droppableId가 동일하게 'Doing"으로 나온다. (동일한 칸반 내에서의 움직임을 일단 공부하자) 일단 내가 드래그한 개체 => draggableId 움직이기전 => source 움직인후 => destination 이렇게 정리해볼수있다. 이제 드래그해서 위치가 바뀌게 onDragEnd함수를 만들어보자. 우린 일단 info에서 destination, draggableId, source를 이용할거다. const { destination, draggableId, source } = info; 같은 보드안에서만 움직이는 경우만 .. 2023. 9. 8. [React] React.memo 원래 리액트에서는 바뀌지 않은 props까지 모두다 렌더링된다. React.memo는 react.js한테 prop이 바뀌지 않는다면 컴포넌트를 렌더링 하지 말라고 한다. 최적화기술이다!!! 기존코드 function DragabbleCard() { return ( ); } export default DragabbleCard; 바뀐코드 import React from "react"; function DragabbleCard() { return ( ); } export default React.memo(DragabbleCard); 2023. 9. 8. 이전 1 2 3 4 5 6 ··· 76 다음
