원문: https://www.robinwieruch.de/react-libraries/

Press enter or click to view image in full size

리액트가 등장한 지도 꽤 오랜 시간이 흘렀고, 그동안 리액트를 둘러싼 방대한(그래서 때로는 부담스러운) 라이브러리 생태계가 자라났습니다. 다른 언어나 프레임워크에서 넘어온 개발자들은 리액트로 웹 애플리케이션을 만드는 데 필요한 온갖 라이브러리를 헤쳐 나가느라 고생하는 경우가 많습니다.

리액트는 본질적으로 함수 컴포넌트를 사용해 컴포넌트 기반 사용자 인터페이스를 만들 수 있게 해줍니다. 로컬 상태 관리, 사이드 이펙트 처리, 성능 최적화를 위한 리액트 훅 같은 내장 기능을 제공하기는 하지만, 결국 모든 것은 UI를 구성하기 위해 함수(컴포넌트와 훅 모두)를 다루는 일로 귀결됩니다.

이 글에서는 2026년에 꼭 알아야 할 리액트 라이브러리를 살펴보겠습니다. 이 라이브러리들은 리액트로 대규모 애플리케이션을 개발할 때 기초가 되는 구성 요소입니다. 여러분이 초보자든 숙련된 개발자든, 이 가이드는 방대한 리액트 생태계를 손쉽게 헤쳐 나가도록 도와줄 것입니다.

📚 더 읽어보기 2026년 리액트 기술 스택

다음 리액트 애플리케이션에 사용할 수 있는 라이브러리들을 하나씩 살펴보겠습니다.

목차

새 리액트 프로젝트 시작하기
리액트 패키지 매니저
리액트 상태 관리
리액트 데이터 페칭
React Router로 라우팅하기
리액트의 CSS 스타일링
리액트 UI 라이브러리
리액트 애니메이션 라이브러리
리액트의 시각화 및 차트 라이브러리
리액트의 폼 라이브러리
리액트의 코드 구조
리액트 인증
리액트 백엔드
리액트 데이터베이스
리액트 호스팅
리액트 테스트
리액트와 불변 데이터 구조
리액트 국제화
리액트의 리치 텍스트 에디터
리액트의 결제
리액트의 시간 처리
리액트 데스크톱 애플리케이션
리액트의 파일 업로드
리액트의 메일
드래그 앤 드롭
리액트로 모바일 개발하기
리액트 VR/AR
리액트를 위한 디자인 프로토타이핑
리액트 컴포넌트 문서화

새 리액트 프로젝트 시작하기

리액트 초보자가 흔히 던지는 첫 번째 질문은 이것입니다. 리액트 프로젝트는 어떻게 설정하나요? 사용할 수 있는 도구가 워낙 많다 보니 올바른 것을 고르기가 부담스럽습니다. 리액트 커뮤니티에서 가장 인기 있는 선택지는 Vite인데, 다양한 라이브러리(예를 들어 리액트)와 선택적인 타입스크립트 지원을 갖춘 프로젝트를 손쉽게 만들 수 있게 해줍니다.

Vite는 뛰어난 성능도 제공합니다.

📚 더 읽어보기 웹사이트와 웹 애플리케이션에 관해 더 알아보기

이미 리액트에 익숙하다면 Vite 대신 인기 있는 (메타) 프레임워크 중 하나를 고려해 볼 수 있습니다. Next.js는 널리 쓰이는 선택지로 리액트 위에 구축되어 있기 때문에, 리액트의 기본기를 이해하는 것이 필수입니다. 다양한 렌더링 기법, 파일 기반 라우팅, API 라우트 같은 여러 기능을 기본으로 제공합니다.

📚 더 읽어보기 리액트를 라이브러리 또는 프레임워크로 배우는 방법

Next.js는 처음에는 서버 사이드 렌더링(웹 애플리케이션)에 쓰였지만, 다른 렌더링 패턴(예: ISR)과 더불어 정적 사이트 생성(웹사이트)에도 사용할 수 있습니다. Next.js에 가장 최근 추가된 것은 리액트 서버 컴포넌트(RSC)와 리액트 서버 함수(RSF)로, 리액트 컴포넌트를 클라이언트에서 서버로 옮기면서 2023년부터 커다란 패러다임 전환에 기여하고 있습니다.

Next.js의 빠르게 떠오르는 대안은 TanStack Start로, 2026년 3월에 v1.0에 도달했습니다. TanStack Router의 타입 안전한 라우팅에 파일 기반 라우팅, 서버 함수, SSR을 결합했습니다. RSC 지원은 실험적이지만 로드맵에 올라 있습니다. 성숙도와 생태계를 원한다면 여전히 Next.js가 기본 선택지이고, 최고 수준의 타입 안전성과 TanStack의 개발자 경험을 원한다면 주목하고(그리고 선택하고) 싶을 것이 TanStack Start입니다.

또 다른 대안은 React Router v7로, 2024년 말 Remix와 합쳐지면서 이제 라우팅 라이브러리이자 완전한 프레임워크(로더, 액션, 선택적 서버 렌더링, 실험적 RSC)로 함께 제공됩니다.

📚 더 읽어보기 The Road to Next

정적 콘텐츠의 성능이 우선이라면 Astro를 살펴보세요. 프레임워크에 구애받지 않는 도구로서 리액트와 매끄럽게 동작하며, 컴포넌트에 리액트를 사용하더라도 브라우저에는 HTML과 CSS만 전송합니다. 자바스크립트는 컴포넌트에 상호작용이 필요할 때만 로드되어 최적의 성능을 보장합니다.

📚 더 읽어보기 리액트 프로젝트를 시작하는 방법

Vite 같은 도구가 어떻게 동작하는지 이해하고 싶을 뿐이라면, 리액트 프로젝트를 직접 설정해 보세요. 자바스크립트만 있는 기본 HTML 프로젝트에서 출발해 리액트와 그 보조 도구(예: Webpack, Babel)를 직접 추가하게 됩니다. Vite가 Webpack의 후계자가 된 지금은 일상 업무에서 다룰 일이 거의 없지만, 그 밑바탕이 되는 도구를 알아가는 데에는 더없이 좋은 학습 경험입니다.

