[React] 리액트의 유용한 기능 3가지 (automatic batching , useTransition, useDeferredValue)

개인 공부 후 자료를 남겨놓기 위한 목적이므로,
생략되거나 오류가 있을 수 있음을 알립니다.
설명에 대한 지적은 언제나 환영입니다. :)

최신 리액트인 React 18에서 추가된 여러 기능 중

유용하게 사용할 수 있는 기능 3가지를 알아보도록 하자.

1. automatic batching

automatic batching에 대해서 알아보기 전 batch가 무엇인지 먼저 알아보자.

리액트에서의 batching은 리액트가 더 좋은 성능을 내기 위해

여러개의 state 업데이트를 하나의 재렌더링이 일어나도록 그룹화 하는 것을 의미한다.

쉽게 설명하자면 다음과 같다.

automatic batching의 경우 다행이도, 이름에 걸맞게 자동적용 되므로,

다른 코드를 삽입하여 실행하거나 하지 않아도 된다.

(최근의 리액트는 구 리액트보다 빨라졌다는 의미)

느린 컴포넌트의 성능을 향상시키는 기능이다.

만약 한 컴포넌트가 수백 수천개의 코드로 이루어져 있고, 특정 입력에 따라 이 모든 코드가 변경된다면

필연적으로 성능저하가 일어날 수밖에 없다.

이때 사용할 수 있는 기능이 useTransition이다.

원리는 다음화면으로 변경하기 전에 컨텐츠가 모두 로드될 때까지 잠시 대기함으로써

컴포넌트가 불필요한 로딩을 하는 것을 막아주는 방식이라고 한다.

이를 사용하기 위해서는 먼저 훅을 추가해주어야 한다.

훅을 추가해준 후,

이를 사용하고자 하는 컴포넌트에 다음과 같이 입력해주면 된다.

let [isPending, startTransition] = useTransition() 을 입력하고,

다음과 같이 지연의 원인이 되는 함수를 startTransition 으로 감싸주면 된다.

이렇게 간단한 방법으로 성능향상을 느낄 수 있다.

추가적으로 첫번째 인자인 ispending는 startTransition이 처리중일 때 true로 변하는 특성을 가지고 있다.

이를 이용하여 "로딩 중" 을 띄우는 등 여러가지 활용이 가능하다.

useDeferredValue도 위의 두 가지 기능들과 마찬가지로 state의 성능향상을 꾀하는 기능으로,

이 경우 다음과 같은 방법으로 사용한다.

일단 훅을 추가한 다음

다음과 같은 변수를 생성하고 해당 값인 value에 변동사항이 생기면 " 늦게 처리"를 해줌으로서 성능 향상이 일어난다.