개요
- 리액트는 컴포넌트 기반의 UI 라이브러리이다. 구체적으로 정의하면 함수 컴포넌트 기반으로 state, side effect, optimization을 처리를 하게 도와주는 Virtual DOM 기반의 사용자 인터페이스에 특화되어 있는 라이브러리이다.
- 리액트와 리액트 훅등 내장 기능을 통해 애플리케이션을 개발할 수도 있지만, 아마 대부분 개발자들은 원하는 작업을 위한 오픈소스 라이브러리를 같이 사용하여 애플리케이션을 개발하고 있다.
2024년 WEB 생태계 포스팅 바로가기
https://sillimmouse.tistory.com/85
리액트 프로젝트를 설정하는 방법
- HTML 프로젝트 생성 후 직접 도구(webpack, babel 등)을 추가하여 프로젝트 설정
- create-react-app(cra) 모듈을 실행하여 기본적인 프로젝트 설정
- 보통 리액트 프로젝트를 만들게 되면, 2가지 방법을 사용할 것이다. 기본 도구에 대한 이해도가 부족한 경우 2번째 방법으로 프로젝트를 설정하는 것이 좋은 선택이겠지만, 직접 프로젝트를 세팅해보는 경험도 리액트 라이브러리를 이해하기 위한 좋은 경험이 될것이다.
- 프로젝트 설정 후에도 애플리케이션 동작을 위해 리액트 라이브러리를 사용하게 된다.
- 리액트 라이브러리 모듈에 대한 장단점과 특징은 다른 포스팅에서 자세히 다뤄보고 이 포스팅에서는 이런 라이브러리들을 어떤 기준으로 묶어 라이브러리 분류하고 있는지 정리해보는 시간을 가지려고 한다.
리액트 라이브러리 정리
패키지 매니저
- 자바스크립트로 개발하는 프로젝트는 보통 Node.js와 같이 사용한다. 그렇기 때문에 Node.js에 패키지를 설치하기 위한 관리도구가 필요하다. 이런 도구를 패키지 매니저라고 한다.
- 리액트 앱에서 의존성 패키지를 설치하기 위해 사용하는 도구로써, 각 패키지 매니저마다 장단점과 사용하는 환경이 다르다. 한가지 공통점은 프로젝트별로 하나의 패키지관리자만을 사용하는것이 좋다는 것이다.
ex. npm, yarn, pnpm
리액트 상태관리
- 리액트에서 전역 변수를 관리하기 위해 react 내장 함수인 useContext 와 react-hooks에 useState와 useReducer 을 결합하여 사용하면 prop을 사용하여 직접 파라미터로 전달을 하는 방법보다. 터널링 과정의 드릴링 문제을 해결하여 전역변수를 관리 할 수 있다.
- 그러나, 관리하는 전역 변수가 많다면 상태관리 라이브러리를 별도로 추가하여 사용하는 방법을 추천한다.
- 작은 전역 변수들만 사용하는 경우 useContext를 추천하지만 관리하는 전역 변수가 많다면 상태관리 라이브러리를 별도로 추가하여 사용하는 방법을 추천한다.
ex. Redux, Zustand, Jotai, Recoil
리액트 데이터패칭
- 데이터패칭이란, 상태관리 대상에 대해 API에서 원격으로 데이터를 가져오는것을 말한다.
- 리액트 내장 훅을 통해 직접 데이터를 관리할 수 있지만, 데이터패칭 라이브러리를 사용하면 캐싱, UI업데이트 기능들을 같이 지원해주기 때문에 프론트앤드에서 백앤드를 호출하기 위해서는 전용 데이터패칭 라이브러리를 사용하는것이 권장된다.
ex. React Query, GraphQL, Relay, tRPC, SWR
리액트 라우터
- 라우터를 도입하게 되면, 리액트의 조건부 랜더링과, 클라이언트 측 렌더링을 개선을 할 수 있다.
- Next.js를 도입한 경우 이미 라우팅 처리가 되어 있지만 React만 사용하는 경우 라우팅 라이브러리를 사용하여 렌더링 최적화를 하는 것이 좋다.
ex. React Router, TanStack Router
리액트 스타일링(CSS)
- CSS-in-CSS : JSX에 인라인 CSS를 같이 사용하는 방식이다. 이러한 방법은 컴포넌트에 원하는 CSS를 적용하는 가장 기본적인 방법이다.
- CSS-in-JS : 자바스크립트로 생성된 스타일파일을 컴포넌트가 있을 파일에 같이 사용하는 방식이다.
ex.Styled-Components
- Utility-First-CSS : 사전에 정의된 CSS 클래스를 사용하는 방식으로, CSS-in-CSS 과 비슷한 구조에 디자인 시스템을 간호화할 수 있다는 특징이 있다.
ex. Tailwind
- 현재 CSS-in-JS 방식은 서버 환경 문제로 사용율이 감소하고 있고 CSS-in-CSS, Utility-First-CSS 중에 선택하여 사용하는 추세이다.
- 인라인 방식을 사용하면서 조건부 서식을 원하는 경우 clsx 라이브러리를 같이 사용하기도 한다.
리액트 UI 라이브러리
- UI 라이브러리가 없다면 셀렉트, 인풋박스, 버튼, 라이오버튼, 체크박스, 캘린더 등 컴포넌트의 리소스를 직접 작성해야 하기 때문에 사전에 제공하는 UI 라이브러리를 활용하면 편리하게 개발할 수 있다.
ex. Material UI(MUI), Mantine UI, Chakr UI, Next UI, Park UI
- 최근에는 헤드리스 UI 라이브러리를 선호하는 추세이다. 헤드리스 UI 라이브러리이란, 기존 UI 라이브러리와 다르게 사전에 컴포넌트 스타일을 입히지 않는 대신 필요한 모든 기능과 접근성을 갖춘 컴포넌트를 제공하는 라이브러리이다.
ex. shadcn/ui, Radix, React Aria, Catalyst, Daisy UI, Headless UI, Tailwind UI, Ark UI, Ant Design, Semantic UI, React Bootstrap, Reactstrap
- UI 라이브러리는 다양한 컴포넌트를 제공한다는 장점이 있지만, 특정 기능에 특화된 구현이 어렵기 때문에 테이블 등 특정 컴포넌트 특화라이브러리와 UI 라이브러리를 결합하여 사용할 것을 권장한다.
리액트 애니메이션
- 애니메이션은 CSS로 만들어 지지만, CSS 애니메이션만으로 요구사항을 만족하기 어려운경우 사용하는 라이브러리이다.
ex. Framer Motion, react-spring, react-motion, react-move
리액트 시각화 & 차트
- 데이터로 차트를 만들때 D3을 사용하면 처음부터 차트를 작성할 수 있지만 시각화 기능이 떨어질 수 있고 D3의 런닝커브가 높기 때문에 차트 라이브러리를 활용하는 것을 추천한다.
ex. Recharts, visx, Victory, nivo, react-chartjs
리액트 폼
- form 에 유효성검사, 양식 제출, 양식 상태를 작성하기 편하게 도와주는 라이브러리이다.
ex. react hook form
리액트 타입 검사
- 리액트 내장에서 PropTypes은 props 타입 검사를 정의하는 기능을 제공한다. 이를 통해 잘못괸 타입을 체크하여 메시지를 표시할 수 있다.
- 최근에는 자바스트립트 프로젝트에서는 TypeScript 사용을 권장하여 리액트 내장 기능이 사라지는 추세이다.
- TypeScript를 통해 prop뿐만 아니라 변수 검사, API 양식 검사 등 다양한 코드 검사를 지원하고 있다.
리액트 코드 스타일
- 통일되고 일반적인 코드 스타일을 유지하기 위해 사용하는 라이브러리이다.
- 자바스크립트 작성 시 린터는 특정 코드 스타일을 강제하며, 직접 커스텀하거나 인기있는 스타일 가이드를 참고하여 요구사항을 설정하고 코드 실수를 예방할 수 있다.
- 코드 형식을 지정하여 일관성을 유지하는 방식으로는 Prettier가 있다. ESLint와 Prettier는 상호 측면을 보안하기 위한 다양한 플러그인과 대안 도구들이 개발되고 있다.
ex.ESLint + Prettier, ESLint, Biome
리액트 인증
- 회원가입, 로그인, 로그아웃, 비밀번호 변경 등 기능에 인증을 도입하고 싶은 경우 사용하는 라이브러리이다.
- 인증 기능은 백엔드 애플리케이션을 직접 구현하는 것이 가장 좋지만, 개발 환경이 부족하거나 인증과 보안에 정보가 부족한 경우는 시중에 유명한 인증 라이브러리를 사용하는것을 추천한다.
ex. Lucia, Supabase Auth, Clerk, AuthKit, NextAuth, Firebase Auth, Auth0, AWS cognito
리액트 백앤드
- 리액트같은 프론트 라이브러리를 서버에서 실행하여 성능을 최적화하는 서버사이드에서 처리하는 방식이 많이 사용되고 있다.
- 리액트 프로젝트에서 서버사이드를 지원하는 대표 풀스택 프레임워크들이 개발 되고 있다.
ex. Next.js, Astro, Remix
- 이러한 풀 스택 프레임워크 적용이 어려운 경우 서버사이드 렌더링을 지원하는 라이브러리를 사용하여 처리할 수 있다.
ex. tRPC, Hono, Express, Fastify, NestJS
리액트 데이터베이스
- 최근 리액트 애플리케이션으로 풀스택 개발을 하는 경우 데이터베이스를 연동하는 ORM(Object-Relational Mapping) 작업을 한다.
ex. Priama, Driaale ORM, Kusely, database-js
- 데이터베이스 기능을 위해 오픈소스 백엔드 서비스를 사용하기도 한다.
ex. Supabase, Firebase
- 서버리스 데이터베이스를 사용하기도 한다.
ex. PlanetScale, Neon, Xata
리액트 호스팅
- 리액트 애플리케이션을 다른 애플리케이션에 호스팅하게 지원해주는 라이브러리
ex. Netlify, Vercel
- 서드파티 백엔드 서비스를 사용하기도 한다.
ex. Supabase, Firebase
리액트 테스트
- 단위/통합 테스트를 위해 Jest 를 사용하여 테스트 러너, 어설션 라이브러리, 스파이, 모킹, 스텁 기능을 제공 받을 수 있다. React Testing Library (RTL)을 사용하여 컴포넌트를 렌더링하고 HTML 요소에서 이벤트를 시뮬레이션할 수 있다.
- 단위/통합: Vitest + React Testing Library(가장 인기 있음)
- 스냅샷 테스트: Vitest
- E2E 테스트: Playwright 또는 Cypress
리액트 불변성 구조
- 자바스크립트 내장 도구를 통해 데이터 구조의 불편성을 처리하지만, 강제성을 위해 별도 도구를 사용하기도 한다.
ex. immer
리액트 국제화
- 홈페이지 번역, 복수화, 날짜/통화 형식 등을 고려하여 개발할 수 있는 라이브러리를 지원한다.
ex. FormatJS, react-i18next, react-lint, Lingui
리액트 텍스트편집기
- 텍스트 편집기 라이브러리
ex. Plate, Lexical, Slate.js
리액트 결제
- 결제 기능을 위한 라이브러리
ex. PayPal, React Stripe Elements, Stripe Checkout
리액트 시간
- 날짜, 시간을 조회하거나 계산하는 라이브러리
ex. data-fns, Day.js, Luxon
리액트 크로스플랫폼
- 크로스 플랫폼을 개발하기 위한 프레임워크
ex. Electron, Tauri
리액트 파일업로드
- 파일업로드 라이브러리
ex. react-dorpzone
리액트 메일
- 메일 라이브러리
ex. react-email, Mailing, mjml
리액트 드래그앤드롭
- 드래그앤드롭 기능을 위한 라이브러리
ex. react-beautiful-dnd, react-dnd, dnd kit
리액트 모바일
- 리액트를 웹에서 모바일로 작성하기 위해 React Native 를 사용한다.
- React Native에서 인기 있는 프레임워크로는 Expo, Tamagui가 있다.
리액트 VR/AR
- 리액트를 사용하여 VR/AR을 개발할 수 있다.
ex. react-three-fiber, react-360, aframe-react
리액트 디자인 프로토타이핑
- UI/UX를 빠르게 프로토타이핑할 수 있는 도구
ex. Figma, Excalidraw, tldraw
리액트 컴포넌트 문서화
- 컴포넌트 문서화를 위해 도와주는 문서화 도구
ex. storybook, Docusaurus, Docz, Styleguidst, React Cosmos
마무리
- 더 나은 개발 환경을 선택하는 것은 개발자의 핵심적인 역할이다.
- 내장 기능을 활용할지 추가 라이브러리를 도입할지, 개발 환경에 가장 적합한 프레임워크는 무엇인지, 필요한 도구를 프로젝트에 어떻게 효과적으로 활용할지 고민해야 한다.
- 올바른 선택을 통해 기존 프로젝트에 대한 이해를 높이고, 업데이트로 인한 부담을 줄이기 위해 지속적인 관심과 노력이 필요하다.
