Skip to content

React

React JS는 페이스북과 인스타그램의 웹 UI를 개발할 때 사용하려고 만든 자바스크립트 라이브러리이다. 또한 Backbone.js와 Angular.js와 같이 이를 이용해 웹의 Front를 자유자재로 다룰 수 있으므로 나는 웹 프론트 프레임워크(Web Front Framework)라고도 생각한다.

React JS의 가장 큰 특징이자 사용하는 이유로는 지속해서 데이터가 변화하는 대규모 에플리케이션을 구축할 수 있다이다. React에서 Component를 사용하여 웹 UI를 구축하며 데이터가 변하는 Component만을 다시 rendering해서 변화된 데이터를 표시한다.

Categories

Hooks

Examples

Libraries

i18n

케로셀(Carousel)은 슬라이드 이미지 이다.

  • React-Slick - 문서도 깔끔하고 전형적인 슬라이드 느낌을 줄 수 있습니다. 문서가 워낙 정리가 잘 돼있다보니, 여러 예시들을 볼 수 있는 장점이 있네요
  • React-Material-Ui-Carousel - material-ui 와 연계성이 좋고 슬라이드가 넘어가는 애니메이션 설정이나, 화살표 설정 등 디테일한 설정을 변경할 수 있는 장점이 있습니다.
  • React Responsive Carousel - 반응형 슬라이드를 제공합니다. 이 라이브러리는 이미지 캐로셀만 지원하는 것 같더라구요! 이건 사용은 못해보았는데 npm 에서 다운로드 수가 압도적이길래 넣어봤습니다.

Window

  • react-window
  • react-virtualized-auto-sizer - HOC that grows to fit all of the available space and passes the width and height values to its child.
  • react-window-infinite-loader - Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite loading lists (e.g. Facebook or Twitter).
  • react-vtree - Lightweight and flexible solution to render large tree structures (e.g., file system).

Eject

Animation

Frameworks

UI Frameworks

Performance - Block DOM

Database

  • GoatDB - Deno, React를 위한 경량 NoDB

ETC

ESLint

Recommand Libraries

2022년

2022년 현재 React로 앱 개발할 때 추천 라이브러리들

  • React 프로젝트 생성 : 클라이언트에는 Vite/CRA, 서버에는 Next.js/Remix/Gatsby
  • React State 관리 : useState/useReducer, useContext, Redux
  • React Data Fetching : React Query (REST APIs, GraphQL APIs) + axios, Apollo Client
  • Routing with React Router
  • CSS Styling in React : CSS-in-CSS, CSS-in-JS/Emotion/Stitches, Functional CSS with Tailwind CSS
  • React UI Libraries : Material UI(가장 인기), Mantine(추천), Chakua UI(추천), Ant Design, Radix, Primer, NextUI, Tailwind UI (not free), Semantic UI, React Bootstrap
  • React Animation Libraries : Framer Motion (가장 추천), react-spring (종종 추천), react-motion, react-move, Animated (React Native)
  • Visualization and Chart Libraries in React : Recharts, react-chartjs, nivo, visx, Victory
  • Form Libraries in React : React Hook Form + yup/zod
  • React Type Checking : 그냥 TypeScript 쓰세요
  • React Code Structure: Style and Format : ESLint + Prettier
  • React Authentication : Firebase, Auth0, AWS Cognito 같은 서비스/BaaS 선택
  • React Hosting : 풀 관리하려면 Digital Ocean, 아니면 Cloudflare Workers, Netlify, or Vercel (특히 Next.js), Firebase 쓴다면 Firebase Hosting
  • Testing in React : Jest + React Testing Library (most popular), Cypress
  • React and Immutable Data Structures : Immer
  • React Internationalization : FormatJS, react-i18next
  • Rich Text Editor in React : Draft.js, Slate.js, ReactQuill
  • Payments in React :PayPal, React Stripe Elements 또는 Stripe Checkout
  • Time in React : date-fns, Day.js, Luxon
  • React Desktop Applications : Electron, Tauri, NW.js, Neutralino.js
  • Mobile Development with React : React Native, Expo
  • React VR/AR : react-three-fiber, react-360, aframe-react
  • Design Prototyping for React : Figma, Zeplin, Excalidraw, InVision
  • React Component Documentation : Storybook, Docusaurus, Docz, Styleguidist

2025년을 위한 Full-Stack React Tech Stack

