이것저것 스터디📚/React - 공식 문서 (52) 썸네일형 리스트형 React 공식문서 -flushSync - flushSync : 강제로 제공된 콜백 내부의 모든 업데이트를 동기적으로 flush(강제로 비워냄)하도록 하고 DOM이 즉시 업데이트 된다. - flushSync는 자주 사용되지 않으며 앱 성능을 저하시킬 수 있습니다. - flushSync를 호출하면 React가 보류 중이던 작업을 강제로 flsuh하고 DOM을 동기적으로 업데이트 한다. import { flushSync } from 'react-dom'; flushSync(() => { setSomething(123); }); - flushSync는 매개변수로 전달받는 콜백함수를 즉시 호출하고 여기에 포함된 모든 업데이트를 동기적으로 flush한다. - 보류 중인 모든 업데이트, Effect 또는 Effect 내부의 업데이트를 flush할 수도 .. React 공식문서 -useSyncExternalStore - useSyncExternalStore : 외부 스토어를 구독할 수 있는 React 훅이다. const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) - 스토어에 있는 데이터의 스냅샷을 반환한다. - 두 개의 함수를 인수로 전달해야 한다. - subscribe : 하나의 callback 인수를 받아 스토어를 구독하는 함수. 스토어가 변경되면 제공된 callback을 호출해야 하고, 이로부터 컴포넌트가 리렌더링된다. subscribe 함수는 구독을 해제하는 함수를 반환해야 한다.(subscribe 함수는 처음 마운트될때 호출되고, 이후 상태가 변화될때 호출된다) - getSnapshot 함수의 경우, 스토어에서 데이.. React 공식문서 -userId - userId : 접근성 속성에 전달할 수 있는 고유 ID를 생성하기 위한 React 훅이다. - useId는 특정 컴포넌트 내 특정 useId와 관련된 고유 ID 문자열을 반환한다. - useId를 목록에서의 키 생성하기 위해 호출하지 말아야 한다. 키는 데이터에서 생성되어야 한다. import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); return ( Password: The password should contain at least 18 characters ); } export default function App() { return ( Choose password Confirm passwor.. React 공식문서 -<Profiler> - 를 사용하면 프로그램적으로 React 트리의 렌더링 성능을 측정할 수 있다. - id : 측정 중인 UI 부분을 식별하는 문자열 - onRender : 프로파일링된 트리 내의 컴포넌트가 업데이트될 때마다 React가 호출하는 onRender 콜백. 이 콜백은 렌더링된 내용과 소요된 시간에 대한 정보를 받는다. onRender callback - React는 렌더링된 내용에 대한 정보와 함께 onRender 콜백을 호출한다. function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) { // Aggregate or log render timings... // 렌더링 타이밍을 집계하거나 로그를 남깁니다... } - i.. React 공식문서 -<StrictMode> - 를 사용하면 개발 중에 컴포넌트에서 흔히 발생하는 버그를 조기에 발견할 수 있다. - Strict Mode는 다음과 같은 개발 전용 동작을 활성화한다. 1. 불완전한 렌더링으로 인한 버그를 찾기 위해 한 번 더 렌더링한다. 2. Effect 클린업이 누락되어 발생한 버그를 찾기위해 Effect를 한 번 더 실행한다. - 전체 앱에 Strict Mode를 사용하려면 렌더링할 때 루트 컴포넌트를 로 감싼다. import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('root')); root.render( ); - 만약 앱의 일부분.. React 공식문서 -useDeferredValue - useDeferredValue : UI 일부의 업데이트를 지연시킬 수 있는 React 훅이다. import { useState, useDeferredValue } from 'react'; function SearchPage() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); // ... } - 업데이트가 발생하면, 지연된 값은 최신 값보다 "뒤쳐지게" 됩니다. - React는 먼저 지연된 값을 업데이트하지 않은 채로 렌더링한 다음, 백그라운드에서 새로 받은 값으로 다시 렌더링을 시도한다. import { Suspense, useState } from 'react'; import SearchR.. React 공식문서 -useInsertionEffect - useInsertionEffect는 CSS-in-JS 라이브러리 작성자를 위한 훅이다. CSS-in-JS 라이브러리에서 작업중에 스타일을 주입하는 경우가 아니라면 useEffect나 useLayoutEffect가 더 나을 수 있다. - useInsertionEffect는 useEffect의 버전 중 하나로, DOM 변이 전에 실행된다. - 즉, useInsertionEffect를 호출하여 DOM 변이 전에 스타일을 주입한다. Usage(사용법) Injecting dynamic styles from CSS-in-JS libraries(CSS-in-JS 라이브러리에서 동적 스타일 삽입하기) - CSS-in-JS에는 세 가지 일반적인 접근 방식이 있다. 1. 컴파일러를 사용하여 CSS 파일로 정적 추출 .. React 공식문서 -useLayoutEffect - useLayoutEffect는 성능을 저하시킬 수 있기 때문에, 가급적 useEffect를 사용하는 것을 권장한다. - useLayoutEffect는 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect이다. - 즉, 브라우저가 화면을 다시 그리기 전에 useLayoutEffect를 호출하여 레이아웃을 측정한다. Mesuring layout before the browser repaints the screen(브라우저에서 화면을 다시 그리기 전 레이아웃 측정하기) - 예를들어 마우스오버 시 요소 옆에 툴팁을 표시하는 기능이 있다고 가정했을 때, 공간이 충분하면 툴팁이 요소 위에 표시되지만, 공간이 충분하지 않으면 아래에 표시되게 하고 싶을 때, useLayoutEffect를 사용할 수.. 이전 1 2 3 4 ··· 7 다음