React - React 18 새로운 점

출처 

https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022

 

 

2022년 3월에 React 18이 출시되었습니다. 추가된 기능, 없어진 기능 등등 내용이 많아 제가 사용하게 될 가능성이 높은 내용만

 

우선 추가했습니다.

 

 

React DOM Client

 

아래의 새로운 API는 react-dom/client에서 export(내보내기)됩니다. 

 

• createRoot : render 혹은 unmount 가능한 root를 생성하기 위한 새로운 메서드. ReactDOM.render 대신 사용하세요. React 18의 새로운 기능은 createRoot 없이는 동작하지 않습니다
• hydrateRoot: 서버에서 렌더링된 앱을 hydrate하기 위한 새로운 메서드. ReactDOM.hydrate 대신 새로운 React DOM server API들과 함께 사용하세요. React 18의 새로운 기능은 hydrateRoot 없이 동작하지 않습니다.

 

createRoot, hydrateRoot 모두 onRecoverableError 라는 새로운 옵션을 받을 수 있습니다. 이 옵션은 React가 렌더링 혹은

 

hydration에서 발생한 에러때문에 죽고 되살아났을 경우 알림을 받고 싶으면 붙일 수 있습니다. 디폴트로, React는 이전 브라우저에서

 

reportError 혹은 console.error를 사용합니다.

 

hydrate : 렌더링과 비슷하지만, 빈 DOM에 모든 react 컴포넌트를 렌더링하는 대신, 생성한 component들이 HTML로 렌더링된 

미리 생성된 DOM을 사용하는 것

 

 

 

 

 

새로운 기능들

 

 

React

 

• useId 

useId는 hydration mismatch를 피하면서 클라이언트와 서버 양쪽에서 고유한 ID를 생성하는 새로운 hook입니다.

 

여기서 hydration mismatch란 브라우저에 렌더링된 컨텐츠와 Node.js 내부의 HTML에 렌더링된 컨텐츠가 다른 오류입니다.

 

Hydration mismatch는 성능 저하, 버그를 유발할 수 있으니 피해야합니다.

 

이 hook은 접근성 API와 통합되는 컴포넌트 라이브러리에서 고유한 ID가 필요한 경우에 쓰임이 많습니다.

 

이 hook으로 React 17과 이전 버전의 issue를 해결할 수 있고, 새로운 streaming server renderer가 고장난 HTML을 

 

제공하는 방식 때문에 React 18에서 더 중요합니다.

 

 

• startTransition, useTransition

두개의 키워드는 급하지 않은 state 업데이트를 마킹할 수 있도록한다. 다른 state 업데이트는 급한( urgent ) 업데이트로

 

간주되는게 디폴트이다. React는 급한 state 업데이트(예로, text 입력 업데이트 )가 급하지 않은 state 업데이트를 (예로, 검색 결과 목록

 

을 렌더링하는 작업 ) interrupt하는 것을 허용한다. 

 

 

• useDeferredValue

이 키워드는 트리에서 급하지 않는 부분(non-urgent part) 리렌더링을 지연시킬 수 있습니다. debouncing과 비슷하지만 몇개의 이점이

 

있습니다. 고정된 시간 지연이 없어서 React는 첫 번째 렌더가 화면에 반형된 직후 지연된 렌더링을 수행할 것. 지연된 render는 인터럽트 

 

가능하고 사용자 입력을 막지 않는다.

 

 

debouncing : 여러 번 발생하는 이벤트에서 가장 마지막 이벤트만 실행되도록 하는 개념

 

 

• useSyncExternalStore

이 훅은 외부 저장소의 데이터 업데이트들을 강제로 동기화(synchronous)시켜 저장소가 병행적인 읽기(concurrent reads)를 지

 

원하도록합니다. 외부 데이터 소스에 구독하는 일을 구현하는 중에 useEffect가 필요하지 않게하고 React 외부의 state와 통합하는 

 

라이브러리에 추천됩니다.

 

 

• useInsertionEffect

이 훅은 새로운 훅으로 JS 라이브러리 내부의 CSS가 렌더 내부에 스타일을 주입하는 과정에서 생기는 퍼포먼스 이슈를 다룰 수 있도록

 

