2024년 React 트렌드

(robinwieruch.de)

Astro (React와 함께)

작년 Astro가 Gatsby의 후속작으로 등장
Astro는 주로 정적 웹사이트로 알려졌으나, 웹 애플리케이션과 API 엔드포인트로도 인기를 끌고 있음
Astro로 구축된 웹사이트는 서버에서 렌더링을 처리하여 기본적으로 성능이 뛰어남
Astro는 React나 UI 프레임워크 없이도 사용가능하여, ".astro" 파일을 통해 UI 컴포넌트를 만들 수 있음
React와 함께 사용할 경우, HTML과 CSS만 브라우저로 전송되며, 필요한 경우에만 자바스크립트를 제공함
- "fast-by-default"

tRPC는 타입 안전한 풀스택 애플리케이션을 위한 내 최애가 되었음
Prisma는 백엔드 애플리케이션의 데이터베이스 모델에서 유형을 생성하는 반면, tRPC는 백엔드에서 프론트엔드의 API 계층에 걸쳐 유형 안전성을 유지
원격 프로시저 호출이라는 tRPC의 기본 특성을 통해 클라이언트 애플리케이션은 일반 함수를 호출하여 백엔드의 API를 호출할 수 있음
tRPC는 JSON-RPC 사양과 HTTP 전송 계층을 사용하며, react-query와 결합하여 효율적인 캐싱 및 요청 배치를 지원함

React Server Components(RSC)는 지난해 Next 13.4를 통해 커뮤니티에 의해 구현되고 채택됨
RSC는 웹 개발에 큰 패러다임 전환을 가져오고 있음
RSC는 더 큰 애플리케이션에서 React 컴포넌트를 사용하는 방법을 다시 생각하게 만들기 때문에 React Hook보다 더 큰 변화일 수 있음
RSC를 사용하면 컴포넌트가 브라우저로 전송(또는 스트리밍)되기 전에 서버의 컴포넌트 수준에서 데이터 가져오기를 수행할 수 있어서 성능이 향상됨
tRPC와 react-query가 클라이언트-서버 통신에 사용되는 상황에서 RSC가 서버에서 데이터를 가져오는 경우엔 어떤 역할을 하게 될지 궁금. 올해는 어떤 결과가 나올지 기대됨

Tanner Linsley는 SPA(Single Page Applications)가 아직 죽지 않았다고 주장함
react-query 와 react-table을 만드는데 참여한 그가 새로 발표한 라이브러리 TanStack Router
많은 개발자가 내장 라우터와 함께 Next.js 및 Remix(가장 인기 있는 React 라우터를 내부적으로 사용하며 RSC 구현에도 중점을 두고 있음)와 같은 메타 프레임워크를 채택하고 있지만, 아직 아무도 React용 타입 안전 라우터를 처음부터 만들지 않았음
TanStack Router는 React 생태계에서 중요한 공백을 메우며, TypeScript 지원을 갖춘 새로운 라우터임
이 라우터는 개발자가 타입 안전한 방식으로 URL 상태를 읽고 쓸 수 있게 해줌

Vercel은 RSC 무브먼트에 깊이 관여된 Next.js를 밀고 있는 회사
여러 핵심 개발자가 Vercel에 고용되었기 때문에 많은 개발자는 Vercel이 React의 원동력이라고 생각함
Vercel은 RSC로 React의 경계를 확장할 뿐만 아니라, Next.js를 통해 React 애플리케이션을 효율적으로 배포하고 사용자에게 전달하는 방법도 확장하고 있음
Vercel에서 Next 애플리케이션을 사용하면 엣지 런타임을 통해 React 컴포넌트를 스트리밍할 수 있음
이렇게 엣지에서 React 컴포넌트를 스트리밍하는 것은 성능에 큰 영향을 미침
전 세계에 복제본을 보유한 PlanetScale과 같은 서버리스 DB와 결합하여 향후 애플리케이션 호스팅 방법(또는 더 나은 위치)에 대한 흥미로운 트렌드가 될 것

Turbopack은 Webpack의 후속작으로, 아직 프로덕션에서 사용할 단계는 아니지만 Next.js 애플리케이션에서 로컬 개발에 사용 가능함
과거에는 번들러가 이미 많은 책임을 가지고 있었지만, 클라이언트와 서버 컴포넌트를 개발 및 생산 환경에서 결합하는 추세로 인해 새로운 종류의 번들러가 필요함
개인적으로 Vite와 그 서버 측 기능이 Next.js에서 사용되는 것을 보고 싶었지만, Remix와 다른 메타프레임워크 및 SPA 들이 Vite를 채택하는 동안 Verce/Next는 Turbopack 작업을 시작

ESLint와 Prettier의 설정과 상호 작용에 대한 불만이 있으나, Biome(구 Rome)은 이를 대체할 빠르고 통합된 도구 체인 솔루션을 제공하고자 함
또다른 대안은 매우 유망해 보이는 올인원 툴체인의 대안은 oxc(JavaScript Oxidation Compiler)

React 개발자들은 매년 좋아하는 UI 라이브러리를 변경하는 경향이 있음
몇 년 전에는 Material UI를 사용하다가 Semantic UI/Ant Design으로, 그다음에는 Chakra UI로, 그리고 Mantine UI로 넘어갔고, 작년에는 shadcn/UI에 정착
이전의 모든 선택은 주로 디자인과 사용성에 대한 욕구에서 비롯된 것이었지만, shadcn/UI에서는 몇 가지가 달라졌음
shadcn/UI는 Tailwind를 완전히 수용한, 컴포넌트를 맞춤 디자인하는 첫 번째 인기 UI 라이브러리
Headless UI 라이브러리는 디자인 없이 기능성과 접근성을 제공하는 추세임
Styled Components 나 Emotion 같은 CSS-in-JS 솔루션은 클라이언트/브라우저에 부담을 지우기 때문에 StyleX 같은 새로운 CSS-In-JS 솔루션은 유틸리티-우선 CSS로 컴파일하여 이 문제를 완화함