SaaS 제품 또는 최소 기능 제품(MVP)을 개발하는 데 유용한 기술들을 소개

  • Next.js - 리액트 기반의 프레임워크로, 라우팅, 캐싱 등 다양한 기능을 기본 제공하며, 서버 컴포넌트 및 서버 함수와 같은 최신 리액트 기능을 통해 백엔드와의 연결을 지원함
  • Astro - 제품의 랜딩 페이지를 생성하기 위한 선택적 도구로, 빠른 랜딩 페이지 제작과 개발자 경험 향상을 위해 사용됨
  • Server Components - 서버에서 실행되어 데이터베이스 접근 등을 가능하게 하는 컴포넌트로, 풀스택 리액트 애플리케이션 개발 방식을 혁신함
  • Server Functions - 리액트 컴포넌트에서 서버 측 코드를 함수 호출만으로 실행할 수 있게 해주는 기능으로, API 엔드포인트를 자동 생성함
  • Server Actions - 서버 함수의 하위 집합으로, 사용성을 높이기 위한 라이브러리가 존재하지만, 직접 구현도 가능함
  • Tailwind CSS - 빠른 제품 개발과 장기적인 CSS 유지보수를 위해 추천되는 도구로, 익숙해지면 전통적인 CSS 방식으로 돌아가기 어려움
  • Shadcn UI - Tailwind CSS와 원활하게 통합되는 UI 라이브러리로, 버전이 없는 시스템을 제공하여 UI 관리에 신선한 접근 방식을 제시함
  • Lucide React - Shadcn UI와 함께 제공되는 아이콘 라이브러리로, 다른 대안이 나타나기 전까지는 교체 필요성이 낮음
  • TypeScript - 자바스크립트 프로젝트의 산업 표준으로, 개발자 경험 향상, 버그 감소, 코드 유지보수성 향상에 기여함
  • Zod - TypeScript와 잘 맞는 검증 라이브러리로, 주로 서버 측 검증에 사용되며, 클라이언트 측 폼은 네이티브 HTML 검증을 활용하여 복잡성을 줄임
  • nuqs - Next.js에서 URL 상태(예: 검색, 정렬, 페이지네이션)를 타입 안전하게 관리하기 위한 도구로, 다른 프레임워크에서는 내장 기능이나 다른 라이브러리를 사용할 수 있음
  • Zustand - 클라이언트 측 상태 관리를 위한 선택적 도구로, URL 상태, 클라이언트 측 데이터 캐싱, 서버 주도 리액트 애플리케이션의 발전으로 사용 빈도가 줄어듦
  • React Query - 무한 스크롤 등 복잡한 클라이언트 측 데이터 페칭에 사용되는 선택적 도구로, 프로젝트 복잡도가 낮을 경우 서버 컴포넌트만으로도 충분함
  • Prisma (ORM) - 안정적인 ORM 선택으로, 최신 트렌드에 따라 Drizzle로 대체할 수 있으나, 현재는 Prisma를 선호함
  • Supabase (데이터베이스) - Postgres 데이터베이스를 제공하는 서비스로, 유연성을 위해 데이터베이스만 사용하고 Prisma로 연결하여 다른 데이터베이스로의 교체를 용이하게 함
  • Lucia (인증) - 더 이상 유지보수되지 않지만, Oslo, Argon2, Arctic 등을 활용한 인증 시스템 구축 학습 자료로 사용되어, 서드파티 솔루션에 의존하지 않는 맞춤형 인증 시스템을 구현할 수 있음
  • S3 (파일 업로드) - AWS S3, 프리사인드 URL, AWS IAM을 활용하여 유연하고 저렴한 파일 저장 솔루션을 구축할 수 있으며, 대부분의 서드파티 서비스도 동일한 API를 사용하므로 필요 시 제공자를 변경하기 용이함
  • Inngest (큐) - 백엔드에서 복잡한 작업 조율을 위해 사용되는 도구로, 시간에 민감하지 않은 백그라운드 작업에 적합하며, 설정과 유지보수가 용이한 큐 시스템을 제공함
  • React Email + Resend - 전자는 리액트 컴포넌트로 이메일 템플릿을 생성하게 해주며, 후자는 이메일 전송을 위한 훌륭한 솔루션으로, 이전에 사용하던 Postmark에서 Resend로 전환하여 만족스러운 결과를 얻음
  • Vercel (호스팅) - 수년간 사용해 온 풀스택 애플리케이션 호스팅 솔루션으로, 자체 호스팅을 원할 경우 Hetzner/DigitalOcean과 Coolify를 추천함
  • CloudFlare (도메인) - 다양한 도메인 관리 경험 후, 현재는 CloudFlare의 우수한 UI와 DNS 레코드에 추가 정보를 첨부할 수 있는 기능으로 인해 만족스럽게 사용 중임
  • Stripe (결제 게이트웨이) - 수년간 사용해 온 결제 게이트웨이로, 훌륭한 문서와 API를 제공하지만, 기능과 API 범위가 확대되어 복잡해질 수 있음
  • 테스팅 및 도구 - React Testing Library와 Cypress/Playwright의 조합이 좋은 선택이며, ESLint(미래에는 Biome), Prettier를 추천함. UI 문서를 위해 여전히 Storybook을 사용하며, 터미널에서 TypeScript를 실행하기 위해 tsx를 사용함

