[React] Appendix A. 리액트 버전18

Automatic Batching

- Batching은 여러가지 작업을 한번에 처리하는 것
- 원래는 state 업데이트 할 때마다 재렌더링이 되지만
- Automatic Batching은 업데이트를 묶어서 한번에 처리해서 재렌더링을 한다.

 

 

 

 

Transitions

- 긴급한 업데이트와 긴급하지 않은 업데이트를 구분해서 처리하기 위한 개념

 

긴급한 업데이트

- 사용자와 직접적인 인터랙션이 일어나는 경우

- 예) 글자 입력, 버튼 클릭 등

 

긴급하지 않은 업데이트

- 사용자와 직접적인 인터랙션이 일어나지 않는 경우

- 예) 서버로부터 결과를 받아와서 보여주는 경우

 

 

 

 

Suspense

- 리액트로 컴포넌트를 작성하다보면 웹 사이트 규모가 커지고, 컴포넌트 사이즈 역시 커진다.

- 그래서 웹 브라우저에서 이렇게 큰 컴포넌트를 한번에 로딩하면 시간이 오래 걸린다.

- Code Splitting : 컴포넌트의 코드를 여러 조각으로 분리,

- 분리된 조각을 동적 로딩기법으로 반응 속도 높힌다.

- Suspense의 역할은 하위 컴포넌트(children)가 준비되기 전까지 렌더링을 중단하는 것

OtherComponent가 준비되기 전 까지 fallback 속성 안에 LoadingSpinner 컴포넌트를 보여주고, OtherComponent가 준비되면 그때 화면에 보여준다.

 

 

 

 

클라이언트와 서버 렌더링 API 업데이트

리액트 DOM 클라이언트

기존의 방식

새로운 방식 (리액트 버전 18)

 

이제 앞으로 렌더링을 하기 위해서는 createRoot()를 사용하는게 좋다. 기존 버전도 물론 되지만, 기존 버전 사용시 리액트 18에서 사용할 수 있는 기능들을 사용하지 못한다.

 

 

 

리액트 DOM 서버

renderToPipeableStream : NodeJs 환경에서 스트리밍을 위한 함수

renderToReadableStream : Edge runtime 환경(예: Deno, Cloudflare workers)을 위한 함수

 

 

 

 

새로운 Strict 모드 작동 방식

- Strict Mode : 개발모드일 때 잠재적인 버그를 찾게 해주는 모드

- 리액트 18에서는 Strict의 모드의 동작이 변경되었는데, 컴포넌트를 언마운트(unmount) 시켰다가 다시 마운트(mount)

 

 

 

 

새롭게 추가된 훅들

useId()

- 서버와 클라이언트에서 고유한 ID값을 생성하기 위한 훅

- 다만 리스트를 렌더링 할 때, map 함수 내에서 사용하는 엘리먼트의 키로 사용하지 않음

 

useTransitions()

- 위에서 보여줬던 긴급하지 않은 업데이트를 위한 훅

- 기본적으로 일반적인 상태 업데이트는 긴급한 업데이트로 처리되고,

- useTransitions() 이나 startTransitions() 으로 긴급하지 않은 업데이트들을 모아서 처리할 수 있음

 

useDeferredValue()

- 긴급하지 않은 업데이트를 재렌더링하는 걸 연기할 수 있게하는 훅

- 짧은 시간에 한가지 상태의 업데이트가 여러번 발생하게 되면, 최종 상태값만을 업데이트 하면 된다.

 

useSyncExternalStore()

- 외부 저장소를 구독할 수 있게하는 훅

- 외부 저장소를 React 컴포넌트의 State와 연동해서 사용하고 싶을 때 사용.

- 애플리케이션 코드가 아닌 라이브러리에서 사용하기 위한 것이라 입문자들이 사용할 일은 거의 없음

 

useInsertionEffect()

- CSS인 JS 라이브러리를 위한 훅

- 렌더링 과정에서 style 삽입의 성능 문제를 해결하게 해줌

- 위의 useSyncExternalStore() 훅 처럼 일반적인 리액트 개발자들이 사용할 일은 거의 없음