리액트 베테랑이라 뭔가 새로운 것을 시도해 보고 싶다면 RedwoodSDK(Cloudflare 우선, 서버 우선 리액트에 RSC를 더한 형태로 2025년 말부터 1.0 베타이며, 기존 RedwoodJS는 Redwood GraphQL로 이름이 바뀌었습니다)나 Waku(Zustand를 만든 개발자가 만들었으며 일급 RSC 지원을 갖추고 이제 1.0 알파에 들어섰습니다)를 확인해 보세요.

새 프로젝트라면 한 가지 더 알아둘 만한 것이 있습니다. 리액트 컴파일러는 2025년 10월에 v1.0에 도달했으며 Vite, Next.js, Expo에서 기본으로 지원됩니다. 컴포넌트와 훅을 자동으로 메모이제이션해 주기 때문에, 손으로 작성하던 useMemo와 useCallback 작업의 대부분이 사라집니다.

추천

클라이언트 사이드 렌더링 리액트 애플리케이션에는 Vite
풀스택 리액트 애플리케이션에는 Next.js(주목할 만한 강력한 신예로 TanStack Start)
정적 사이트 생성 리액트 애플리케이션에는 Astro

리액트 패키지 매니저

자바스크립트 생태계(그리고 따라서 리액트)에서 라이브러리(다시 말해 의존성, 노드 패키지)를 설치할 때 가장 널리 쓰이는 패키지 매니저는 npm인데, 모든 Node.js 설치에 함께 딸려 오기 때문입니다. pnpm은 강력한 대안으로, 속도와 디스크 효율 덕분에 많은 신규 프로젝트의 기본값이 되었습니다. Bun은 빠르게 성장하는 세 번째 선택지입니다. 패키지 매니저, 런타임, 번들러, 테스트 러너를 아우르는 올인원 툴체인으로, 단연 가장 빠른 설치 속도를 자랑하며 채택이 빠르게 늘고 있습니다.

📚 더 읽어보기 웹 개발을 위한 나의 2026년 맥 설정

서로 의존하거나 공통의 커스텀 UI 컴포넌트 세트를 공유하는 여러 리액트 애플리케이션을 만들게 된다면, 모노레포라는 개념을 확인해 보는 것이 좋습니다. npm과 pnpm 모두 워크스페이스를 통해 모노레포를 지원하며, 특히 pnpm이 이 분야에서 빛을 발합니다. Turborepo 같은 모노레포 파이프라인 도구와 결합하면 모노레포 경험이 완벽해집니다. 더 크거나 여러 언어가 섞인 구성이라면 Nx가 더 완전한 모노레포 플랫폼으로서 더 넓은 영역을 다룹니다.

📚 더 읽어보기 타입스크립트/자바스크립트로 모노레포 구성하는 방법

추천

하나의 패키지 매니저를 골라 계속 사용하세요
✔ 기본이자 가장 널리 쓰임 -> npm
✔ 성능은 더 좋지만 그만큼 대중적이지는 않음 -> pnpm
모노레포가 필요하다면 Turborepo를 확인해 보세요(튜토리얼 참고)

리액트 상태 관리

리액트는 로컬 상태를 관리하기 위한 두 가지 내장 훅을 제공합니다. useState와 useReducer입니다. 전역 상태 관리를 위해서는 내장 useContext 훅을 통해 props에 의존하지 않고도 최상위 컴포넌트에서 더 깊은 컴포넌트로 데이터를 전달할 수 있어, 프롭 드릴링(prop drilling)을 효과적으로 방지합니다.

📚 더 읽어보기 useState와 useReducer를 언제 써야 하는가

이 세 가지 리액트 훅을 통해 개발자는 강력한 상태 관리를 구현할 수 있습니다. 리액트의 useState/useReducer 훅으로 컴포넌트에 함께 배치하거나, 여기에 리액트의 useContext 훅을 결합해 전역으로 관리하는 방식입니다.

📚 더 읽어보기 useState/useReducer를 useContext와 결합하는 방법

공유/전역 상태에 리액트의 Context를 너무 자주 쓰고 있다면 Zustand를 꼭 확인해 보세요. Zustand는 그 스토어에 연결된 어떤 리액트 컴포넌트에서든 읽고 수정할 수 있는 전역 애플리케이션 상태를 관리하게 해줍니다.

📚 더 읽어보기 리액트에서 상태란 무엇인가

Zustand는 오늘날 리액트 커뮤니티에서 전역 상태의 사실상 표준입니다. 개인적으로 저는 2021년 이후로 어떤 상태 관리 라이브러리에도 손을 댄 적이 없습니다. 서버 상태에는 TanStack Query, 로컬 상태에는 리액트의 내장 훅, 공유 UI 상태에는 URL을 쓰면서, 정작 전용 스토어가 필요한 영역은 크게 줄어들었습니다. Redux로 만들어진 오래된 리액트 애플리케이션을 여전히 많이 마주치게 될 텐데, 전역 스토어가 정말 필요할 때 합리적인 선택은 Zustand입니다.

📚 더 읽어보기 Redux 튜토리얼(Redux Toolkit 없이)

Redux를 쓰게 된다면 Redux Toolkit도 꼭 확인해 보세요. 상태 머신에 관심이 있다면 XState가 가장 자리 잡은 선택지입니다. 대안으로, 전역 스토어가 필요하지만 Zustand나 Redux가 마음에 들지 않는다면 Jotai(아토믹)나 MobX(여전히 유지보수되고 있지만 요즘은 대부분 레거시 코드베이스에서 쓰임) 같은 다른 인기 있는 상태 관리 솔루션을 확인해 보세요.

한 가지 더 알아둘 만한 패턴이 있습니다. URL에 담기는 상태(필터, 탭, 페이지네이션)에는 nuqs가 훅 스타일의 API로 타입이 지정된 검색 파라미터를 제공합니다. 프레임워크에 구애받지 않으며 Sentry, Supabase, Vercel, Clerk에서 사용하고 있습니다.

추천

함께 배치되거나 공유되는 상태에는 useState/useReducer(튜토리얼 참고)
작은 규모의 전역 상태를 활성화하려면 선택적으로 useContext(튜토리얼 참고)
많은 전역 상태에는 Zustand(또는 대안)

리액트 데이터 페칭