2025년을 위한 필수 React 라이브러리들

2025년을 위한 대규모 애플리케이션을 개발하는 데 필요한 필수 리액트 라이브러리를 소개함

React 프로젝트 시작하기

  • Vite : React 프로젝트를 설정하는 가장 인기 있는 도구. 빠른 빌드 속도와 간편한 TypeScript 지원 제공
  • Next.js :
    • React 기반 메타 프레임워크로 서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원
    • 파일 기반 라우팅, API 라우트, React Server Components(RSC) 등 다양한 기능 제공
  • TanStack Start (Beta) : React 기반의 새로운 프레임워크로, React Server Components 지원 예정. Next.js의 대안으로 개발 중
  • React Router : React의 클라이언트 사이드 라우팅을 위한 대표적인 라이브러리. 현재 Remix의 영향을 받아 변화 중
  • Astro : 프레임워크에 구애받지 않는 정적 사이트 생성 도구. React와 함께 사용할 수 있으며, 불필요한 JavaScript를 최소화하여 성능 최적화 가능
  • Nitro , Redwood , Waku
    • React의 새로운 프레임워크 및 툴링
    • Waku는 Zustand 개발자가 만든 React Server Components 지원 라이브러리
  • 추천:
    • 클라이언트 사이드 렌더링(CSR): Vite
    • 서버 사이드 렌더링(SSR): Next.js
    • 정적 사이트 생성(SSG): Astro

React 패키지 매니저

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

React 상태 관리

  • useState, useReducer : React 기본 내장 훅으로 컴포넌트 내 상태 관리
  • useContext : 전역 상태 관리를 위한 React 기본 내장 훅
  • Zustand : 간단한 API로 전역 상태를 관리할 수 있는 라이브러리. Redux보다 사용이 간편하여 최근 많은 개발자들이 선호
  • Redux : 오랜 기간 사용된 상태 관리 라이브러리. 최근에는 Redux Toolkit이 표준으로 자리 잡음
  • XState, Zag : 상태 머신 기반 상태 관리 라이브러리
  • Mobx , Jotai , Nano Stores : Zustand, Redux 대안으로 사용 가능한 상태 관리 라이브러리
  • 추천:
    • 로컬 상태: useState / useReducer
    • 작은 전역 상태: useContext
    • 큰 전역 상태: Zustand

React 데이터 패칭

  • TanStack Query : REST 및 GraphQL API 요청을 위한 데이터 패칭 라이브러리. 캐싱, 동기화, 옵티미스틱 업데이트 등의 기능 제공
  • Apollo Client : GraphQL API에 최적화된 데이터 관리 라이브러리
  • urql : 경량 GraphQL 클라이언트
  • Relay : Facebook이 개발한 고성능 GraphQL 클라이언트
  • RTK Query : Redux 환경에서 데이터 패칭을 쉽게 할 수 있도록 돕는 도구
  • tRPC : TypeScript 기반의 백엔드-프론트엔드 간 타입 안전 API 통신을 제공. TanStack Query와 함께 사용 가능
  • 추천:
    • 서버 사이드 데이터 패칭: React Server Components / Functions (지원되는 메타 프레임워크 사용 시)
    • 클라이언트 사이드 데이터 패칭: TanStack Query (REST, GraphQL)
    • GraphQL 전용: Apollo Client
    • 타입 안전한 API 통신: tRPC

React 라우팅

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

