📚 책 정보 - 우아한 타입스크립트 with 리액트 (2023) - 우아한 형제들 웹프론트개발그룹 지음 📝 목차 - 값vs타입 - 원시 타입 📍값vs타입 값 공간과 타입 공간의 이름은 서로 충돌하지 않음 - 타입과 변수를 같은 이름으로 정의할 수 있음 (타입스크립트 type 문법은 컴파일 시 제거되기 때문) type Developer = { isWorking: true }; const Developer = { isTyping: true }; // OK ES6의 class 문법은 값과 타입으로서 동시에 사용됨 - 타입스크립트에서는 클래스를 타입 어노테이션으로 사용 가능 - 자바스크립트에서는 런타임에서 객체로 변환되어 자바스크립트의 값으로 사용됨 class Developer { name: string; do..

📚 책 정보 - 우아한 타입스크립트 with 리액트 (2023) - 우아한 형제들 웹프론트개발그룹 지음 📝 목차 - 구조적 타이핑 - 구조적 서브 타이핑 📍구조적 타이핑 아래 코드에서는 비슷하면서 서로 다른 타입이 호환된다. 타입스크립트는 구조로 타입을 구분하기 때문. (다른 언어였으면 타입 이름이 다르면 호환 불가) interface Dog { age: number; } interface Man { age: number; } let sundance = { age: 10 }; let kim = { age: 30 }; sundance = kim; // ok kim = sundance; // ok 📍구조적 서브타이핑 타입스크립트에서 타입은 집합의 개념이기 때문에, 특정 값이 string or number 타..

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