리액트의 내장 훅은 UI 상태에는 훌륭하지만, 원격 데이터를 위한 상태 관리(다시 말해 캐싱), 그리고 그에 따른 데이터 페칭이라면 TanStack Query(이전 이름 React Query) 같은 전용 데이터 페칭 라이브러리를 사용하기를 권합니다.

TanStack Query 자체는 상태 관리 라이브러리로 여겨지지 않습니다. 주로 API에서 원격 데이터를 가져오는 데 쓰이기 때문입니다. 하지만 그 원격 데이터에 대한 모든 상태 관리(예: 캐싱, 낙관적 업데이트)를 대신 처리해 줍니다.

📚 더 읽어보기 TanStack Query가 내부적으로 어떻게 동작하는지 배우기

TanStack Query는 REST API 소비를 위해 설계되었습니다. 다만 요즘은 GraphQL도 지원합니다. 그렇지만 리액트 프런트엔드를 위한 좀 더 전용적인 GraphQL 라이브러리를 찾고 있다면 Apollo Client(v4는 더 가볍고 리액트와 분리되었으며 리액트 컴파일러를 인식함), urql(경량), Relay(Meta 내부 규모를 위해 만들어졌으며 그 밖에서는 틈새) 중 하나를 확인해 보세요.

📚 더 읽어보기 로컬 및 원격 데이터를 위한 리액트의 상태에 관한 모든 것

이미 Redux를 쓰고 있고 TanStack Query를 추가하는 대신 Redux에 통합된 상태 관리와 함께 데이터 페칭을 더하고 싶다면, 데이터 페칭을 Redux에 깔끔하게 통합해 주는 RTK Query를 확인해 보는 것이 좋습니다.

프런트엔드와 백엔드를 모두(둘 다 타입스크립트로) 제어한다면, 엔드 투 엔드 타입 안전 API를 위한 tRPC를 확인해 보세요. 생산성과 개발자 경험을 엄청나게 끌어올려 줍니다. TanStack Query와 결합하면 데이터 페칭의 온갖 편의를 누리면서도, 타입이 지정된 함수로 프런트엔드에서 백엔드를 호출할 수 있습니다.

📚 더 읽어보기 E2E 타입 안전성을 갖춘 첫 tRPC 애플리케이션 만들기

마지막으로, 리액트 서버 컴포넌트/서버 함수(RSC/RSF)를 지원하는 (메타) 프레임워크(예: Next.js)를 쓰고 있다면 데이터 페칭에 이를 대신 사용하는 것이 좋습니다. 서버에서 데이터를 가져와 클라이언트로 내려보낼 수 있게 해주므로, 클라이언트 사이드 데이터 페칭 라이브러리가 필요 없어집니다.

추천

서버 사이드 데이터 페칭
✔ 리액트 서버 컴포넌트/함수((메타) 프레임워크가 지원하는 경우)
클라이언트 사이드 데이터 페칭
✔ TanStack Query(REST API 또는 GraphQL API): axios 또는 fetch와 결합✔ Apollo Client(GraphQL API): 좀 더 정교한 GraphQL 경험을 위해
강하게 결합된 클라이언트-서버 아키텍처에는 tRPC

React Router로 라우팅하기

Next.js 같은 리액트 프레임워크를 쓰고 있다면 라우팅은 이미 알아서 처리됩니다. Next.js 바깥에서 가장 인기 있는 라우팅 라이브러리는 React Router입니다. React Router는 이제 두 가지 모드를 갖추고 있습니다. 클라이언트 사이드 라우팅을 위한 고전적인 라이브러리 모드(예: Vite SPA 내부)와, 로더·액션·서버 렌더링·실험적 RSC 지원을 갖춘 완전한 프레임워크 모드(과거의 Remix)입니다.

📚 더 읽어보기 React Router 사용법 배우기

강력한 대안은 TanStack Router로, 이제 안정 버전이 되었으며 리액트 프로젝트에서 타입스크립트를 쓰고 있다면 특히 매력적입니다. TanStack 제품군의 나머지와 마찬가지로 API 사용성과 타입 추론이 일급입니다.

React Router와 (TanStack Start를 갖춘) TanStack Router 모두 리액트 서버 컴포넌트(RSC) 지원을 작업 중입니다. 이는 여러 용도(예: 더 작은 번들 크기, 서버 사이드 데이터 페칭)를 위해 컴포넌트를 서버에서 실행할 수 있게 된다는 뜻입니다.

리액트를 이제 막 배우는 중이라 프로젝트에 라우터를 도입하기 전이라면, 먼저 리액트의 조건부 렌더링을 시도해 볼 수 있습니다. 라우팅을 대체하지는 못하지만, 페이지 수준에서 컴포넌트를 교체하는 일이 어떻게 동작하는지 살짝 엿보게 해줍니다.

추천

서버 사이드 라우팅에는 Next.js, React Router(프레임워크 모드), 또는 TanStack Start
클라이언트 사이드 라우팅
✔ 가장 많이 쓰이는 것은 React Router
✔ 떠오르는 중인 것은 TanStack Router

리액트의 CSS 스타일링

리액트의 스타일링/CSS에 대해서는 선택지도 많고 그보다 더 많은 의견이 존재해서, 모든 것을 여기 한 섹션에 담기는 어렵습니다. 이 주제를 더 깊이 파고들어 모든 선택지를 알고 싶다면 다음 가이드를 확인해 보세요.

📚 더 읽어보기 리액트 CSS 스타일링(종합 튜토리얼)

리액트 초보자라면 JSX에서 스타일 객체를 사용해 인라인 스타일과 기본적인 CSS로 시작해도 괜찮습니다. 다만 실제 애플리케이션에서는 거의 쓰지 않는 것이 좋습니다.

const Headline = ({ title }) => <h1 style={{ color: "blue" }}>{title}</h1>;

인라인 스타일이 리액트 JSX에서 자바스크립트로 동적으로 스타일을 추가하는 데 쓰일 수 있는 반면, 외부 CSS 파일은 리액트 애플리케이션의 나머지 스타일을 모두 담을 수 있습니다.

import "./Headline.css";const Headline = ({ title }) => (
  <h1 className="headline" style={{ color: "blue" }}>
    {title}
  </h1>
);

