본문 바로가기

분류 전체보기525

[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.
[JS] 자주이용하지만 자주 헷갈리는 splice부분 코드 구현시 자주 이용하는 부분이고 내용이지만 항상 헷갈리고 막상하려고 하면 어찌했더라 자꾸 헷갈리는 부분을 정리했다!! splice! 이런 배열이 있다고 치자. let x = ["a", "b", "c", "d", "e", "f"]; 여기서 a를 지우고 싶다면 x.splice(0, 1) " 0번째 index이고 지우고싶은건 1개이다 " 이런 의미로 생각하면 된다!!! 그럼 배열은 이렇게 된다. let x = ["b", "c", "d", "e", "f"]; 여기에 a를 원하는 자리에 중간에 추가하고싶다면 (만약 원하는 자리가 index2라면) x.splice(2, 0, "a") " index2에서 시작해서 지우고싶은건 0개이고 추가하고싶은건 "a"이다 " 이런 의미로 생각하면 된다!! 2023. 9. 7.
[React] Recoil 정리 Recoil은 Facebook에서 만든 React전용 상태 관리 라이브러리입니다. 상태관리 툴을 사용하면 state값들을 props로 계속 타고들어가지 않아도 되어 코드가 깔끔해집니다. 프로젝트의 규모가 커질수록 상태 관리 또한 필요성이 커지게 됩니다. 대표적인 상태관리툴로는 Redux, Mobx 등이 있습니다. 먼저 Recoil 패키지 설치합니다. npm install recoil recoil을 사용하기 위해서는 사용하고자하는 부모 컴포넌트에다 를 사용해야 합니다. (Recoil 초기연동할때 사용됩니다.) 리코일로 전역상태를 관리할 범위를 RecoilRoot 컴포넌트로 감싸줍니다. RecoilRoot는 리덕스나 컨텍스트의 Provider와 같은 역할을 합니다. index.tsx import React .. 2023. 9. 5.

티스토리툴바