React의 CSS 스타일링

  • Tailwind CSS
    • Utility-First-CSS 방식으로, 미리 정의된 클래스를 활용해 빠르게 스타일링 가능
    • 디자인 시스템을 일관되게 유지할 수 있지만, 클래스 네이밍이 복잡해질 수 있음
  • CSS Modules
    • 컴포넌트별로 스타일을 모듈화하여 전역 스타일 충돌 방지 가능
    • CSS-in-CSS 접근법 중 가장 널리 사용됨
  • styled-components
    • JavaScript 코드 내에서 CSS를 정의하는 CSS-in-JS 방식
    • 성능 및 서버 사이드 환경에서의 문제로 최근 인기가 줄어드는 추세
  • Emotion : styled-components와 유사한 CSS-in-JS 라이브러리로, 성능 최적화 및 유틸리티 클래스 활용 가능
  • clsx : 조건부 className 설정을 쉽게 해주는 유틸리티 라이브러리
  • StyleX : Facebook이 개발한 새로운 CSS-in-JS 솔루션. 최적화된 컴파일 방식으로 유틸리티-퍼스트 스타일링 제공
  • 기타 CSS 라이브러리 : PandaCSS , linaria , vanilla-extract , nanocss , UnoCSS , Styled JSX
  • 추천:
    • 가장 인기 있는 방식: Tailwind CSS
    • 스타일 모듈화 필요 시: CSS Modules
    • 최신 CSS-in-JS 솔루션: StyleX

React UI 라이브러리

  • Material UI (MUI) : 프리랜서 프로젝트에서 여전히 많이 사용되는 UI 라이브러리. Google의 Material Design 시스템 기반
  • Mantine UI : 2022년 가장 인기 있었던 UI 라이브러리. 다양한 기능과 커스텀 스타일 지원
  • Chakra UI : 2021년 가장 인기 있었던 UI 라이브러리. 접근성과 스타일링 편의성이 뛰어남
  • Hero UI : 이전 Next UI에서 변경된 UI 라이브러리
  • Park UI : Ark UI 기반 UI 라이브러리
  • PrimeReact : 다양한 프리빌트(Prebuilt) UI 컴포넌트 제공
  • 헤드리스 UI 라이브러리
    • shadcn/ui (2023-2024년 가장 인기 있음)
    • Radix (shadcn/ui의 기반)
    • React Aria
    • Ark UI (Chakra UI 제작팀 개발)
    • Ariakit
    • Daisy UI
    • Headless UI
    • Tailwind UI (유료)
  • 사용 빈도가 줄어든 UI 라이브러리
    • Ant Design
    • Semantic UI
    • React Bootstrap
    • Reactstrap
  • 추천:
    • 스타일 포함 UI 라이브러리: MUI, Mantine, Chakra UI
    • 스타일 미포함 헤드리스 UI 라이브러리: shadcn/ui, Radix

React 애니메이션 라이브러리

  • Motion : 가장 추천되는 애니메이션 라이브러리 (구 Framer Motion)
  • react-spring : 물리 기반 애니메이션 구현 가능

React 차트 및 데이터 시각화

  • D3.js : 저수준 차트 라이브러리로 강력하지만 학습 곡선이 가파름
  • Recharts : 사용하기 쉬운 차트 라이브러리. 기본적인 커스터마이징 가능
  • visx : D3와 유사한 방식으로 동작하지만 React 친화적
  • 기타 차트 라이브러리 : Victory , nivo , react-chartjs
  • 추천:
    • 간편한 차트: Recharts
    • D3 스타일 커스터마이징: visx

React 폼 라이브러리

  • React Hook Form : 가장 널리 사용되는 React 폼 라이브러리. zod과 함께 사용하여 강력한 폼 검증 가능
  • Conform : 풀스택 애플리케이션과의 통합이 용이한 신흥 폼 라이브러리
  • Formik , React Final Form : 전통적인 React 폼 라이브러리로, 여전히 일부 프로젝트에서 사용됨
  • 추천:
    • 폼 라이브러리 선택 시 React Hook Form + zod 사용

React 코드 스타일 및 포맷팅

  • ESLint : 코드 스타일 유지를 위한 린터. 인기 있는 스타일 가이드를 적용할 수 있음
  • Prettier : 일관된 코드 포맷팅을 제공하는 도구. ESLint와 함께 사용 가능
  • Biome : Rust 기반의 빠른 올인원 린터 및 코드 포맷터 (구 Rome). ESLint 및 Prettier의 대안으로 주목받는 중
  • 추천:
    • ESLint + Prettier 조합 사용
    • 새로운 대안으로 Biome 고려