애플리케이션의 규모가 커지면 확인해 볼 만한 다른 스타일링 접근법들이 있습니다. 넘어가기 전에 마지막 힌트 하나만 드리자면, 리액트에서 className을 조건부로 적용하고 싶다면 clsx 같은 유틸리티 라이브러리를 사용하세요.

먼저 가장 인기 있는 유틸리티 우선 CSS(Utility-First-CSS) 솔루션으로 Tailwind CSS를 추천하고 싶습니다. 미리 정의된 CSS 클래스를 제공합니다. 덕분에 개발자로서 더 효율적으로 일할 수 있고 리액트 애플리케이션의 디자인 시스템이 한결 정돈되지만, 모든 클래스를 익혀야 하고 많은 CSS 클래스를 장황하게 인라인으로 나열해야 한다는 단점이 따릅니다.

const Headline = ({ title }) => <h1 className="text-blue-700">{title}</h1>;

Tailwind v4(2025년 1월 출시)가 현재의 메이저 버전입니다. 설정이 tailwind.config.js에서 @theme를 통한 CSS로 옮겨졌고, 새로운 Oxide 엔진은 극적으로 빨라졌으며, 콘텐츠 소스는 자동으로 감지됩니다. 새 프로젝트를 시작한다면 v4로 시작하게 됩니다.

둘째로, 여러 CSS-in-CSS 솔루션 중 하나인 CSS 모듈을 살펴보기를 권합니다. CSS 모듈은 CSS를 컴포넌트에 함께 배치되는 모듈로 캡슐화하는 방법을 제공합니다. 이렇게 하면 스타일이 실수로 다른 컴포넌트로 새어 나가지 않습니다.

import styles from "./style.module.css";

const Headline = ({ title }) => <h1 className={styles.headline}>{title}</h1>;

셋째로, styled-components와 Emotion 같은 라이브러리가 제공하는 CSS-in-JS 접근법을 언급하고 싶습니다. 이들은 스타일링을 리액트 컴포넌트 바로 옆에 함께 배치합니다.

import styled from "styled-components";const BlueHeadline = styled.h1`
  color: blue;
`;
const Headline = ({ title }) => <BlueHeadline>{title}</BlueHeadline>;

새 프로젝트에는 둘 다 권하지 않습니다. styled-components는 2025년 3월부터 공식적으로 유지보수 모드에 들어갔고, 그 메인테이너도 새로 채택하지 말 것을 권합니다. Emotion은 여전히 유지보수되고 있지만, 대체로 MUI v5+가 이에 의존하기 때문에 명맥을 유지하고 있습니다. 둘 다 리액트 Context를 통해 런타임에 동작하는데, 이는 리액트 서버 컴포넌트와 충돌하며, 바로 그 때문에 현대적인 대안들이 빌드 타임 컴파일로 옮겨 간 것입니다.

📚 더 읽어보기 Styled Components 모범 사례

흐름은 Tailwind CSS를 업계 표준으로 삼는 유틸리티 우선 CSS 쪽으로 확고하게 이동했습니다. 런타임 비용 없이 CSS-in-JS의 작성 경험을 원하는 팀이라면, 현대적인 선택지는 PandaCSS(런타임이 없으며 Chakra/Zag 제작자가 만들었고 Chakra UI v3가 이 위에 구축됨)와 vanilla-extract(타입스크립트 우선, 타입 안전한 .css.ts 파일)입니다. StyleX는 Meta의 아토믹 CSS-in-JS 방식이고, UnoCSS는 Tailwind보다 더 유연한 유틸리티 우선 대안입니다.

또한 리액트 19의 네이티브 <style> 우선순위와 중복 제거가 CSS-in-JS가 과거에 해결해 주던 고충 일부를 덜어준다는 점도 알아둘 만합니다. 이로 인해 순수 CSS 모듈이나 Tailwind가 그 어느 때보다 매력적으로 다가옵니다.

추천

유틸리티 우선 CSS(가장 인기)
✔ 예를 들어 Tailwind CSS
CSS-in-CSS
✔ 예를 들어 CSS 모듈
빌드 타임 CSS-in-JS(런타임 비용 없이 JS로 구동되는 스타일을 원한다면)
✔예를 들어 PandaCSS 또는 vanilla-extract

리액트 UI 라이브러리

초보자에게는 재사용 가능한 컴포넌트를 처음부터 직접 만들어 보는 것이 훌륭하고 권장할 만한 학습 경험입니다. 드롭다운, 셀렉트, 라디오 버튼, 체크박스 무엇이든, 결국에는 이런 UI 컴포넌트를 직접 만드는 법을 알아야 합니다.

하지만 모든 컴포넌트를 직접 만들어 낼 여력이 없다면, 동일한 디자인 시스템과 기능, 접근성 규칙을 공유하는 미리 만들어진 수많은 컴포넌트를 제공하는 UI 라이브러리를 사용하고 싶을 것입니다.

Material UI (MUI)(프리랜스 프로젝트에서 여전히 흔함)
Mantine(v8, 2026년 가장 강력한 올라운더 중 하나)
Chakra UI(v3, PandaCSS 위에 다시 작성됨)
Hero UI(이전 Next UI)
Park UI(Ark UI 기반)
PrimeReact
Ant Design(엔터프라이즈/데이터 중심 B2B에서 여전히 기본)

하지만 흐름은 헤드리스 UI 라이브러리 쪽으로 이동하고 있습니다. 이들은 스타일링 없이 제공되지만, 현대적인 컴포넌트 라이브러리에 필요한 모든 기능과 접근성을 갖추고 있습니다. 대부분은 Tailwind 같은 유틸리티 우선 CSS 솔루션과 결합해 사용합니다.

shadcn/ui(2023년부터 사실상 표준이며, 2026년에는 Radix나 Base UI 프리미티브 어느 쪽을 기반으로든 블록을 설치할 수 있음)
Radix(shadcn/ui의 원조 기반)
Base UI(2026년 v1.0, Radix/Floating UI/MUI 제작자들이 만들었으며 이제 Radix와 더불어 일급 shadcn 타깃)
React Aria
Ark UI(Chakra UI 제작진이 만들었으며 Zag 상태 머신 기반)
Ariakit
Daisy UI(v5, Tailwind v4 호환, 조용히 가장 많이 다운로드되는 UI 라이브러리 중 하나가 됨)
Headless UI
Tailwind UI(무료 아님)

