원문 자료) 프론트엔드 생태계를 점령할지도 모르는 리액트18
https://www.youtube.com/watch?v=7mkQi0TlJQo
환영한다 리액트 18
진화해 버린 Suspense의 활용에 대하여 정리하자면...
그동안 많은 반복 작업을 만들어낸 로딩체크 로직..이 작업들을 간결화하기 위해 리액트18은 Loading State데이터 덩어리를 컴포넌트의 외부로 이동시켜서 불러오게 되었다.
로딩용 데이터를 Suspense에 꽂은채 컴포넌트를 감싸고 있는데 이것이 보이는 직관성에 맞게 작동한다. 해당 컴포넌트 안의 데이터를 불러오는 동안 유저가 빈화면을 보지 않도록 컴포넌트를 감싸고 있는 Suspense를 렌더링하고 데이터를 다불러오면 완성된 컴포넌트를 화면에 보여 주는것이다.
{* 외부 컴포넌트로 이동된 로더 *}
<Suspense fallback={<Loader />}>
<Profile />
</Suspense> // 이전 코드들에 비해 매우 간결화 되었다
function Profile() {
const { data: profile } = useQuery("profile", fn);
return <div> Data is here: {profile.key} </div>;
}
작업영역 코드 또한 잘 읽히고 데이터플로우를 빠르게 납득할 수 있는 아주 착한 코드가 되어 버렸다.
또한 SSR방식을 획기적으로 너무도 편리하고 쉽게 적용하게 되었다
유저가 빈화면의 공허함을 경험하지 않도록 Suspense를 적재적소에 사용해보자
<App>
<작은데이터 />
<Suspense fallback={<Loader />}>
<큰데이터 />
</Suspense>
</App>여기서 비교적 불러오기 쉬운<작은데이터 />는 이미 화면에 보여지고 있다.Suspense로 감싸진 <큰데이터 />컴포넌트가 서버사이드에서 로딩되는 동안 우리의 HTML페이지는<Suspense fallback={<Loader />}>의 불러 와진 html 코드 ex) <img src="loading.gif"> 를 가지고 있다가 로딩이 끝나는 순간 그 자리에 컴포넌트에서 로딩된 html코드 ex) <ul class="big-list">...</ul>로 대체하여 화면에 바로 보여준다.
이렇게 각각의 컴포넌트가 렌더링 될 때,hydrate(js파일 까지 브라우저에 렌더링되어 인터랙티브되는 상태) 안된 리액트 컴포넌트를 유저가 클릭하면 유저가 작동하길 바라는 컴포넌트를 우선적으로 기능하게 해준다. 매우 빠른 렌더링과 사용성을 보장해주는 것이다.
다음으로 기대되는것이 Server Components의 본격적인 배포라고 한다.
백엔드에있는 리액트JS코드를 브라우져가 렌더링 할것인지(CSR) 서버가 렌더링(SSR) 할것인지 컴포넌트를 선택적으로 렌더링 하는것이다. 즉, 컴포넌트의 렌더링을 서버에서 수행할 경우 렌더링 결과 값만 유저에게 보내 무거운 js데이터를 유저가 직접 다운로드하지 않아도 이용할수 있도록하여 로딩 타임이 단축되고 UX의 만족도를 올릴 수 있다.
또한,기본 방식이 보안에 취약한 방면 렌더링값만 받아오기 때문에 보안에 강하며 사용성 또한 직관적이고 간단하다.
- file.server.js -> Server Component
- file.client.js -> Client Component
- file.js -> Universal Component