React 인증(Authentication)

  • Lucia : OAuth 및 암호화 기능을 지원하는 인증 솔루션
  • Better Auth : 최신 인증 서비스 중 하나
  • Auth.js : Next.js 및 다양한 프레임워크에서 쉽게 사용할 수 있는 인증 라이브러리
  • 유료 인증 서비스 : Clerk , Kinde
  • Firebase/Supabase 기반 인증 : Supabase Auth
  • 기타 인증 서비스 : AuthKit , Auth0 , AWS Cognito
  • 추천:
    • 손쉬운 인증: Auth.js, Supabase Auth
    • OAuth 및 보안 기능 강화: Lucia, Better Auth

React 백엔드

  • Next.js : 서버사이드 렌더링(SSR) 및 API 라우트 제공
  • Astro : 정적 웹사이트 생성에 적합한 프레임워크
  • tRPC : 타입 안전한 API 통신을 위한 솔루션
  • Hono : 초경량 서버 프레임워크로, React와 함께 사용 가능
  • 전통적인 Node.js 백엔드 프레임워크
    • Express : 가장 인기 있는 Node.js 백엔드 프레임워크
    • Fastify : 고성능 Node.js 프레임워크
    • NestJS : 대규모 애플리케이션에 적합
    • Elysia : 최신 TypeScript 기반 백엔드
  • 기타 백엔드 프레임워크
    • Koa
    • Hapi
  • 추천:
    • 풀스택 React 개발: Next.js, tRPC
    • 전통적인 백엔드 필요 시: Express, Fastify

React 데이터베이스 및 ORM

  • Prisma : 가장 인기 있는 TypeScript 기반 ORM
  • Drizzle ORM : Prisma의 대안으로 주목받는 ORM
  • 기타 ORM 및 쿼리 빌더 : Kysely , database-js : PlanetScale 전용
  • 서버리스 데이터베이스
    • PlanetScale (유료)
    • Neon PostgreSQL 서버리스
    • Xata
    • Turso
  • Firebase/Supabase 기반 데이터베이스
    • Supabase PostgreSQL 기반, 자체 호스팅 가능
    • Firebase Firestore
  • 추천:
    • ORM 필요 시: Prisma, Drizzle ORM
    • 서버리스 데이터베이스: PlanetScale, Neon

React 호스팅

  • 자체 관리형 서버 : Digital Ocean , Hetzner
  • 완전 관리형 호스팅 :
    • Vercel : Next.js 프로젝트에 최적화
    • Coolify : 중간 단계 솔루션
  • 기타 호스팅 플랫폼
    • Render , Fly.io , Railway
    • CloudFlare , AWS , Azure , Google Cloud
  • 추천:
    • Next.js 프로젝트: Vercel
    • 자체 서버 관리 필요 시: Digital Ocean, Hetzner

React 테스트 라이브러리

  • Vitest : Jest보다 빠르고 최신 React 프로젝트에 최적화된 테스트 프레임워크. 테스트 실행, 어서션, 목(mocking) 기능 제공
  • Jest : 오래된 프로젝트에서도 많이 사용되는 테스트 프레임워크
  • React Testing Library (RTL)
    • React 컴포넌트 테스트를 위한 대표적인 라이브러리
    • HTML 요소 렌더링 및 이벤트 시뮬레이션 기능 제공
  • Playwright
    • 가장 추천되는 E2E(End-to-End) 테스트 도구
    • 다양한 브라우저 및 디바이스 환경에서 자동화 테스트 가능
  • Cypress : 프론트엔드 E2E 테스트 도구로, Playwright와 경쟁 중
  • 추천:
    • 유닛/통합 테스트: Vitest + React Testing Library
    • E2E 테스트: Playwright (또는 Cypress)
    • 스냅샷 테스트 옵션: Vitest

React와 불변 데이터 구조

  • Immer :
    • 불변 데이터 구조를 쉽게 다룰 수 있도록 돕는 라이브러리
    • 복잡한 상태 변경 로직을 간결하게 구현 가능

React 다국어(i18n) 지원

  • FormatJS : 날짜, 숫자, 통화 등의 포맷팅 포함한 강력한 i18n 라이브러리
  • react-i18next : React에서 가장 널리 사용되는 다국어 지원 라이브러리
  • Lingui : 최소한의 설정으로 강력한 다국어 지원 제공
  • next-intl : Next.js 프로젝트를 위한 다국어 라이브러리
  • 추천:
    • 가장 보편적인 선택: react-i18next
    • Next.js 기반 프로젝트: next-intl

