목표드래그로 엘리먼트 이동시키기 결과물https://codesandbox.io/s/drag-and-drop-ykyxgd?file=/src/Moving.tsx   조건1. pointer event 사용- mouse event 와 기능은 거의 동일하나, 모바일 디바이스에서 touch를 지원- 따라서 mouse event의 상위 호환 2. 마우스 커서의 속도에 맞춰서 따라와야 함- PointerEvent의 movementX, movementY 프로퍼티로 타겟 엘리먼트를 translate시키는 방식은 속도가 느려서 마우스 커서가 쉽게 엘리먼트 바깥으로 나가버리고, 드래그가 끊겨버림.. 그런데onMouseMove, onPoinerMove 는 onDragStart에 비해 속도가 느리다...참고)https://sta..

📍useMemo 로 객체 or 배열로 인한 불필요한 리렌더링 제거const Pagination = ({ pagesNumbers }) => { const augmentedValues = pagesNumbers.map(page => page.number + 2); return ;}; 보기엔 문제가 없어보이지만…객체 또는 배열이 컴포넌트 내부에서 선언되면, 매 렌더링마다 별도의 인스턴스로 간주된다동일한 데이터를 갖고 있어도 리렌더링을 유발메모리 주소가 달라지기 때문이는 각 컴포넌트마다 새로운 계산을 필요로하며 그에 따라 렌더링도 늦어짐.. useMemo Hooks를 통해 계산 결과를 메모이제이션할 수 있다const Pagination = ({ pagesNumbers}) => { const augment..

📍forwardRef✅컴포넌트가 특정 DOM 노드를 ref를 가진 부모 컴포넌트에게 노출하게 해준다즉, useRef로 만든 ref가 props로 타고 내려와 매개변수로 받아 지정할 DOM node를 활용하기 위한 기능const SomeComponent = forwardRef(render) 📍forwardRef(render)✅forwardRef를 호출하여 컴포넌트가 ref를 받아 자식 컴포넌트로 전달하게 한다import { forwardRef } from 'react';const MyInput = forwardRef(function MyInput(props, ref) { // ...}); ✅매개변수render- 컴포넌트를 위한 렌더링 콜백 함수 (가짜 컴포넌트 같은 역할, forwardRef로 래핑하..

📍개요✅일부 JSX 조각을 React Root가 아닌 DOM의 일부분으로 렌더링할 때 사용- 즉, 렌더링하고 싶은 JSX 조각을, 원하는 위치로 바로 연결되는 '입구' (Portal)를 만들고 싶을 때 사용예) 팝업이나 모달 등 {createPortal(children, domNode, key?)} 📍createPortal API✅createPortal(children, domNode, key?)- children : 새로 만들어낼 React 컴포넌트 (JSX 조각, fragment, 문자열, 숫자)- domNode : 만든 컴포넌트를 렌더링할 부분. 이미 DOM에 존재하고 있는 곳이어야 함 (DOM API로 찾을 수 있는 곳)- key (optional) : 포털의 키값으로 사용할 고유 문자열..

📍React에서 Hydrate란?✅Hydrate의 사전적 의미: 수화 (예 - 메마른 꽃에 물을 줘서 생기있게 만드는 것)서버 사이드 렌더링된 HTML을 클라이언트 사이드에서 enhance하여 feature를 가진 App 형태로 완성시키는 것enhance 내용 : 상태(state), interaction 등을 추가  📍hydrateRoot API✅createRoot와 비슷hydrateRoot 를 호출하여 서버 환경에서 이미 렌더링된 기존 HTML(domNode)에 React(reactNode)를 부착 import { hydrateRoot } from 'react-dom/client';const domNode = document.getElementById('root');const root = hydra..

리액트 공식 문서(react.dev) 읽기더보기Built-in React Hooks 1. useTransition2. useCallback 📍useCallback✅리렌더링 간 함수 정의를 캐시할 수 있는 훅- 컴포넌트 상단에서 호출const cachedFn = useCallback(fn, dependencies) 📍useCallback(fn, dependencies)✅매개변수fn- 종속성 배열(dependency array) 의 원소가 바뀌지 않으면 캐시되는 함수- 종속성 배열의 원소가 바뀌면, 렌더링 중에 전달한 콜백 함수를 리턴하고, 재사용에 대비하여 저장(캐싱) dependencies- fn 코드 내부에서 참조되는 모든 반응형 값(props, state 및 컴포넌트 내부의 모든 변수와 함수) 배..

리액트 공식 문서(react.dev) 읽기더보기Built-in React Hooks 1. useTransition 📍 React.dev먼저, 아직 베타 사이트였던 React Docs Beta 가 23년 3월 16일 부로 공식 홈페이지로 변경됐다- 그리고, 레거시 사이트 (reactjs.org) 에 접속하면, 새로운 react.dev 로 리디렉트된다 📍Built-in React Hooks 개요- 훅은 컴포넌트에서 여러 리액트 기능을 사용할 수 있게 해준다 (컴포넌트 내부에서만 사용가능)- 내장 훅을 조합해서 새로운 커스텀 훅을 만들 수 있다 📍State Hooks✅상태는 컴포넌트가 정보(예 - 유저 입력)를 기억하게 한다예) form 컴포넌트가 input value를 상태로 저장 ✅컴포넌트에 상태를 ..

React Docs (beta) 번역 및 정리더보기Built-in React APIs1. createContext2. forwardRef 📍비디오 재생 및 중지하기 예제- 예제https://beta.reactjs.org/reference/react/forwardRef#examples forwardRefA JavaScript library for building user interfacesbeta.reactjs.org video element는 자체 메서드로 play() 와 pause() 를 갖는다App 컴포넌트와 video element가 있는 MyVideoPlayer 컴포넌트가 있다고 가정할 때, App 컴포넌트에서 직접 video element에 접근하게 해보자 ✅MyVideoPlayer.jsimp..