[React] 실무 패턴
개요 React 앱을 실제로 개발하다 보면 반복적으로 등장하는 패턴들이 있습니다. 인증 보호, 환경변수, 에러 처리, 코드 분할, 로딩 UI 등 자주 쓰이는 실무 패턴을 정리합니다.
최근 포스트
[React] 테스트 (Vitest, Testing Library)
개요 테스트는 코드가 올바르게 동작하는지 자동으로 검증하는 작업입니다. Vitest는 Vite 기반 테스트 러너이고, Testing Library는 실제 사용자 관점에서 컴포넌트를 테스트하는 라이브러리입니다.
[React] shadcn/ui
개요 shadcn/ui는 Radix UI와 Tailwind CSS를 기반으로 만들어진 UI 컴포넌트 모음입니다. npm 패키지가 아니라 소스 코드를 프로젝트에 직접 복사하는 방식이라, 컴포넌트를 자유롭게 수정할 수 있습니다.
[React] Tailwind CSS
개요 Tailwind CSS는 미리 정의된 유틸리티 클래스를 조합해 스타일을 지정하는 CSS 프레임워크입니다. 별도의 CSS 파일을 만들지 않고 HTML(JSX)에 클래스만 추가하면 스타일이 적용됩니다.
[React] React Hook Form, Zod
개요 폼 처리는 매번 state와 onChange를 반복하는 번거로운 작업입니다. React Hook Form은 폼 상태를 효율적으로 관리하고, Zod는 타입 안전한 유효성 검사 스키마를 제공합니다. 두 라이브러리를 함께 사용하면 간결하고 안전한 폼을 빠르게 만들 수 있습니다.
[React] TanStack Query
개요 TanStack Query (구 React Query)는 서버에서 가져오는 데이터(서버 상태)를 관리하는 라이브러리입니다. API 호출, 캐싱, 로딩/에러 처리, 자동 갱신 등을 간편하게 처리합니다.
[React] Zustand
개요 Zustand는 가볍고 간단한 전역 상태 관리 라이브러리입니다. Context API보다 설정이 적고, Redux보다 훨씬 간단합니다.
[React] Context API, useReducer
개요 Context API는 Props를 여러 단계로 내려보내지 않고 전역으로 데이터를 공유하는 방법입니다. useReducer는 복잡한 상태 로직을 정리하는 Hook입니다. 두 가지를 함께 사용하면 외부 라이브러리 없이도 전역 상태 관리를 구현할 수 있습니다.
[React] useRef, useCallback, useMemo
개요 useRef, useCallback, useMemo는 성능 최적화와 DOM 접근을 위한 Hook입니다. 처음에는 useState와 useEffect만으로도 충분하지만, 앱이 커지면 이 Hook들이 필요합니다.
[React] 커스텀 Hook
개요 커스텀 Hook은 반복되는 상태 로직을 별도 함수로 분리해 재사용하는 패턴입니다. 이름이 반드시 use로 시작해야 하며, 내부에서 다른 Hook을 사용할 수 있습니다.