React 리치 텍스트 에디터

  • TipTap : 확장성이 뛰어난 최신 리치 텍스트 에디터
  • Plate : Slate.js 기반의 강력한 에디터 솔루션
  • Lexical : Facebook이 만든 경량 리치 텍스트 에디터
  • Slate : 커스텀 가능한 리치 텍스트 에디터 프레임워크
  • 추천:
    • 유연한 확장성 필요 시: TipTap
    • 경량 & 최적화된 에디터: Lexical

React 결제 시스템

  • PayPal : 가장 널리 사용되는 결제 시스템 중 하나
  • Stripe : 개발 친화적인 결제 API 제공
    • React Stripe Elements
    • Stripe Checkout
  • 기타 결제 솔루션
  • 추천:
    • 간편한 결제 솔루션: Stripe
    • PayPal 지원 필요 시: PayPal 또는 Braintree

React에서 시간 및 날짜 처리

  • date-fns : 가벼우면서도 다양한 날짜/시간 함수 제공
  • Day.js : Moment.js의 가벼운 대안으로, API가 유사함
  • 추천:
    • 가장 가벼운 라이브러리: Day.js
    • 기능이 풍부한 라이브러리: date-fns

React 데스크톱 애플리케이션

  • Electron :
    • 크로스 플랫폼 데스크톱 애플리케이션 개발 프레임워크
    • 웹 기술(HTML, CSS, JS)로 Windows, macOS, Linux 애플리케이션 제작 가능
  • Tauri
    • Electron보다 가벼운 대안으로 Rust 기반 백엔드 사용
    • 보안성과 성능이 중요한 프로젝트에 적합
  • 추천:
    • 웹 기술을 그대로 활용: Electron
    • 경량 & 보안 우선: Tauri

React 파일 업로드

  • react-dropzone : 파일 업로드를 위한 React 훅 기반 라이브러리. 드래그 앤 드롭 기능 지원

React 이메일 렌더링

  • react-email (추천) : React 컴포넌트를 활용한 반응형 HTML 이메일 제작 가능
  • mjml : HTML 이메일을 간편하게 생성하는 마크업 언어
  • Mailing : 개발자가 쉽게 이메일을 생성하고 관리할 수 있도록 지원
  • jsx-email : JSX 문법을 활용한 이메일 템플릿 제작 가능
  • 이메일 서비스 제공업체 :
    • Resend
    • Postmark
    • SendGrid
    • Mailgun
  • 추천:
    • React 스타일로 이메일 제작: react-email
    • 이메일 서비스 필요 시: SendGrid, Mailgun

React 드래그 앤 드롭

  • @hello-pangea/dnd : react-beautiful-dnd의 후속 프로젝트로 간편한 사용법 제공
  • dnd kit : 높은 유연성과 커스터마이징 가능하지만 학습 곡선이 있음
  • 추천:
    • 쉬운 드래그 앤 드롭: @hello-pangea/dnd
    • 커스터마이징 필요 시: dnd kit

React 모바일 개발

  • React Native : React 기반의 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크
  • Expo : React Native 개발을 더욱 쉽게 만들어주는 툴체인
  • Tamagui : 웹과 모바일에서 동일한 UI 컴포넌트를 사용할 수 있도록 지원
  • 추천:
    • 모바일 개발: React Native + Expo
    • 웹과 모바일 UI 통합: Tamagui

React VR/AR 개발

  • react-three-fiber : Three.js 기반 3D 렌더링 라이브러리. VR 지원 사례 존재
  • react-360 (아카이브됨) : 페이스북이 개발한 VR/AR 프레임워크 (현재 유지보수 중단)
  • aframe-react (더 이상 유지보수 안됨) : A-Frame을 React에서 사용할 수 있도록 지원하는 라이브러리
  • 추천:
    • 최신 React 3D/VR 라이브러리: react-three-fiber

React 디자인 프로토타이핑

  • Figma : UI/UX 디자인 및 프로토타이핑을 위한 가장 인기 있는 툴
  • Excalidraw : 손으로 그린 듯한 와이어프레임 및 다이어그램 제작 가능
  • tldraw : Excalidraw과 유사한 스케치 도구
  • 추천:
    • UI/UX 디자인: Figma
    • 간단한 와이어프레임: Excalidraw

React 컴포넌트 문서화

  • Storybook : UI 컴포넌트 개발 및 문서화를 위한 대표적인 툴
  • Docusaurus : 기술 문서를 위한 정적 사이트 생성기
  • Styleguidist : React 컴포넌트 중심의 스타일 가이드 문서화 툴
  • React Cosmos : UI 컴포넌트를 독립적으로 개발 및 테스트할 수 있는 환경 제공
  • 추천:
    • 컴포넌트 문서화: Storybook
    • 기술 문서 생성: Docusaurus