Bootstrap 팬이라면 그것이 필요한 디자인 언어일 때 여전히 React Bootstrap이 있습니다.

리액트 애니메이션 라이브러리

웹 애플리케이션의 모든 애니메이션은 CSS에서 시작합니다. 하지만 곧 CSS 애니메이션만으로는 요구 사항을 온전히 충족하지 못할 수도 있다는 것을 알게 됩니다. 리액트에서 인기 있는 애니메이션 라이브러리로는 다음과 같은 것들이 있습니다.

Motion(사실상 표준, 이전 이름 Framer Motion, v12로 리액트 19를 완전히 지원)
react-spring(물리 기반 애니메이션을 위한 틈새 선택지)
GSAP(Webflow 인수 이후 MIT 라이선스가 됨, 복잡한 타임라인 기반 애니메이션에 적합)

리액트의 시각화 및 차트 라이브러리

차트를 정말로 밑바닥부터 직접 만들고 싶다면 D3를 피해 갈 수 없습니다. 멋진 차트를 만드는 데 필요한 모든 것을 제공하는 저수준 시각화 라이브러리입니다. 다만 D3를 배우는 것은 또 다른 모험이기에, 많은 개발자는 유연성을 내주는 대신 모든 것을 처리해 주는 리액트 차트 라이브러리를 그냥 선택합니다. 인기 있는 솔루션은 다음과 같습니다.

Recharts(개인적인 추천, shadcn/ui 차트가 이 위에 구축됨)
✔ 바로 쓸 수 있는 차트
✔ 뛰어난 조합성
✔ 선택적 조합성 덕분에 커스터마이징도 선택 사항
Tremor(shadcn/ui 미감에 맞게 디자인된 미리 스타일링된 차트 컴포넌트, SaaS 대시보드에서 인기)
visx
✔ 고수준 추상화보다 저수준 D3에 더 가까움
✔ 더 가파른 학습 곡선
더 바로 쓸 수 있는 차트, 커스터마이징은 더 어려움
✔ nivo
✔ react-chartjs
✔ Victory(개발 속도가 느려짐, 가장 활발한 작업이 이뤄지는 곳은 Victory Native XL)

리액트의 폼(Form) 라이브러리

리액트에서 폼을 다룰 때 단연 가장 인기 있는 라이브러리는 React Hook Form입니다. 검증(zod이 가장 인기), 폼 제출, 폼 상태 관리 등 필요한 모든 것을 갖추고 있습니다. 리액트에서 폼을 처음 다루기에 좋은 라이브러리입니다.

알아둘 만한 두 가지 대안이 있습니다.

TanStack Form은 안정 버전이며 빠르게 입지를 넓혀 가고 있습니다. 특히 타입 안전한 복잡한 폼을 원하거나 이미 TanStack 생태계의 나머지에 발을 들였다면 더욱 그렇습니다.
Conform은 Next.js App Router나 React Router 프레임워크 모드에서 점진적으로 향상되는 서버 액션 폼에 가장 잘 맞습니다.

📚 더 읽어보기 리액트에서 폼을 검증하는 방법

기존 코드베이스에서는 여전히 Formik이나 React Final Form을 마주칠 수 있지만, 둘 다 현시점에서는 사실상 유지보수되지 않으며 새 프로젝트에는 권하지 않습니다.

추천

React Hook Form
검증을 위한 zod 통합과 함께

리액트의 코드 구조

통일되고 상식적인 코드 스타일을 받아들이고 싶다면 리액트 프로젝트에 ESLint를 사용하세요. ESLint 같은 린터는 특정 코드 스타일을 강제합니다. 예를 들어 ESLint로 인기 있는 스타일 가이드를 따르도록 요구할 수 있습니다. ESLint를 IDE/에디터에 통합하면 모든 실수를 짚어 줍니다. 플랫 설정을 쓰는 ESLint v9가 현재 기본값이며, typescript-eslint 생태계도 그 수준을 따라잡았습니다.

📚 더 읽어보기 5단계로 보는 리액트 폴더 구조

통일된 코드 포맷을 받아들이고 싶다면 리액트 프로젝트에 Prettier를 사용하세요. 한 줌의 선택적 설정만 가진, 의견이 확고한 코드 포매터입니다. 에디터나 IDE에 통합하면 파일을 저장할 때마다 코드를 포맷해 줍니다. 다만 Prettier가 ESLint를 대체하지는 않으며, 둘은 잘 통합됩니다.

📚 더 읽어보기 기능 기반 리액트 아키텍처

2026년의 흥미로운 이야기는 Rust와 Go로 만들어진 대체재들입니다. oxlint는 기존 ESLint 플러그인 생태계를 재사용하는 훨씬 빠른 ESLint 대체재이고(플러그인 API는 알파이지만 이미 기존 플러그인의 약 99.5%를 실행함), 그 짝꿍 포매터인 oxfmt는 Prettier보다 약 30배 빠른 Prettier 호환 대체재입니다. 타입을 인식하는 oxlint 규칙은 tsgolint로 구동되는데, 이는 Microsoft의 tsgo(tsc를 7~10배 빠르게 대체하는 드롭인으로 2026년 4월부터 베타인 TypeScript 7.0) 위에 만들어졌습니다. 2026년 새 프로젝트에 대한 제 추천은 oxlint + oxfmt입니다. 다만 oxfmt가 베타이고 타입 인식 oxlint가 알파라는 점은 솔직히 짚어 둡니다. 프로덕션에서 쓸 수 있는 수준이지만, 무엇을 선택하는 것인지는 알고 있어야 합니다.

오늘 당장 안정적인 단일 바이너리 툴체인을 원한다면, Biome v2가 린팅과 포매팅을 한 도구에서 다루며, 타입 인식 규칙과 안정적인 플러그인 API를 갖추고 있습니다.

추천

새 프로젝트(미래 지향)라면 oxlint + oxfmt, 빠른 타입 검사를 위해 tsgo가 안정 버전으로 출시되면 함께
오늘 당장 안정적인 단일 바이너리 도구를 원한다면 Biome v2
성숙하고 플러그인이 풍부하며 보수적인 선택은 ESLint + Prettier

리액트 인증

