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

📍비교 ✅비제어 컴포넌트 (uncontrolled) - 로컬 변수만을 갖는 컴포넌트 - 부모 컴포넌트가 영향을 줄 수 없음 ✅제어 컴포넌트 (controlled) - 컴포넌트의 중요한 정보가 props에 의해 구동됨 - 부모 컴포넌트가 props를 통해 이 컴포넌트를 완전히 제어 컴포넌트 대신 element에도 적용할 수 있다 📍비제어 input element 예시 - 전통적인 HTML의 form 입력과 비슷 - Form 컴포넌트는 input에서 값을 "pull" 해와야 함 (예 - form 제출 전에) 예) input element의 실시간으로 바뀌는 값을 ref 를 통해서 구할 수 있음 const FormComponent = () => { const inputEl = useRef(null); retu..

📍lazy ✅컴포넌트의 최초 렌더링까지 코드 로딩(예-import 문)을 지연시킬 수 있다 const SomeComponent = lazy(load) 📍lazy(load) ✅lazy loading 컴포넌트를 선언하기 위해 컴포넌트 바깥에서 lazy 함수를 호출한다 import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ✅매개변수 load - Promise 또는 .then() 과 함께 쓰이는 유사 Promise 객체를 리턴하는 함수 - lazy 함수로 반환한 컴포넌트가 최초 렌더링되고나서야 load 콜백 함수가 호출된다 - load 콜백 함수 호출이 로드된 후, resolve까지 대기했다..

📍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로 래핑하..

📍디바운스 // App.tsx import "./styles.css"; import { useState } from "react"; import { useDebounce } from "./useDebounce"; export default function App() { const [keyword, setKeyword] = useState(""); const debouncedKeyword = useDebounce(keyword, 500); return ( Debounce + React + TypeScript {debouncedKeyword} setKeyword(e.target.value)} /> ); } // useDebounce.tsx import { useEffect, useState } from "r..

아래의 익숙한 로딩 스피너를 만드는 CSS 코드를 찾아봤는데, 생각보다 코드 반복이 많다 이렇게 blade 하나씩 전부 회전 각도가 달라야 하기 때문이다 SCSS를 활용해도 mixin과 function으로 반복을 줄일 수 있을 것이다 하지만 이번에는 Styled-components를 활용하여 반복을 줄여 본다 📍1. props로 모든 blade에 각각 다른 회전 각도 부여하기 1) 먼저, blade 갯수 기본값을 정의하고, 배열을 만들고 map으로 blade 컴포넌트를 렌더링한다 2) styled props를 활용해 0 * (360 / 12) deg, 1 * (360 / 12) deg ... 이렇게 자동으로 회전각을 부여해준다 - 이 상태에서는 2번의 원 형태로 나오게 된다 (최대 배율 확대 상태) - ..

📍개요✅일부 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) : 포털의 키값으로 사용할 고유 문자열..