JUST THE UI

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

VIRTUAL DOM

React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native.

DATA FLOW

React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.

with Axios

React:useState 또는 React:useReducer와 함께 사용하자.

CSS 적용 방법

JavaScript Object 이용 

class MyJob extends React.Component {
  render() {
    const hstyle = {
      color: "black",
      backgroundColor: "blue",
      fontFamily: "Arial"
    }
    return (
      <div>
      <h1 style={hstyle}>Hello Style!</h1>
      </div>
    );
  }
}

아니면 CSS가 Tag 스타일로 이루어 져 있다면 

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class MyJob extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      </div>
    );
  }
}

CSS를 class 로 적용해야 할 경우 

.mainBody {
  background-color: white;
  color: blue;
  margin: 10px;
  font-family: Arial;
  text-align: center;
}

React 적용시: 

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './App.css';

class MyJob extends React.Component {
  render() {
    return (
      <div>
      <h1 className={styles.mainBody}>Hello Style!</h1>
      </div>
    );
  }
}

환경 변수 적용 방법

CRA를 사용한다면 모든 환경변수가 REACT_APP_로 시작해야 한다.

실제로 사용할 때는 다음과 같이 REACT_APP_를 포함하여 사용해야 한다. 

{process.env.REACT_APP_ANSWER_DEPLOY === 'SRDC' ? <div /> : <div />}

결과적으로 package.json 파일에 cross-env를 활용하여 다음과 같이 넣으면 된다. 

cross-env REACT_APP_ANSWER_DEPLOY=SRDC react-scripts build

onClick event handler prototype 

function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
  event.preventDefault();
  console.info('You clicked a breadcrumb.');
}

export default function Search() {
  return (
    <div role="presentation" onClick={handleClick}>
      ...
    </div>
  );
}

ReactNode vs ReactElement

Tips

v-if같은 단항 조건으로 컴포넌트를 JAX에 추가하는 방법

&& 연산의 결과가 마지막 조건절의 결과를 반환하는 특성을 이용한다. 

function Page() {
  return (
    <Box sx={{display: 'flex'}}>
      <Box />
      {workId !== 0 && drawer}
      <Box />
    </Box>
  );
}

Troubleshooting

Download the React DevTools 

Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools

걍 플러그인 다운로드 ㄱㄱ

Missing "key" prop for element in iterator 

[eslint] Missing "key" prop for element in iterator [react/jsx-key]

루프할 때 Element 에 key prop를 추가해야 한다. 다음과 같이: 

return (
  <Stack direction="row" spacing={1}>
    {real.map(x => (<Chip key={x.id} label={x.value} sx={getChipStyle(x.color)} />))}
  </Stack>
);

React Hook useEffect has a missing dependency: 'xxx' 

ESLint: React Hook useEffect has a missing dependency: 'requestRows'. Either include it or remove the dependency array.(react-hooks/exhaustive-deps)

React Hook 으로 개발을 하다 보면 위 warning(경고)를 정말 많이 보실 것입니다. useEffect내에 사용하고 있는 state를 배열안에 추가시켜 달라는 의미입니다.

You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports 

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

해당 컴포넌트의 import를 다시 하거나 연결되어있는 컴포넌트들 중에 이름(대소문자 등)가 달라서 발생했을수도 있다.

Inkscape SVG Import 에러 

SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

React 에서 xmlns:svg와 같은 XML Namespace 를 읽을 수 없으므로 xmlnsSvg 와 같은 형식으로 사용하라... 같은데 잘 작동하지 않았다.

Inkscape 에서 작업한 SVG를 저장할 경우 Optimized SVG 로 저장하면 된다.

  • check the following at the options:
    • Shorten color values
    • Convert CSS attributes to XML attributes
    • Collapse groups
    • Create groups for similar attributes
  • SVG Output:
    • Remove the XML declaration
    • Remove metadata
    • Remove comments
    • Format output with line-breaks and indentation

또는 scour 패키지를 사용하면 된다. 사용한 명령행은 다음과 같다: 

scour answer-logo-onlytext.svg answer-logo-onlytext2.svg  --strip-xml-space --remove-descriptive-elements --enable-comment-stripping

react-hooks/rules-of-hooks

