Search

완전 새로운 리액트가 온다? 핵심정리 10분컷.

subject
react
react18
suspense
server component
date
2022/02/09
1 more property
2021년 11월, 리액트 버전 18이 알파 → 베타로 옮겨짐 (기능 완성되고 배포 전까지 더 이상 추가 안함)
2021년 12월, 버전 18 출시 후보 발표 @rc
1.
React Suspense
리액트 16부터 존재했으나 experimental 이었음
18부터 experimental 제거, 서버사이드 렌더링과 함께 강력해짐
~16
컴포넌트 안에서 처리하던 로딩여부를 컴포넌트 바깥으로 옮김
리액트와 fetching library가 커뮤니케이션해서 데이터 fetching 여부를 알림
18~
컴포넌트 별로 나눠서 렌더링 가능 (concurrent rendering)
ex. 렌더링 오래 걸리는 컴포넌트만 suspense 로 감싸서 이후 로딩이 끝난 시점에 http stream을 사용해 렌더링된 결과로 업데이트. (브라우저에서 js 로딩되는 것과 상관없이)
렌더링 빠른 컴포넌트부터 화면에 보여줄 수 있기 때문에 사용자 경험 향상
컴포넌트 별로 hydration도 나눠서 가능 (selective hydration)
hydrate 되기 전 유저가 인터랙션하면 다른 부분의 hydration은 일시 중지하고 해당 컴포넌트를 우선적으로 hydrate 함
2.
Server Component
리액트 18의 마이너 버전으로 출시될 예정
백엔드에서 리액트 코드를 사용할 수 있는 기능
브라우저에서 렌더링할 컴포넌트, 서버에서 렌더링할 컴포넌트를 나눌 수 있음
ex. 무거운 라이브러리를 사용하는 컴포넌트의 경우 브라우저에서 렌더링하면 라이브러리도 다운받아야함 (어플리케이션 사이즈 커짐) → 서버 컴포넌트 사용하면 렌더링이 서버에서 수행되고 브라우저에서는 렌더링된 결과만 받으면 되서 라이브러리 다운받을 필요 없음
→ 로딩 시간 향상
DB와 직접 커뮤니케이션하는 컴포넌트
서버 컴포넌트에서 직접 SQL 쿼리 수행 가능. 서버에만 존재하기 때문
브라우저에서는 (클라이언트 컴포넌트인 경우) DB에 접근하지 않고 렌더링 결과만 사용
그 외: automatic batching, startTransitions..