[React 18. 2] 공식 문서 훑으면서 몰랐던 부분 찾아보기

<Profiler>

React 애플리케이션의 성능 측정을 위해 사용되는 컴포넌트
각각의 컴포넌트가 얼마나 자주 렌더링되는지, 렌더링에 얼마나 시간이 걸리는지 등을 측정할 수 있습니다.

react-dev-tools 에 profile 탭에서 성능 관련 정보를 확인 할 수 있다.

<Profiler id="Sidebar" onRender={onRender}>  
    <Sidebar />  
</Profiler>

Props

• id: id
• onRender: (param) => {}
  • param
    • id: 방금 커밋한 트리 id의 문자열 소품입니다. 이를 통해 여러 프로파일러를 사용하는 경우 트리의 어느 부분이 커밋되었는지 식별할 수 있습니다.
    • phase: "mount", "update"또는 "nested-update". 이를 통해 트리가 처음으로 마운트되었는지 아니면 소품, 상태 또는 후크의 변경으로 인해 다시 렌더링되었는지 알 수 있습니다.
    • actualDuration: 현재 업데이트에 대해 및 해당 하위 항목을 렌더링하는 데 소요된 시간(밀리초)입니다.
    • baseDuration": 최적화 없이 전체 하위 트리를 다시 렌더링하는 데 걸리는 시간을 추정하는 밀리초 수입니다 .
    • startTime: React가 현재 업데이트 렌더링을 시작한 시점에 대한 숫자 타임스탬프입니다.
    • commitTime: React가 현재 업데이트를 커밋한 시점에 대한 숫자 타임스탬프입니다. 이 값은 커밋의 모든 프로파일러 간에 공유되므로 원하는 경우 그룹화할 수 있습니다.

<StrictMode>

내부 구성 요소 트리에 대한 추가 개발 동작 및 경고를 활성화하는 데 사용됩니다 .

root.render(  
    <StrictMode>  
        <App />  
    </StrictMode>  
);

forwardRef(render)

※ render : (ref, props) => jsx

React 컴포넌트에서 ref를 프롭스로 전달하는 데 사용되는 함수입니다. 이를 사용하면 부모 컴포넌트에서 자식 컴포넌트에 직접적으로 ref를 전달할 수 있습니다.

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  // ...
});

startTransition()

• 긴급한 업데이트 (urgent updates) : 입력, 클릭, 누르기 같이 즉각 반영되어야 하는 부분
• 전환 업데이트 (transition updates) : 화면 전환 같이 업데이트가 느린 것이 당연한 부분

startTransition으로 래핑된 업데이트는 전환 업데이트로 처리되며, 긴급한 업데이트가 들어오면 중단된다. 전환이 중단되면 리액트는 stale한 렌더링 작업을 버리고 마지막 업데이트만을 렌더링한다.

참고

https://yrnana.dev/post/2022-04-12-react-18/