react-hooks/rules-of-hooks Lint 에러 중 여러 가지 케이스가 있다: 

  Line 26:22:  React Hook "useLocation" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

React Hooks는 React 함수 컴포넌트 또는 사용자 정의 React Hook 함수 내에서 호출되어야 합니다. 한마디로 Hook 을 콜백에서 사용하지 말라는 의미이다. 

  637:37  error  React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?  react-hooks/rules-of-hooks

React Hooks는 모든 컴포넌트 렌더링에서 정확히 동일한 순서로 호출되어야 합니다. 즉, if-else 같은 조건문 안에서 호출하지 말아라.

react-hooks/exhaustive-deps

다음과 같은 에러가 출력될 수 있다. 

src/components/ChargingCanvas.tsx
  Line 73:20:  Assignments to the 'preRectX' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect  react-hooks/exhaustive-deps

리액트로 개발 중에 이런 warning을 자주 본 적이 있다. 리액트 CRA(Create React App) 환경에서 기본적으로 설치되어있는 ESLint 플러그인이 표시해주는 warning이다.

이 React Hook useXXX has a missing dependency 라는 warning은, "hook에서 state, prop, 함수를 사용하고 있으면 의존성 배열에 넣어줘!" 라는 뜻이다.

리액트는 hook 내부에서 렌더 범위 안에 있는 값을 사용 중임에도 의도적으로 의존성 배열을 빈 배열로 두는 것을 권장하지 않는다. 하지만 warning이 알려주는대로 의존성 배열을 없애거나 필요한 의존성 배열을 추가해주면, 컴포넌트가 의도대로 동작하지 않거나 무한 루프를 경험하게 된다.

해결 방법은 useRef Hook 을 사용하는 방법 등이 있다.

앱 배포 후 브라우저 캐시를 클리어하지 않으면 최신버전으로 갱신되지 않는 현상

React:CacheBusting 항목 참조.

Consider adding an error boundary to your tree to customize error handling behavior

브라우저 오류에서 다음과 같은 에러가 출력될 수 있다: 

The above error occurred in the <ReactDevOverlay> component:

ReactDevOverlay@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:37:27

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

관련 내용은 React:ErrorBoundary 항목 참조.

결론부터 말하자면 layout.js 같은 곳에

<html>

태그와

<body>

태그 등이 잘 살아있는지 확인해 보자.

Calling setState synchronously within an effect can trigger cascading renders 

Error: Calling setState synchronously within an effect can trigger cascading renders

React 19부터 React는 effect 안에서 동기적인 상태 변경을 지양하도록 경고하기 시작했다. 그 이유는 useEffect 안에서 setState를 호출하면 바로 다시 리렌더링을 발생시키게 되기 때문이다.

최악의 경우 다음과 같은 무한 루프가 발생할 수 있다:

  1. 컴포넌트 렌더
  2. useEffect 실행
  3. setState 호출 → 즉시 리렌더
  4. useEffect 실행
  5. 다시 setState...

이때 해결책으로 사용할 수 있는 것이 useEffectEvent라는 훅이다.

다음과 같이 setState를 하는 부분을 분리하면 에러는 더 이상 발생하지 않는다: 

const updateItemHeights = useEffectEvent((estimatedItemHeight: number) => {
    setItemHeights((prev) => {
      // ...
    });
  });

  useEffect(() => {
    updateItemHeights(estimatedItemHeight);
  }, [items.length, estimatedItemHeight]);

useEffectEvent는 상태를 변경시키는 로직을 Effect Event로 분리하여, 이벤트 핸들러처럼 안전한 흐름으로 동작하도록 만들어 주는 역할을 하게 된다.

다만 이건 React가 원하는 방법은 아니다. 리렌더링을 방지할 수 없기 때문에 임시 처리 방법 밖에 되지 않는다.

실제론 useMemo를 사용하여, 현재 변경하고자 하는 heights가 렌더링 중에 계산되도록 하여 해결했다.

See also

Favorite site

Guide

Turorials

Article

References

  1. Blog.coderifleman.com_-_learning_react_01.pdf ↩

  2. Webframeworks.kr_-_start_react.pdf ↩

  3. Why_React_and_Server_side_rendering.pdf ↩

  4. Meetup_TOAST_Cloud_-Introduction_to_the_JavaScript_Framework_4-_React.pdf ↩

  5. Learn_Webpack_for_React_-_ko.pdf ↩

  6. Secure_login_handling_at_the_frontend.pdf ↩

  7. Blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior.pdf ↩