ReactJS 18의 새로운 기능

ReactJS 18은 3월 29일에 출시되었습니다. 새 버전의 ReactJS에는 많은 새로운 기능이 포함되어 있습니다.

이 기능의 대부분은 ReactJS의 성능 및 동시성 향상에 관한 것입니다. 동시성에 관해서는 이것을 읽을 수 있습니다 article .

자동 배치

비동기 기능을 위한 자동 일괄 처리. 일괄 처리는 React가 여러 상태 업데이트를 하나의 다시 렌더링으로 그룹화하여 성능을 향상시키는 것입니다. 자동 일괄 처리가 없으면 React의 이벤트 핸들러 내에서 업데이트만 일괄 처리합니다.

엄격 모드

또한 엄격 모드가 업데이트되었습니다. 이제 Strict Mode는 사용되지 않는 메서드를 사용할 때 콘솔 경고에 표시됩니다.

미결

Suspense 구성 요소 업데이트 - 이제 이 구성 요소를 SSR과 함께 사용할 수 있습니다.

새로운 후크

ReactJS 18에는 새로운 후크도 있습니다.

후크는 ReactJS 16.8에서 사용할 수 있게 되었습니다. 기능적 구성 요소에서 classe 구성 요소의 상태 및 기타 기능을 사용할 수 있는 기능을 제공합니다. ReactJS 18에는 몇 가지 새로운 후크가 있습니다.

useTransition

Returns a stateful value for the pending state of the transition, and a function to start it.

후크를 사용하면 로직을 특수 함수로 래핑하여 애플리케이션의 성능을 향상시킬 수 있습니다. 이러한 기능에서 로직을 배치할 수 있으며 이는 많은 시간이 소요될 수 있습니다. 예를 들어 서버에 요청합니다.

이 후크를 사용하기 위해 "react"에서 useTransition을 가져옵니다.

useTarnsition은 두 개의 변수를 반환합니다. 첫 번째 변수는 부울 변수입니다. 두 번째 변수는 트랜지션을 시작할 함수입니다. 이 함수 startTransition은 "react"에서 가져올 수 있지만 기능 구성 요소에서 "react"의 메서드를 사용하는 것은 권장되지 않습니다. 후크에서 이 기능을 가져오는 것이 좋습니다.

const [isPending, startTransition] = useTransition();

이 함수는 즉시 호출되는 콜백 함수를 인수로 사용합니다. 이 콜백 함수가 실행되는 동안 완료되기 전에 부울 변수가 true가 됩니다. startTransition 함수 내부의 모든 논리가 완료된 후 부울 변수는 false가 됩니다. 그리고 UI에서 이 부울 변수를 사용하여 어떤 일이 진행되고 있음을 보여줄 수 있습니다.

startTransition(() => {
  // Some functions
});

이 후크는 애플리케이션의 UX를 크게 향상시킬 수 있습니다.

useDeferredValue

useDeferredValue accepts a value and returns a new copy of the value that will defer to more urgent updates. If the current render is the result of an urgent update, like user input, React will return the previous value and then render the new value after the urgent render has completed.

후크는 인수를 사용합니다. 데이터는 지금 캐시되고 다른 모든 변경 사항이 통과된 경우에만 업데이트되어야 합니다. 따라서 후크는 긴급하게 업데이트되지 않을 수 있는 값을 캐시하고 더 긴급한 변경이 통과하면 이 값을 업데이트합니다. 특정 값의 렌더링 지연과 같습니다.

const deferredPosts = useDeferredValue(posts);

후크 useTransition 및 useDeferredValue는 상호 교환 가능하며 함께 사용해서는 안 됩니다.

사용 ID

이 후크는 하나의 고유 ID를 생성합니다.

useId is a hook for generating unique IDs that are stable across the server and client, while avoiding hydration mismatches.

const id = useId();

예를 들어 레이블 및 입력에 대한 ID로 사용할 수 있습니다.

<>
  <label htmlFor={id}>Do you like React?</label>
  <input id={id} type="checkbox" name="react"/>
</>

useSyncExternalStore

useSyncExternalStore is a hook recommended for reading and subscribing from external data sources in a way that’s compatible with concurrent rendering features like selective hydration and time slicing.

이 후크는 현재 ReactJS의 일부인 "use-sync-external-store"라이브러리에서 가져왔습니다.

웹소켓, 리덕스 스토어, 전역 변수, DOM 상태 등 구성 요소 외부에 외부 저장소를 저장합니다. 우리는 이 저장소를 구독할 수 있습니다.

내부 저장소는 props, useState, useReducer 등입니다.

이 후크는 세 가지 인수를 허용합니다. 세 인수는 모두 콜백 함수입니다.

*구독 *: 스토어가 변경될 때마다 호출되는 콜백을 등록하는 기능입니다.

getSnapshot: 스토어의 현재 값을 반환하는 함수입니다. 이를 사용하여 구독한 값이 마지막으로 렌더링된 이후 변경되었는지 확인할 수 있습니다.

getServerSnapshot(선택): 서버 렌더링 시 사용한 스냅샷을 반환하는 기능입니다.

이 후크는 UI에서 사용할 수 있는 새 상태를 반환합니다.

useInsertionEffect

The signature is identical to useEffect, but it fires synchronously before all DOM mutations. Use this to inject styles into the DOM before reading layout in useLayoutEffect. Since this hook is limited in scope, this hook does not have access to refs and cannot schedule updates.

이 후크는 useLayoutEffect 후크처럼 작동하지만 useInsertionEffect는 useLayoutEffect보다 먼저 실행되며 참조에 액세스할 수 없습니다. 후크는 콜백 함수를 수락합니다.


글쎄요, 제 생각에는 이것이 새로운 주요 기능일 뿐입니다. ReactJS 공식 문서에서 ReactJS 18에 제공되는 모든 새로운 변경 사항을 찾을 수 있습니다.

주목 해 주셔서 감사합니다!