실무에서 자주 사용하는 React 도구들 정리

하영·2025년 3월 23일

React

목록 보기

25/26

📝 실무에서 자주 사용하는 React 도구들 정리

React는 라이브러리를 중심으로 필요한 도구들을 조립해 나가는 형태이기 때문에, 실무에서는 다양한 도구들이 조합되어 사용된다.

React Hook Form, createPortal 처럼 기능별로 특화된 도구들이 많다.

도구	주요 용도	언제 사용하는가?
`React Hook Form`	폼 상태 관리	인풋 입력값, 유효성 검사, 에러 메시지 처리
`createPortal`	UI 계층 분리	모달, 툴팁, 드롭다운처럼 부모 DOM 흐름에서 벗어나야 할 때
`React Query` (`@tanstack/react-query`)	서버 상태 관리, 캐싱	API 데이터를 불러오고, 로딩/에러/갱신 상태를 쉽게 처리할 때
`Zod / Yup`	스키마 기반 유효성 검사	폼 데이터나 API 응답의 구조를 타입 기반으로 검증할 때
`Framer Motion`	애니메이션 처리	자연스럽고 고급스러운 전환 효과를 구현하고 싶을 때
`Recoil / Zustand`	전역 상태 관리	로그인 유저 정보, 다크모드 설정 등 앱 전역에서 공유되는 상태 처리
`react-error-boundary`	에러 경계 처리	에러 발생 시 fallback UI를 선언형으로 작성할 때
`react-intersection-observer`	뷰포트 감지	무한 스크롤, Lazy load, 애니메이션 트리거 등
`react-toastify` / `sonner`	알림 UI	요청 성공/실패 알림, 사용자 피드백 표시
`date-fns` / `dayjs`	날짜 처리 유틸	날짜 계산, 포맷, 상대시간 표현 등 (`3일 전`, `2025-03-24` 형식 등)

이 중에서 몇 가지만 선택해서 간단히 정리해보려고 한다.

🔍 대표 도구 예시 설명

1. React Hook Form (RHF)

import { useForm } from 'react-hook-form';

const { register, handleSubmit, formState: { errors } } = useForm();

<form onSubmit={handleSubmit(data => console.log(data))}>
  <input {...register("email", { required: "이메일은 필수입니다" })} />
  {errors.email && <p>{errors.email.message}</p>}
</form>

폼을 컨트롤 컴포넌트 없이 처리할 수 있음
Zod와 결합하여 안전한 유효성 검사 가능

⚠️ 사용 시 주의할 점

defaultValues를 지정하지 않으면 watch, reset 등 일부 기능이 예상대로 동작하지 않음
Controller를 사용할 땐 불필요한 re-render가 발생할 수 있음 → 성능 최적화 필요
useEffect로 동기화할 값은 반드시 reset() 또는 setValue()를 명시적으로 호출해야 한다.

✅ 올바른 사용법

defaultValues는 useForm 내부에서 초기값으로 명확히 지정

const { register, handleSubmit } = useForm({
  defaultValues: { email: "" },
  mode: "onBlur",
});

Controller는 커스텀 컴포넌트 또는 제어 컴포넌트(Input, DatePicker 등)에만 사용
mode: 'onBlur' 또는 onTouched로 validation 타이밍 조절 가능함

2. createPortal

import { createPortal } from 'react-dom';

const Modal = ({ children }) => {
  return createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root') // 별도 위치에 모달 렌더링
  );
};

모달이 부모 요소의 z-index나 overflow에 영향을 받지 않도록 격리시킴
실무에서 모달, 드롭다운, 토스트 등에 필수

⚠️ 사용 시 주의할 점

포탈이 렌더링될 container DOM 요소가 존재해야 함 (예: #modal-root)
z-index, position: fixed 등을 부모 레이아웃에 맞춰 별도로 지정해야한다.
이벤트 버블링, 포커스 트랩 같은 UI 문제 발생할 수 있으므로 주의해야한다.

✅ 올바른 사용법

#modal-root는 HTML 파일에 미리 정의
모달 컴포넌트는 컴포지션으로 재사용 가능하게 설계한다.

3. Zod

const { data, isLoading, isError } = useQuery({
  queryKey: ['user'],
  queryFn: fetchUserData
});

스키마 기반의 타입 안전한 유효성 검사 라이브러리로, 런타임에서도 타입 검사를 수행할 수 있음
주로 React Hook Form의 유효성 검증, 또는 API 응답 구조 검증 등에 활용

⚠️ 사용 시 주의할 점

ZodError를 직접 파싱하지 않으면 UI에서 에러 메시지를 깔끔하게 보여주기 어렵다.
API 응답 검증 시 스키마와 실제 응답 구조가 다르면 런타임에서 예외 발생한다. → try-catch 필수!

✅ 올바른 사용법

RHF와 함께 쓸 땐 zodResolver를 활용해 에러 핸들링 일관성 유지한다.

const { register, formState } = useForm({
  resolver: zodResolver(schema),
});

스키마는 분리된 파일에 선언해 재사용성을 확보한다.

const schema = z.object({
  name: z.string().min(1, "이름은 필수입니다."),
});

Optional한 필드는 .optional(), .nullable()을 명확히 구분

4. react-toastify

import { toast } from "react-toastify";

export const notifySuccess = (msg: string) => toast.success(msg);
export const notifyError = (msg: string) => toast.error(msg);

notifySuccess("저장되었습니다!");