부트캠프교육중/react80 [React] 진짜 미친 Framer motion이다 {!clicked ? : null} {clicked ? : null} 이렇게 하면 따로따로 원래 리액트 하던것처럼 작동하던게 {!clicked ? : null} {clicked ? : null} layoutId를 동일하게 붙이는 순간 둘사이의 이동으로 연결된다 !!! 진짜 Crazy!!!!! Funking Crazy!!!!!!!!!!!!! 완성코드 import { motion, AnimatePresence } from "framer-motion"; import { useState } from "react"; import styled from "styled-components"; const Wrapper = styled(motion.div)` height: 100vh; width: 100vw; displa.. 2023. 9. 11. [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. 이전 1 2 3 4 ··· 20 다음
