09. 리액트 Version 18

Automatic batching

-> batching (배칭) 은 업데이트 대상이 되는 상태값들을 하나의 그룹으로 묶어서 한번의 리렌더링에 업데이트가 모두 진행될 수 있게 해주는 것을 의미한다.

=> 한번에 리렌더링을 하는 것.

 

-> 한 함수 안에서 setState 를 여러번 호출하더라도, 리렌더링은 한번만 발생한다.

=> 함수의 끝에서 업데이트되며, 마지막 한번만 리렌더링 한다.

즉, 여러번 리렌더링 하는 것을 막기 때문에 성능상 좋은 영향을 준다.

 

-> 리액트 이전 버전에서도 batch update 가 지원되었으나, 클릭과 같은 브라우저 이벤트에서만 적용이 가능하고 API 호출에 콜백으로 넣은 함수나 timeouts 함수에서는 작동하지 않았다.

 

batch 처리하지 않으려면?

-> 일반적으로 일괄 처리가 성능이 더 좋고, 안전하다. 다만, 일부 코드는 상태 변경 직후 DOM 에서 무언가를 읽어와야 할 수 있다. 이러한 경우에는 ReactDOM.flushSync() 를 사용하여 일괄 처리를 옵트아웃(잠시 정지)할 수 있다.

 

 

리액트 18 버전에서 Automatic batching

1.  더 나은 성능을 위한 더 적은 리렌더링
2.  이벤트 핸들러 밖에서도 작동
3.  필요할 때 제외 가능

 

---

Suspense on the Server

https://github.com/reactwg/react-18/discussions/37

New Suspense SSR Architecture in React 18 · reactwg/react-18 · Discussion #37

 

서버 사이드 렌더링 (SSR)

-> 리액트의 SSR 은 다음의 스텝으로 이뤄진다.

1. 서버에서 전체 앱에 대한 데이터를 가져온다.
2. 서버에서 전체 앱을 HTML 로 렌더링하고 응답을 보낸다.
3. 클라이언트에서 전체 앱에 대한 JS 코드를 로딩한다.
4. 클라이언트에서 JS 논리를 전체 앱에 대한 서버 HTML 에 연결한다. (hydration)

 

#Hydration : 수분기가 없는 것에 수분을 공급하는 것. (HTML에 JS를 연결하는 것)

 

-> 다음 단계가 시작되기 전에 현재 단계에서 전체 앱에 대한 과정이 완료되어야 한다.

HTML 생성이 오래걸리는 컴포넌트와 그렇지 않은 컴포넌트가 있기 때문에, (모든 컴포넌트의 생성 속도가 같지 않기 때문에) 비효율적인 방법이다.

 

리액트 18 에서 Suspense 로 문제 해결

-> 리액트 18 을 사용하면 <Suspense /> 로 앱을 작은 단위로 나눌 수 있다.

=> 앱 사용자는 콘텐츠를 더 빨리 보고 훨씬 빠르게 상호작용 할 수 있다.

 

 

---

Transition

-> 리액트 18 에서는 업데이트 중에도 앱의 응답성을 유지하는 데 도움이 되는 새로운 API 를 도입한다. 이 새로운 API 를 사용하면 특정 업데이트를 "Transition" 으로 표시하여 사용자 상호 작용을 크게 개선할 수 있다. 상태 전환 중에 시각적 피드백을 제공하고 전환이 발생하는 동안 브라우저의 응답성을 유지할 수 있다.
=> 상태 업데이트를 하는데 우선순위를 주게 된다.  

 

-> 대표적으로 검색 기능을 구현할 때 검색하는 Input 은 이벤트에 따라서 리렌더링이 해당화면에 업데이트 되어야한다. 하지만 그 아래 검색 결과도 이에 따라 업데이트가 되는데, 검색 결과 리스트가 많지 않더라도 내부적으로 검색 결과를 가져오는데 많은 작업을 진행할 수 있기에 검색창에 타이핑을 하는것에 따라 바로바로 검색 결과도 업데이트를 하면 성능에 문제가 생길 수 있다.

 

-> 이 부분은 검색창과 결과창 두 부분으로 나눌 수 있으며, 유저가 타이핑하는 것에 따라 즉각 반영되기를 기대하는 검색창, 그리고 검색창보다는 UI 업데이트가 느린 것에 대해 자연스럽게 받아들여져야 하는 결과창으로 나눌수 있다.

 

# setInputValue는 Urgent Upadates, setSearchQuery는 Transition Updates

 

어떻게 문제를 해결할 수 있을까?

-> 새로운 startTransition API는 업데이트를 "Transition"으로 표시할 수 있는 기능을 제공하여 이 문제를 해결한다. 이 API로 React에게 상태 업데이트를 하는 것에 대해 우선 순위를 정해주는 것이다.

 

-> startTransition 에 래핑된 업데이트는 긴급하지 않은 것으로 처리되며 클릭이나 키 누름과 같은 더 긴급한 업데이트가 들어오는 경우 중단된다. 전환이 사용자에 의해 중단되면 완료되지 않은 오래된 렌더링 작업을 제거하고 최신 업데이트만 렌더링한다.

=> Transition 을 사용하면 UI 가 크게 변경되더라도 대부분의 상호 작용을 빠르게 유지할 수 있다. 또한 더 이상 관련이 없는 콘텐츠를 렌더링하는 데 시간을 낭비하지 않아도 된다.

 

Transition 이 보류 중인 동안 어떻게 해야 할까?

-> 검색 창에 타이핑을 했을 때 startTransition API 로 인해 결과 창에는 UI 업데이트 우선순위가 밀려서 업데이트 보류가 일어나게 된다. 이 때는, 아래와 같이 isPending이 true로 되기 때문에 isPending이 true일 시에 Spinner 같은 컴포넌트를 보여주면 된다.

 

 

리액트 18 이전에는 어떻게 처리했을까?

-> startTransition 이 없을 때는 State를 2개로 나눠서 따로 처리하였다. (state가 2개이므로 업데이트 처리 방법을 다르게 해준다.)

1. debounce를 이용해서 처리하기
2. setTimeout을 이용해서 처리하기

=> debounce 를 이용하거나 setTimeout 을 이용하는 것은 결국 모든 이벤트가 Schedule 되어 있고 뒤로 밀리는 것이기 때문에 이벤트가 끝나도 계속 결과를 표출하게 된다.

 

리액트 버전 18 로 업그레이드 하는 방법

1. react와 react-dom을 npm 으로 부터 설치하기 (npm install react react-dom)
2. ReactDOM.render ====> ReactDOM.createRoot 변경하기