웹서비스 - Open API - React - 2024년 React 트렌드

 

Astro (React와 함께)

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

인증 (React에서)

• 여러 스타트업과 오픈 소스 프로젝트 덕분에 React에서의 인증이 다시 흥미로워짐
• Firebase Authentication, Auth0, Passport.js, NextAuth 외에도 새로운 인증 대안이 등장
• Supabase는 오픈 소스 Firebase 대안으로 다양한 기능을 제공
• Clerk는 인증에만 집중하며, React에서 쉽게 사용자 등록 및 로그인이 가능함
• Lucia는 Astro와 함께 인기를 얻었으며, 오픈 소스 및 데이터베이스와의 명확한 추상화 계층을 제공함

tRPC를 이용한 풀스택 React 애플리케이션

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

React 서버 컴포넌트와 Next.js

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

TanStack Router for SPA React

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

Vercel, React를 Edge로 밀어붙이다

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

React용 번들러: Turbopack 대 Vite

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

React 컴파일러 (React Forget으로 알려짐)

• React 개발자들은 useCallback, useMemo, memo의 사용에 대해 불만을 가짐
• React 팀은 React 애플리케이션의 모든 메모화를 자동화하는 React Compiler라는 컴파일러를 (비교적 조용히) 개발 중
• 함수(useCallback), 값(useMemo), 컴포넌트(memo)를 메모하는 수동 프로세스가 앞으로는 사라질 것으로 기대
• React가 이 모든 것을 메모화하여 다음 렌더링에서 모든 것을 다시 계산할 필요가 없도록 처리할 것
• React Compiler는 이러한 수동 메모이제이션을 자동화하여 React 애플리케이션의 성능을 개선할 것임
• 아마도 React 19 및 React Conf 2024 등에서 발표될 것

Biome

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

Headless UI 라이브러리 for React

• 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로 컴파일하여 이 문제를 완화함

 

 

 

https://www.robinwieruch.de/react-trends/

React Trends in 2024

 

https://news.hada.io/topic?id=13489