합니다. 만약 이미 JS 라이브러리 내부에 CSS를 만든 경우 사용할 필요는 없을것입니다. 이 훅은 DOM이 변경될 경우, layout effects

 

가 새로운 레이아웃을 읽기 전에 실행됩니다. 이 방식은 React 17과 이전 버전의 이슈를 해결하고 React 18에게 중요한 이유는 React가

 

병행성 렌더링중 브라우저에게 작업을 넘기고 레이아웃을 다시 계산할 기회를 주기 때문입니다.

 

 

 

React DOM Client

 

아래의 새로운 API는 react-dom/client에서 export(내보내기)됩니다. 

 

• createRoot : render 혹은 unmount 가능한 root를 생성하기 위한 새로운 메서드. ReactDOM.render 대신 사용하세요. React 18의 새로운 기능은 createRoot 없이는 동작하지 않습니다
• hydrateRoot: 서버에서 렌더링된 앱을 hydrate하기 위한 새로운 메서드. ReactDOM.hydrate 대신 새로운 React DOM server API들과 함께 사용하세요. React 18의 새로운 기능은 hydrateRoot 없이 동작하지 않습니다.

 

createRoot, hydrateRoot 모두 onRecoverableError 라는 새로운 옵션을 받을 수 있습니다. 이 옵션은 React가 렌더링 혹은

 

hydration에서 발생한 에러때문에 죽고 되살아났을 경우 알림을 받고 싶으면 붙일 수 있습니다. 디폴트로, React는 이전 브라우저에서

 

reportError 혹은 console.error를 사용합니다.

 

hydrate : 렌더링과 비슷하지만, 빈 DOM에 모든 react 컴포넌트를 렌더링하는 대신, 생성한 component들이 HTML로 렌더링된 

미리 생성된 DOM을 사용하는 것

 

 

 

React DOM Server

 

아래의 새로운 API는 react-dom/server에서 export(내보내기)되고 서버에 streaming suspense를 모두 지원합니다.

 

• renderToPipeableStream : Node 환경에 streaming 하기 위해 사용
• renderToReadableStream: 현대 런타임 환경 사용자들을 위한 API. (예: Deno, Cloudflare 사용자들)

 

 

Deprecations

 

• react-dom : ReactDOM.render. 사용하는 경우 경고가 출력되고 앱이 React 17 모드로 실행됨
• react-dom : ReactDOM.hydrate. 사용하는 경우 경고가 출력되고 앱이 React 17 모드로 실행됨
• react-dom : ReactDOM.unmountComponentAtNode
• react-dom : ReactDOM.renderSubtreeIntoContainer
• react-dom : ReactDOMServer.renderToNodeStream

 

 

 

Breaking Changes

 

다른 컴포넌트에 오류를 발생 가능케 하는 변경점들

 

React

 

Automatic batching 

 

이번 출시는 React가 업데이트를 batch하는 방식을 조금 더 자동화하여 성능을 향상한것을 보여줍니다. 더 자세한 정보는 https://github.com/reactwg/react-18/discussions/21 에서 볼 수 있습니다. 희귀한 경우이지만 개인정보 활용을 거부하는

경우 state 업데이트를 flushSync로 감싸주세요.

 

 

Stricter Strict Mode

 

더욱 엄격한 엄격 모드(Strict Mode). 미래에 React는 컴포넌트가 unmount 사이에 state를 보존할 수 있는 기능을 제공할 것입니다.

이에 대비해 React 18은 strict mode를 위한 development-only check를 지원합니다. React는 모든 컴포넌트에 대하여 컴포넌트가 처음으로 mount 되는 경우 이전의 state를 복원하면서 컴포넌트를 unmount 후 다시 mount 할것입니다. 이 작업이 앱을 망가뜨리면

컴포넌트가 존재하는 state를 가지고 다시 mount되는 일에 오류가 발생하지 않게 고칠 수 있을때까지 strict mode를 제거하세요. 

 

 

Consistent useEffect timing

 

일관적인 useEffect 타이밍. 

 

 

 

- 미완성