리액트 애플리케이션에서는 회원가입, 로그인, 로그아웃 같은 기능을 갖춘 인증을 도입하고 싶을 수 있습니다. 비밀번호 재설정이나 비밀번호 변경 같은 다른 기능도 흔히 필요합니다. 이런 기능들은 리액트의 범위를 한참 넘어서는데, 백엔드 애플리케이션이 이런 일들을 대신 관리하기 때문입니다.

📚 더 읽어보기 React Router로 인증을 준비하는 방법

가장 좋은 학습 경험은 인증을 갖춘 풀스택 애플리케이션(예: The Road to Next)을 직접 구현해 보는 것입니다. 인증에는 보안 위험과 모두가 알지는 못하는 세세한 디테일이 잔뜩 따라오기 때문에, 프로덕션에서는 인증에 서드파티 서비스를 쓰기를 권합니다.

Better Auth(2026년 자체 호스팅 인증을 위한 사실상의 오픈소스 선택지, Arctic은 이와 잘 어울리는 독립형 OAuth 헬퍼)
Auth.js(v5, 이전 이름 NextAuth, 메인테이너들이 이제 새 프로젝트는 Better Auth로 안내함)
Clerk(유료) 또는 Kinde(유료, 기능 플래그와 결제도 함께 묶어 제공)
AuthKit by WorkOS(호스팅 로그인에 더해, 나중에 B2B 기능이 필요할 때를 위한 엔터프라이즈 SSO/SCIM)
Stack Auth(오픈소스 Clerk 대안, 자체 호스팅 가능)
Supabase Auth, Convex Auth, 또는 Firebase Auth(이미 이런 백엔드를 쓰고 있다면 대개 가장 간단한 길)
Auth0 또는 AWS Cognito(엔터프라이즈/AWS 환경)

리액트 백엔드

리액트를 서버로 옮기려는 흐름이 강하기 때문에, 리액트 프로젝트의 가장 자연스러운 서식지는 Next.js(주로 동적 웹 애플리케이션)나 Astro(주로 정적 웹사이트) 같은 (메타) 프레임워크일 것입니다. React Router v7(Remix와 React Router가 합쳐진 계열)과 TanStack Start(2026년 3월부터 v1.0)도 똑같이 정당한 풀스택 선택지입니다.

풀스택 프레임워크를 쓸 수는 없지만 그래도 JS/TS 안에 머물고 싶다면, Hono가 2026년 엣지 런타임 우선의 선두 주자이고, tRPC(v11)는 그 어느 것 위에서든 엔드 투 엔드 타입 안전성을 제공합니다. Express는 여전히 옛날부터 일해 온 일꾼으로, 2024년 말 현대적인 async/await 미들웨어를 갖춘 v5를 출시했습니다. 다른 대안으로는 Fastify, NestJS, Elysia(Bun 우선)가 있습니다.

Koa와 Hapi에게도 명예로운 언급을 보냅니다. 둘 다 오래된 코드베이스에서 여전히 가끔 보입니다.

리액트 데이터베이스

리액트에 묶인 것은 아니지만, 요즘 풀스택 리액트 애플리케이션이 인기를 끌면서 리액트는 그 어느 때보다 데이터베이스 계층에 가까워졌습니다. Next.js 애플리케이션을 개발하다 보면 십중팔구 데이터베이스 ORM을 다루게 됩니다. 두 경쟁자는 Drizzle ORM(2025년 말 주간 다운로드에서 Prisma를 앞질렀으며, 서버리스/엣지를 위한 기본 선택지)과 Prisma(여전히 가장 성숙한 생태계이며, 필요한 것이 다 갖춰진 것을 원하는 팀에게 안전한 선택지)입니다.

더 가벼운 대안은 Kysely로, 완전한 ORM이라기보다는 쿼리 빌더입니다.

📚 더 읽어보기 웹 개발 트렌드

데이터베이스를 고를 때, Supabase(Postgres)와 Firebase는 여전히 인기 있는 올인원 백엔드입니다. Convex는 일급 리액트 훅을 갖춘 강력한 반응형 대안으로 떠올랐으며, 데이터베이스와 백엔드를 한 패키지로 원한다면 좋습니다.

인기 있는 서버리스 데이터베이스 대안으로는 Neon(2025년 Databricks에 인수되었으나 여전히 운영 중), Turso(엣지의 libSQL, Cloudflare Workers에서 Hono + Drizzle과 짝을 이루는 2026년 기본 스택), Xata(2025년 AI/에이전트 워크로드를 위한 오픈소스 Postgres로 방향을 틀었음)가 있습니다. PlanetScale은 여전히 존재하지만 2024년 취미용 등급을 종료한 뒤 엔터프라이즈 전용이 되었습니다.

리액트 호스팅

리액트 애플리케이션을 배포하고 호스팅하는 것은 다른 웹 앱을 배포하는 것과 비슷합니다. 환경을 완전히 제어하고 싶다면 Digital Ocean이나 Hetzner 같은 서비스를 고려해 보세요. 이런 선택지는 인프라를 직접 관리할 수 있게 해줍니다.

호스팅 플랫폼이 모든 것을 알아서 관리해 주는, 손을 덜 대는 방식을 선호한다면 Vercel이 Next.js 프로젝트에 가장 매끄러운 경험을 제공합니다. 다만 트레이드오프를 알아 두세요. 무료 등급은 상업적 사용을 허용하지 않고, 대역폭과 함수 호출 초과분이 규모가 커지면 쌓일 수 있습니다. Netlify는 더 친화적인 좌석당 가격 정책을 갖춘 가장 가까운 직접 경쟁자입니다.

자체 호스팅의 절충안으로는 Coolify가 이 분야에서 선두 오픈소스 PaaS로 성숙했으며, 그렇지 않으면 손으로 엮어야 할 대부분의 스택을 원클릭 서비스로 제공합니다.

Cloudflare는 Workers, Pages, R2, D1을 통한 풀스택 리액트의 일급 목적지가 점점 되어 가고 있으며, 따라잡기 어려운 공격적인 무료 등급 대역폭을 제공합니다.

이미 Firebase/Supabase 같은 서드파티 백엔드 서비스를 쓰고 있다면, 그들이 호스팅도 제공하는지 확인해 볼 수 있습니다. 다른 인기 있는 호스팅 제공자로는 Render, Fly.io, Railway가 있고, 아니면 AWS/Azure/Google Cloud에 직접 호스팅할 수도 있습니다.

