*잠깐, 이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다.
현재 9만 이상의 개발업체, 개발 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오 예상기간을 한 번에 비교해보세요😆
새로운 18번째 리액트가 알파 버전으로 돌아왔습니다. 리액트 17에는 새로운 추가 기능이 많지 않았지만 ‘리액트 18’은 다릅니다. 이 중 핵심적인 업데이트를 하나씩 살펴보겠습니다.
그렇다면 무엇이 달라졌을까요?
1. 새로운 루트(Root) API
지금까지 아래와 같은 구문을 사용해 왔습니다.
reactDOM.render에 APP 컴포넌트와 함꼐 document.getElementById를 통해 루트 엘리먼트(root element)를 전달했습니다. 이를 통해 앱 구성 컴포넌트를 아주 간단하게 페이지의 루트 엘리먼트로 렌더링 할 수 있었습니다.
새로운 방식은 아래와 같습니다.
root라는 변수가 있고 여기에 createRoot라 부르는 새로운 메소드를 할당하고 있습니다. 이를 통해 루트 엘리먼트를 전달하고 root.render를 호출 후 앱 컴포넌트를 넘겨주게 됩니다.
앱 컴포넌트는 동일한 작업을 수행하지만 실행되는 방식에는 차이가 있습니다. 레거시루트 API(legacy root API)라 부르는 이전 방식은 여전히 ‘리액트 18’에서 작동하지만 점차 새로운 루트 API가 대체할 것이며 어느 시점에는 지원이 중단될 것입니다. 루트 API는 본 글에서 다른 기능들과 함께 리액트 18에서부터 지원될 것입니다.
2. 서스펜스(Suspense)
‘리액트 18’에서는 서스펜스를 완벽하게 지원할 예정입니다. 이름에서 알 수 있뜻이, 서스펜스는 렌더링 되기 전까지 무언가를 일시 중단하는 역할을 합니다.
위 예제에 등장하는 컴포넌트는 렌더링하기 전 데이터를 가져오는데 시간이 필요합니다. 서스펜스는 데이터가 반환되고 컴포넌트가 렌더링 될 때까지 fallback에 지정된 요소를 보여줍니다.
여기서 눈여겨 봐야 할 점은, Suspense 내부 컴포넌트 자체가 데이터를 기다리는 것은 아니지만 Suspense 내부의 모든 것이 렌더링 준비가 완료될 때까지 일시 중단된 상태로 유지된다는 것입니다.
HTML을 완전히 렌더링하기 위해 현재는 SSR1을 통해 서버사이드 렌더링을 구현하고 있지만 여전히 자바스크립트를 로드하고 전체 페이지를 하이드레이션(hydration)2 해야합니다. ‘리액트 18’에서는 아래와 같이 서스펜스를 사용하여 이러한 로딩 시간을 획기적으로 줄일 수 있습니다.
위 예제를 보면 네비게이션(Navbar), 사이드바(Sidebar), 게시글(Post), 댓글(Comment)을 로드하고 있습니다. 페이지 로딩이 끝나기 전에는 댓글을 보여줄 필요가 없으므로, 브라우저가 본문을 먼저 불러올 수 있도록 댓글 로딩을 일시 중단하고 이를 백그라운드에서 로드합니다.
3. 자동 배치(Batch)
리액트 17 이하 버전에서는 클릭과 같은 브라우저 이벤트 발생 시 배치로 상태를 업데이트합니다.
하지만 데이터를 가져온 다음 상태를 업데이트해야 하는 경우 배치 처리하지 않습니다. ‘리액트 18’에서는, 새로운 루트 API를 사용하면 시점에 관계없이 모든 상태 업데이트를 자동으로 배치 처리합니다.
배치 처리하고 싶지 않은 중요한 컴포넌트가 있다면 ReactDOM.flushSync()를 사용해 제외할 수 있습니다.
4. startTransition API
새로 추가된 API인 startTransition은 현재 웹 페이지의 응답성을 보장하면서 동시에 많은 UI를 논블로킹(non-blocking)3 방식으로 업데이트 할 수 있습니다.
리액트에서는 긴급하고 업데이트가 무엇이고 대기할 수 있는 업데이트가 무엇인지 알려줌으로써 UI가 응답성을 유지해줍니다.
타이핑, 호버(hover), 클릭과 같이 즉각적인 업데이트가 필요한 경우 일반적으로 다음과 같이 props/funtions를 호출합니다.
긴급하지 않거나 무거운 UI 업데이트의 경우 다음과 같이 startTransition API 블록 내부에 지정합니다.
5. 서스펜스 목록(Suspense List)
<SuspenseList />를 사용하면 revealOrder 속성에 forwards, backwards, 또는 together를 지정할 수 있습니다.
위 예제의 CardComponent는 정방향(forwards)으로 표시됩니다. (데이터 로딩이 완료될 때까지 LoadingSpinner 엘리먼트를 보여줌) 마찬가지로, backwards로 지정하면 카드가 역순으로 표시되고, “together”로 지정하면 모든 것이 동시에 표시됩니다.
6. useDeferredValue
useDeferredValue는 상태(state) 값과 timeout을 파라미터로 받아 최대 timeoutMs에 지정한 값만큼 뒤쳐져 따라올 수 있는 지연된 값을 반환합니다.
이는 일반적으로 사용자 입력에 따라 즉시 렌더링되는 항목과 데이터 가져오기를 기다려야 하는 항목이 있는 경우 인터페이스의 응답성을 유지하는 데 사용됩니다.
아래와 같이 ‘리액트 18’과 reactDOM을 즉시 설치할 수 있습니다.
정리하기
‘리액트 18’은 현재 알파 버전으로 공개됐고 아직 운영 코드로 쓰기에는 시간이 필요하지만 이러한 기능을 지금부터 미리 익힌다면 도움이 될 것입니다.
몇 달 내로 리액트 18의 베타버전이 공개될 예정입니다.
1 Server Side Rendering. 서버 연산을 통해서 페이지를 렌더링하고 완성된 페이지 형태로 응답한다.
2 자바스크립트가 클라이언트 사이드에서 정적 HTML 페이지에 이벤트 핸들러를 추가하여 동적인 페이지로 변환하는 기술
3 이전 작업이 완료될 때까지 기다리지 않고, 다음 작업이 바로 진행될 수 있도록 동작하는 방식
출처: https://javascript.plainenglish.io/everything-new-in-react-18-db459c2608de
국내 1위 IT아웃소싱 플랫폼,
위시켓이 궁금하신가요?
