v18.0 적용
React 라이브러리 설치는 지금까지와 같다.
npm 사용시
npm install react react-dom yarn 사용시
yarn add react react-dom대신, 최초 JSX코드를 받아들이는 index.js의 render 방식에 변화가 생겼다.
기존 방식과 비교
// Before
import { render } from 'react-dom';
const container = document.getElementById('root');
render(<App />, container);
// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);기존 리액트에서는 render()이라는 메소드 안에 첫 번째 인자로 가장 상위의 컴포넌트를, 두 번째 인자로 그것이 렌더링 될 DOM 영역을 지정해주었다.
React v18.0에서는 createRoot를 이용하여 렌더링되는 DOM을 지정해주고
root.render(< App />)과 같은 방식으로 render해야한다.
React v18.0을 이용하면서 이전 방식으로 렌더링을 할 경우, 에러가 발생하니 새로운 방식을 익히고 적용시켜보자.
새로운 기능
그렇다면, React 18에서 어떤 기능이 추가되었고, 우리는 어떤 점을 눈여겨봐야할 지 알아보자!
동시 반응(Concurrent React)
리액트 18의 새로운 기능은 대부분 동시 렌더링을 중심으로 구성되어 있다. 동시 렌더링은 선택이지만, 리액트 팀은 이것이 리액트 애플리케이션 설계 방식에 큰 영향을 줄 것으로 기대한다고 한다.
동시 반응이란?
동시성은 그 자체로 어떠한 기능을 하는 것은 아니다. 대신, 내부적으로 일어나는 메커니즘을 통해 React가 우리의 UI를 동시에 여러 가지의 버전으로 준비하는 것이 가능하도록 한다.
잠금 해제 기능
동시성은 잠금 해제 기능이 있기 때문에 매우 중요하다. React에서 cueue의 우선 순위나 멀티 버퍼링과 같이 고도의 기술을 내부 구현에 사용한다. 하지만, 이러한 기능을 담당하는 API는 비밀리에 공개되지 않는다.
React팀의 생각으로는, 개발자는 단지 사용자 경험을 향상하는 대에만 신경 쓰면 되고, 그것을 처리하는 과정은 모두 React가 맡으면 되므로, 내부적으로 동시성이 어떻게 기능하는지 알지 않아도 된다고 했다.
React팀은 이러한 기술이 내부적으로 어떻게 동작하는지 알리고 싶어하지 않은 눈치다. 아무래도, 지금까지는 없었던 최신 기술이고 핵심적인 부분이 있나보다.
Concurrent React
React는 렌더링 도중에 중단되는 경우, 오류를 발생시킨다. 하지만, 동시 렌더링을 사용하면 업데이트 렌더링을 시작하고 중간에 일시 중지했다가 나중에 다시 렌더링 할 수도 있다. 진행 중인 렌더링이 실패할 경우에 오류가 아니라 렌더링을 포기할 수도 있다.
중요한 것은, 렌더링이 중단되더라도 UI가 일관되게 나타나도록 보장해준다는 점이다. 대규모 렌더링 작업 중이더라도 UI는 사용자 입력에 즉시 응답하여 보다 향상된 유저 경험을 얻을 수 있다.
재사용가능 state
동시 렌더링에서는 화면에서 특정 컴포넌트를 삭제한 후 나중에 이전 state값을 사용하여 다시 살려낼 수 있다. React팀은 앞으로 있을 소규모 패치에서 <OffScreen/>이라는 새로운 컴포넌트를 추가하여 백그라운드에서 새로운 UI를 준비할 수 있게 한다고 한다. 이것을 통해 사용자가 UI를 표시하기 전에 미리 준비할 수 있게 될 것이다.
정리
동시 렌더링은 React의 강력한 새로운 기능이며, 서스펜스, 전환, 스트리밍 서버 렌더링을 비롯한 대부분의 새로운 기능이 이를 활용하여 구축되어 있다.
리액트 팀은 v18.0의 새로운 기술에 대해 React 개발의 판도가 바뀔 만큼 임팩트가 있다고 자부하고 있다. 그리고 이러한 동시 렌더링은 시작에 불과하다고 하면서, 다른 기술 역시 소개했다.
앞으로 어떤 기술이 추가되어 UI 및 UX에 영향을 줄지 기대가 된다.