리액트 테스트

리액트 애플리케이션 테스트의 근간은 Vitest(추천, v3는 Playwright/WebdriverIO로 뒷받침되는 성숙한 브라우저 모드를 제공)나 Jest(v30, 레거시 CommonJS와 Vitest 지원이 제한적인 리액트 네이티브에서 여전히 유효) 같은 테스트 프레임워크입니다. 어느 쪽이든 테스트 러너, 어서션 라이브러리, 그리고 스파이·목·스텁 기능을 제공합니다. 종합적인 테스트 프레임워크에 필요한 모든 것입니다.

결국에는 인기 있는 React Testing Library(RTL)를 쓰게 됩니다. 이는 테스트 프레임워크의 환경 안에서 쓰이는 리액트용 종합 테스트 라이브러리입니다. RTL은 컴포넌트를 렌더링하고 HTML 요소에 이벤트를 시뮬레이션할 수 있게 해줍니다. 그다음에는 어서션을 위해 테스트 프레임워크를 사용합니다.

리액트 엔드 투 엔드(E2E) 테스트에서는 Playwright가 2026년 분명한 기본값으로, 새로운 채택의 대부분을 차지합니다. Cypress는 팀이 이미 발을 들였거나 그 컴포넌트 테스트 개발자 경험을 원한다면 여전히 괜찮은 선택지입니다. 두 도구 모두 브라우저 안에서 사용자 상호작용을 자동화하고 시뮬레이션할 수 있게 해주어, 리액트 애플리케이션이 사용자 관점에서 기대대로 동작하는지 보장합니다.

추천

단위/통합 테스트에는 Vitest + React Testing Library(가장 인기)
E2E 테스트에는 Playwright(또는 Cypress)
선택적으로 Vitest로 스냅샷 테스트

리액트와 불변 데이터 구조

순수 자바스크립트는 데이터 구조를 마치 불변인 것처럼 다룰 수 있는 내장 도구를 충분히 제공합니다. 하지만 여러분과 팀이 불변 데이터 구조를 강제할 필요를 느낀다면, 가장 인기 있는 선택지는 Immer입니다. Mutative는 동일한 draft API를 가진 드롭인 대안으로, 성능이 중요하다면 런타임이 훨씬 빠릅니다. 리액트 컴파일러가 자동 메모이제이션을 해주면서 컴포넌트 코드에서 손수 불변성을 다룰 이유가 좁아졌다는 점을 알아 두세요. 이제 Immer는 Redux Toolkit과 리듀서 패턴 내부에서 가장 유용합니다.

리액트 국제화

리액트 애플리케이션의 국제화(i18n)를 다룰 때는 번역뿐 아니라 복수형 처리, 날짜와 통화의 형식 지정, 그 밖의 여러 가지를 함께 고려해야 합니다. 이를 다루기 위한 가장 인기 있는 라이브러리는 다음과 같습니다.

react-i18next(가장 큰 생태계를 갖춘 안전한 기본 선택지)
next-intl(Next.js를 위한 표준 선택지)
Paraglide JS(컴파일 타임, 타입 안전한 m.key() 함수, 트리 셰이킹이 가능해 런타임 라이브러리보다 번들이 극적으로 작은 경우가 많음)
Lingui(컴파일 타임 메시지, PO 파일을 다루는 팀에서 사랑받음)
FormatJS(여전히 유지보수되지만 현시점에서는 대체로 레거시 선택지)

리액트의 리치 텍스트 에디터

리액트의 리치 텍스트 에디터라면, 2026년에 제가 고려할 선택지는 다음과 같습니다.

Tiptap(기본 선택지, v3는 SSR/JSX를 제공하며 핵심 확장은 MIT 라이선스이고 AI/협업을 위한 선택적 Tiptap Cloud 제공)
BlockNote(Tiptap 위에 만들어진 Notion 스타일 블록 에디터로 Yjs 협업이 내장됨, 바로 쓸 수 있는 “Notion 같은” UX를 원할 때 제격)
Plate(v49+, shadcn/ui에 친화적인 선택지)
Lexical(Meta 후원, Facebook·Instagram·WhatsApp Web을 구동)
Slate(Plate가 그 위에 만들어진 저수준 엔진)

리액트의 결제

리액트 애플리케이션에 결제 솔루션을 통합할 때 가장 흔히 쓰이는 제공자는 Stripe와 PayPal입니다. 둘 다 리액트와 매끄러운 통합 옵션을 제공합니다.

Merchant of Record(MoR, 제공자가 판매세, 부가세, 규정 준수를 대신 처리)를 원한다면, 2026년에 알아둘 만한 선택지는 다음과 같습니다.

Paddle(SaaS를 위한 자리 잡은 MoR)
Polar.sh(오픈소스, 인디 및 개발자 도구 창업자들 사이에서 빠르게 성장 중)
Lemon Squeezy(2024년 Stripe에 인수됨, 여전히 독립적으로 운영되지만 Stripe 자체의 Managed Payments가 이제 겹침)
Braintree(PayPal 소유)

리액트의 시간 처리

리액트 애플리케이션이 날짜, 시간, 시간대를 자주 다룬다면, 이런 측면을 효율적으로 관리하기 위해 전용 라이브러리를 사용하는 것을 고려해 보세요. 다음과 같은 선택지가 있습니다.

date-fns(v4에서 네이티브 시간대 지원 추가)
Day.js

새 코드에 대한 큰 소식은 Temporal API인데, 2026년 3월 TC39 Stage 4에 도달했으며 이제 ES2026의 일부입니다. 최신 Chrome, Firefox, Edge에서 네이티브로 제공됩니다(Safari는 여전히 따라잡는 중). Temporal은 런타임 타깃이 허용하는 한 date-fns와 Day.js를 대체하는 표준 기반 대체재입니다. 그때까지는 date-fns와 Day.js가 여전히 실용적인 다리 역할을 합니다.

리액트 데스크톱 애플리케이션

