[#. React] React 18 새롭게 추가된 기능 알아보기

 

 

 

 

 

 

① Suspense 기능 확장

 

 

데이터를 가져오기 위한 Suspense는 <Suspense>를 사용하여 선언적으로 데이터를 비롯한 무엇이든 "기다릴" 수 있도록 해주는 새로운 기능이다

이 페이지에서는 사용 사례 가운데 데이터 로딩에 초점을 두지만, 이 기능은 이미지, 스크립트, 그 밖의 비동기 작업을 기다리는 데에도 사용될 수 있다

 

 

기존

 

function Profile() {
  const { data: profile, isLoading } = useQuery("profile", fn);
  if(isLoading) {
    return <Spinner />
  }
  return <div>Hello {profile.name}!</div>
}

 

 

 

 

 

 

React 18 

 

// 프로필을 불러오는 동안 스피너를 표시한다
<Suspense fallback={<Spinner />}>
  <Profile />
</Suspense>

 

 

 

컴포넌트와 Loading State가 분리된 상태다

컴포넌트 안에 데이터를 가져오면 리액트는 컴포넌트를 렌더링 하지 않고 Spinner를 Suspense에 렌더링한다

데이터를 컴포넌트에 가져오지 않으면 데이터와 함께 이미 있는 컴포넌트를 보여준다

 

 

 

 

 

 

② Serverside 지원 

 

 

CSR vs SSR 

 

CSR은 브라우저에서 React(JS)를 전체적으로 로드한 후에만 화면을 볼 수 있기 때문에 사용자가 빈 화면을 볼 수 있다

TTV(Time To View) = TTI(Time To Interact)

 

SSR은 서버에서 먼저 React를 실행하고 React는 UI를 렌더링하고 그 결과인 HTML을 제공한다 

이때 사용자는 HTML 페이지만 가지고 있고, React가 브라우저에 로딩될 때까지 인터랙션은 불가능하다

TTV(Time To View), TTI(Time To Interact) 사이 공백 존재

 

하지만 SSR에서도 어느 한 컴포넌트를 로딩하는데 오래 걸리면 백엔드에서 전체 렌더링하는 동안 사용자가 빈 화면을 볼 수 있다

 

 

<App>
  <Header />
  <Profile />
</App>

 

Profile 컴포넌트 렌더링이 끝날 때까지 Header도 볼 수 없는 경우가 발생한다

 

 

<App>
  <Header />
  <Suspense fallback={<Spinner />}>
    <Profile />
  </Suspense>
</App>

 

이때 React 18에서는 Suspense로 컴포넌트를 저렇게 감싸주면

브라우저에서 React가 로딩되기 전에 Header는 볼 수 있고, Profile 컴포넌트 렌더링이 끝나게 되면 Spinner HTML => Profile HTML로 대체한다

즉, Suspense 덕분에 느린 컴포넌트를 기다릴 필요 없이 어플리케이션을 빠르게 렌더링할 수 있다

느린 컴포넌트가 백엔드에서 로딩된 후에 React가 HTTP STREAM을 활용해서 프론트엔드로 보내고 스크린에 띄우게 된다

 

 

 

전체 어플리케이션을 한번에 hydrate 할 필요가 없다

아직 hydrate 되지 않은 React 컴포넌트를 사용자가 클릭하면 React는 다른 컴포넌트를  hydrate 하던 것을 멈추고

사용자가 인터랙션하기 원하는 그 컴포넌트를 먼저 hydrate 한다

 

 

* Hydration

JS가 정적 호스팅 또는 서버 측 렌더링을 통해 전달되는 정적 HTML 웹 페이지를 HTML 요소에 이벤트 핸들러를 첨부하여 동적 웹 페이지로 변환하는 기술이다

 

 

 

 

 

 

③ Sever Component ⭐️

 

 

⑴

어느 컴포넌트가 브라우저가 렌더링할 컴포넌트인지, 서버가 렌더링할 컴포넌트인지, 혹은 둘 중 하나가 렌더링할지를 미리 선택할 수 있다

무거운 패키지에 의존하는 어플리케이션이 있다고 할 때, SSR에서 사용자는 코드와 해당 패키지를 다운로드해야 한다

이때 로딩 속도도 오래 걸리고 어플리케이션 용량도 커진다

Server Component로 변환하면 서버에서 컴포넌트의 렌더링을 수행하고, 렌더링의 결과값만 사용자에게 스트리밍한다 

사용자는 JS를 다운로드하지 않아도 된다

 

 

⑵

DB랑 직접적으로 커뮤니케이션이 가능하다

서버 컴포넌트에서 SQL 쿼리를 수행할 수 있고, 브라우저는 이 컴포넌트를 실행하지 않고 해당 컴포넌트의 렌더링 결과값만 가져온다

 

 

// 서버 컴포넌트
file.server.js

// 클라이언트 컴포넌트
file.client.js

// 범용 컴포넌트
file.js

 

파일명으로 서버 컴포넌트, 클라이언트 컴포넌트, 범용 컴포넌트를 구분해서 사용할 수 있다