✅ useDeferredValueuseDeferredValue 훅은 의도적으로 특정 UI 업데이트를 지연시키고 싶을 때 사용할 수 있는 훅이다. 상태 업데이트를 지연하는 useTransition과 다르게 값의 업데이트 우선순위를 지정하는 것 상태값 변화에 따른 무거운 연산이 발생하는 경우 값 업데이트를 지연시켜 백그라운드에서 리렌더링을 수행하게 해서 급한 렌더링을 먼저 처리하는 것이다. 예를 들어 입력 필드 타이핑은 즉시 반영하지만, 리스트와 같은 것은 나중에 반영시키는 것이다. 참고: 나중에 나오는 useOptimistic 는 이와는 반대의 개념이다. 서버의 응답을 기다리지 않고 UI를 먼저 업데이트를 해준다. (예를 들어 좋아요기능)import { memo } from 'react';const Sl..
React
html 에서 사용하던 for inputstr React에서 사용할 경우react는 JSX를 사용하기 때문에 자바스크립트의 for예약어와 겹친다. 그래서 htmlFor를 사용한다. label과 input을 연결해야 할 때 htmlFor을 사용하여 연결한다. ➡️ 연결시, label을 클릭했을 경우 input에 자동적으로 focus를 해준다. label에서는 htmlFor을, Input에서는 id를 동일하게 부여하면 끝userId접근성 속성에 전달할 수 있는 고유한 Id를 생성하기 위한 훅같은 컴포넌트를 여러개 사용시, Dom 의 id가 중복이 되는 문제가 생겨난다. 그래서 useId는 컴포넌트의 고유한 ID를 생성하여 고유 ID를 생성해주어 해당 문제를 해결해준다. 컴포넌트 최상단에 호출해주기import..
HookReact의 상태 및 생명주기 관리를 위한 함수이다. 사용자의 이벤트를 리액트가 가로채서 처리하는 것을 의미한다. 이를 통해 컴포넌트의 상태 변화, 렌더링 주기를 제어한다. UI 제어와 어떻게 갱신할지(리소스 관리, 비동기 처리) 등을 한다. Hook의 원칙1. 컴포넌트의 영역 안에서만 작동한다. 리액트 함수 컴포넌트에서만 Hook 을 호출하자.2. 기능을 여러 훅으로 나누면 좋다.나누어 있어도 컴포넌트에서 한번에 순차 호출한다. 함수형 컴포넌트 ➡️ 함수 ➡️ 기능 단위 분리 ➡️ 가독성 ➡️ 테스트 및 유지보수에 유리3. 컴포넌트의 최상위 레이어(스코프)에서만 호출해야 한다. 블록 내부에서는 호출할 수 없다. React Hook 상태관리 HooksuseStateuseContextuseReduc..
간단히 브라우저의 렌더링 과정은 이렇다. DOM TreeRender tree 생성LayoutPainting📌 Virtual DOM을 사용하는 이유Virtual DOM을 알아보기 전 어떻게 하여 사용하게 되었는지 알아보자 ! 초기의 브라우저는 주로 정적인 페이지(많은 변화가 없음)를 보여주었기에 SSR(Server Side Rendering) 방식을 사용했다. SSR이란 ?웹 페이지의 렌더링을 서버에 먼저 처리하여 완성된 HTML 파일을 브라우저로 전송하는 방식이다. 단점 : 서버에서 렌더링하여 전달해주기 때문에 일부분의 데이터만을 업데이트 할 수 없다는 것이다. SPA랑 CSR 방식이 등장하면서 돔 업데이트가 많아지고 복잡해지는 것이 많아졌다. 여기서 CSR(Client Side Rendering) ..
일부 모자이크 처리를 했다. 맥북을 초기화하고 VScode를 다시 설치한 후에 발생한 오류이다. Ctrl + s ( 저장 ) 을 누를 때 마다 위의 오류가 계속 발생 했다. [ 시도한 방법 ] 1. 터미널을 두번 껏다 키니까 해결터미널을 한번 켰다 켰을 땐 또 안되고, 그러나 두번 껏다 키면 됨 => 저장후 항상 두번 껏다 켜야하기에 굉장히 귀찮음. 해결은 됨. 2. Package.json을 켜서 저장하면 오류가 해결되긴 함, 근데 이것도 저장 할 때마다 귀찮음. 항상 열어서 컨에스를 누르는 귀찮음이 생긴다. 3. Package.json 에서 eslintConfig 부분 삭제"eslintConfig": { "extends": [ "react-app", "react-app/jes..
1. 컴포넌트?웹 앱을 구성 하는데 있어 가장 작은 단위재사용이 가능한 각각의 독립된 모듈공통된 관심사를 묶어 이름을 붙이는 것, 뷰를 추상화 시키는 것 2. 컴포넌트를 설계하는 관점잘 설계한 컴포넌트 == 뷰를 적절한 단위 로 잘 추상화해서 이해하기 쉽다. 적절한 단위가 무엇일까?UI가 아니라 모델 기준으로 컴포넌트 분리하기 모델 / 도메인이 다르지만 동일한 컴포넌트가 보인다면?1. 범용 컴포넌트 또는 디자인 시스템으로 추출한다.2. 중복구현을 하고 지켜본다. 3. WET&DRY CodeWET CodeWET : Write EveryThing Twice ➡️ 중복코드 구현해라DRY CodeDRY : Don’t Repeat YourSelf ➡️ 중복구현을 하지 말라dry code의 장점은 재사용이 ..