Tauri는 2026년 새 크로스 플랫폼 데스크톱 앱에 대한 기본 추천입니다. Tauri 2.0은 일급 iOS 및 Android 지원을 제공하며, 결과 바이너리는 Electron보다 대략 한 자릿수만큼 작고 메모리 사용량도 훨씬 낮습니다. Electron은 성숙한 생태계와 예측 가능한 Chromium 동작이 필요할 때(모든 VS Code, Slack, Discord 같은 앱) 여전히 안전한 선택지입니다.

리액트의 파일 업로드

type="file"을 가진 입력 필드
react-dropzone(여전히 표준 헤드리스 드롭존, 유지보수가 다소 가벼운 편이었지만 마땅한 대체재가 나타나지 않았음)

리액트의 메일

HTML만으로 이메일을 렌더링하는 것은 고역입니다. 다행히 리액트 컴포넌트로 반응형 HTML 이메일을 만드는 데 도움을 주는 라이브러리들이 있습니다.

react-email(추천, Resend 팀이 만든 사실상의 표준)
jsx-email(Tailwind 우선의 플러그인 아키텍처, react-email의 주요 대안)

이메일 서비스 제공자를 찾고 있다면, 2026년 제 최고의 선택지는 Resend입니다. 개발자 경험과 react-email과의 긴밀한 통합 덕분입니다. Postmark는 오랜 기간 트랜잭션 분야의 전문가이고, Plunk는 자체 호스팅이 가능한 오픈소스 선택지이며, 더 오래된 중량급인 Twilio SendGrid와 Mailgun도 엔터프라이즈 규모에는 여전히 유효합니다.

드래그 앤 드롭

개인적으로 저는 react-beautiful-dnd의 후계자를 써봤고 부정적인 말은 할 수 없습니다. 여전히 활발하게 유지보수되고 있으며 리스트 재정렬에 훌륭합니다. 훨씬 더 많은 유연성과 옵션을 제공하지만 더 가파른 학습 곡선이라는 비용이 따르는 인기 있는 대안은 dnd kit입니다. 20232024년의 조용한 시기를 지나, dnd kit은 20252026년 내내 다시 출시를 이어가며 핵심 패키지를 새로 설계했고, 그래서 “죽은 것 아니냐”는 우려는 해소되었습니다. 프레임워크에 구애받지 않는 성능 작업이라면 Atlassian의 Pragmatic drag-and-drop도 살펴볼 만합니다.

리액트로 모바일 개발하기

리액트를 웹에서 모바일로 가져오는 대표적인 솔루션은 React Native인데, 2026년에는 대부분의 팀이 그냥 “Expo”라고 말합니다. Expo가 사실상 기본 리액트 네이티브 프레임워크가 되었기 때문입니다. 리액트 네이티브의 New Architecture는 이제 기본으로 켜져 있으며 앞으로 나아갈 길입니다. 웹과 모바일에 걸쳐 통일된 컴포넌트가 필요하다면 Tamagui가 선두 유니버설 스타일 시스템입니다. Solito는 진정으로 어디서나 실행되는 단일 코드베이스를 원한다면 React Navigation과 Next.js를 이어 줍니다.

📚 더 읽어보기 리액트 네이티브에서 내비게이션 배우기

리액트 VR/AR

리액트로 가상 현실이나 증강 현실에 뛰어드는 것도 가능합니다. 솔직히 저는 이 라이브러리들을 써본 적은 없지만, 2026년에 리액트에서 AR/VR을 다룬다면 손을 뻗을 것들은 다음과 같습니다.

react-three-fiber(Poimandres, Three.js를 위한 리액트 렌더러)
@react-three/drei(react-three-fiber와 짝을 이루는 필수 헬퍼)
@react-three/xr(역시 Poimandres, 히트 테스트·앵커·메시/평면 감지·Quest 에뮬레이터를 갖춘 2026년 리액트 VR/AR의 실질적인 답)

리액트를 위한 디자인 프로토타이핑

2026년 리액트 개발자에게는, AI UI 생성기가 손으로 그리는 스케치를 대신해 아이디어에서 동작하는 컴포넌트로 가는 가장 빠른 길이 되었습니다. v0 by Vercel이 기본 선택지입니다. Tailwind와 shadcn/ui로 프로덕션 품질의 리액트를 생성하며, 이제 완전한 에디터, Git 통합, 데이터베이스 연결까지 제공합니다. Lovable은 풀스택 MVP(리액트 + Supabase)를 처음부터 끝까지 출시하기 위한 대안이고, Bolt.new는 프레임워크 유연성과 브라우저 내 실행을 원한다면 살펴볼 만합니다. 채팅에서 일회성 컴포넌트를 만드는 데에는 Claude Artifacts를 능가하기 어렵습니다.

디자이너와 함께 일할 때는 Figma가 여전히 핸드오프의 표준입니다. Figma Make(프롬프트에서 리액트로)와 Code Connect(Figma 컴포넌트를 실제 코드베이스에 연결)는 Anima, Locofy, Builder.io가 메우던 디자인-투-코드 간극의 대부분을 좁혔습니다.

리액트 컴포넌트 문서화

컴포넌트 문서 작성을 맡았다면, 활용할 만한 깔끔한 리액트 문서화 도구가 여럿 있습니다. 저는 많은 프로젝트에서 Storybook을 써봤고 중립적인 의견을 가지고 있습니다. Storybook 9는 Vitest 기반 테스트를 내장하고 있으며 이전 버전보다 설치 용량이 훨씬 작습니다. 알아둘 만한 더 가벼운 리액트 전용 대안은 Ladle로, 콜드 스타트가 훨씬 빠릅니다. React Cosmos는 이미 쓰고 있는 팀들을 위해 여전히 존재하며, Docusaurus는 좀 더 일반적인 문서 사이트의 경우를 다룹니다.

궁극적으로 리액트 생태계는 리액트를 중심에 둔 유연한 프레임워크처럼 기능합니다. 어떤 라이브러리를 도입할지에 대해 충분한 정보에 근거한 선택을 할 수 있게 해주어, 작게 시작하고 특정한 과제를 해결하기 위해 필요에 따라 라이브러리를 더해 갈 수 있습니다. 반대로 리액트만으로 요구 사항이 충족된다면, 핵심 라이브러리만 사용해 가벼운 구성을 유지할 수도 있습니다.

(번역) 2026년 리액트 라이브러리

댓글