📌목표1. 낙관적 UI 업데이트 알아보기2. React19 useOptimistic 훅 작동 원리 이해하기3. 간단한 카운터 만들고 낙관적 업데이트 적용하기 📌낙관적 UI 업데이트- 예를 들어, 인스타그램 앱에서 게시물의 좋아요 버튼을 클릭하는 행동은 서버로 요청을 보내고, 요청이 성공했을 때 UI를 업데이트 한다. 하지만, 사용자 디바이스가 느린 네트워크 환경에 있거나, 서버의 응답이 오래 걸려서 UI 업데이트가 늦어지면 UX에 악영향을 줄 수 있다.- 사용자가 좋아요 버튼을 클릭함과 동시에 좋아요 UI를 업데이트하여 (서버 응답을 받기 전) 사용자의 행동이 원활하게 처리되고 있음을 보여주면 UX를 개선할 수 있다. 만약 서버 응답이 실패하면, UI를 롤백하면 된다.- 이러한 패턴을 서버 응답이 성..

목표드래그로 엘리먼트 이동시키기 결과물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..