필수로 사용되는 React 라이브러리

React 프로젝트 시작하기

• 클라이언트 사이드 렌더링(CSR)
  • React 프로젝트를 설정하는 가장 인기 있는 도구. 빠른 빌드 속도와 간편한 TypeScript 지원 제공
• 서버 사이드 렌더링(SSR)
  • Next.js : React 기반 메타 프레임워크로 서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원
• 정적 사이트 생성(SSG)
  • Astro : 프레임워크에 구애받지 않는 정적 사이트 생성 도구. React와 함께 사용할 수 있으며, 불필요한 JavaScript를 최소화하여 성능 최적화 가능

React 패키지 매니저

• 일반적인 패키지 관리
  • npm : Node.js 기본 패키지 매니저이자 가장 널리 사용됨
• 성능 최적화 필요 시
  • pnpm : 성능이 뛰어나지만 상대적으로 덜 보편적
• 모노레포 필요 시
  • Turborepo : Monorepo(모노레포) 관리 도구로, 여러 React 프로젝트를 효과적으로 관리 가능
• 의존성 속도 개선
  • Yarn : 더 나은 의존성 관리 및 속도 개선 제공

React 상태 관리

• 로컬 상태
  • useState, useReducer : React 기본 내장 훅으로 컴포넌트 내 상태 관리
• 작은 전역 상태
  • useContext : 전역 상태 관리를 위한 React 기본 내장 훅
• 큰 전역 상태
  • Zustand : 간단한 API로 전역 상태를 관리할 수 있는 라이브러리. Redux보다 사용이 간편하여 최근 많은 개발자들이 선호

React 데이터 패칭

• 서버 사이드 데이터 패칭: React Server Components / Functions (지원되는 메타 프레임워크 사용 시)
• 클라이언트 사이드 데이터 패칭: TanStack Query (REST, GraphQL)
• GraphQL 전용: Apollo Client
• 타입 안전한 API 통신: tRPC

React 라우팅

• 서버 사이드 라우팅 : Next.js
• 클라이언트 사이드 라우팅 : React Router (가장 많이 사용됨), TanStack Router (최신 트렌드)
  • React Router : 클라이언트 사이드 라우팅을 위한 가장 널리 사용되는 라이브러리
  • TanStack Router (Beta) : TypeScript 지원이 뛰어난 새로운 라우팅 라이브러리

React의 CSS 스타일링

• 가장 인기 있는 방식
  • Tailwind CSS : Utility-First-CSS 방식으로, 미리 정의된 클래스를 활용해 빠르게 스타일링 가능
• 스타일 모듈화 필요 시
  • CSS Modules : 컴포넌트별로 스타일을 모듈화하여 전역 스타일 충돌 방지 가능
• 최신 CSS-in-JS 솔루션
  • StyleX : Facebook이 개발한 새로운 CSS-in-JS 솔루션. 최적화된 컴파일 방식으로 유틸리티-퍼스트 스타일링 제공

React UI 라이브러리

• Material UI (MUI) : 프리랜서 프로젝트에서 여전히 많이 사용되는 UI 라이브러리. Google의 Material Design 시스템 기
• Mantine UI : 2022년 가장 인기 있었던 UI 라이브러리. 다양한 기능과 커스텀 스타일 지원
• 스타일 포함 UI 라이브러리
  • MUI, Mantine, Chakra UI
• 스타일 미포함 헤드리스 UI 라이브러리
  • shadcn/ui, Radix

 

Reference

• React Tech Stack [2025] : https://www.robinwieruch.de/react-tech-stack/
• 2025년을 위한 필수 React 라이브러리들 : https://news.hada.io/topic?id=19556