react_초급 스택 가이드

React 초보자를 위한 기술 스택, 실무에서 사용하는 핵심 라이브러리

by

React 개발을 시작하려는 초보자들에게 가장 어려운 것 중 하나는 “어떤 라이브러리를 사용해야 할까?”입니다. 시중에는 수많은 라이브러리가 존재하고, 각각의 용도와 장단점을 파악하기 어렵죠. 이 글에서는 실제 현업에서 자주 사용되는 React 기술 스택을 8개 주제로 나누어 자세히 알아보겠습니다. 각 라이브러리의 핵심 기능과 사용법을 초보자도 이해할 수 있도록 쉽게 설명해드릴게요.

기반 기술: React 18, TypeScript, Vite

React 18: 현대적 사용자 인터페이스의 기반

React는 Facebook(현 Meta)에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스를 구축하기 위해 사용됩니다. React 18은 2022년에 출시된 최신 버전으로, 다음과 같은 핵심 기능들을 제공합니다:

컴포넌트 기반 개발: React의 가장 큰 특징은 UI를 컴포넌트 단위로 나누어 개발할 수 있다는 점입니다. 예를 들어, 버튼, 입력폼, 헤더 등을 각각 독립적인 컴포넌트로 만들어 재사용할 수 있습니다.

가상 DOM(Virtual DOM): React는 실제 DOM을 직접 조작하는 대신 가상 DOM을 사용합니다. 이를 통해 성능을 크게 향상시킬 수 있으며, 복잡한 UI 업데이트도 효율적으로 처리할 수 있습니다.

Concurrent Features: React 18의 새로운 기능으로, 사용자 인터랙션을 우선시하여 앱이 더 빠르게 반응하도록 합니다. Suspense, useTransition 등의 기능을 통해 더 나은 사용자 경험을 제공합니다.

TypeScript: 안전하고 확장 가능한 JavaScript

TypeScript는 Microsoft에서 개발한 언어로, JavaScript에 타입 시스템을 추가한 것입니다. 초보자에게는 처음에 복잡해 보일 수 있지만, 다음과 같은 이점들이 있습니다:

타입 안정성: 변수나 함수의 타입을 미리 정의함으로써 런타임 에러를 사전에 방지할 수 있습니다. 예를 들어, 문자열이 들어와야 할 자리에 숫자가 들어오면 개발 단계에서 미리 오류를 발견할 수 있습니다.

개발 도구 지원: IDE에서 자동완성, 리팩토링, 코드 네비게이션 등의 기능을 더욱 효과적으로 사용할 수 있습니다.

코드 가독성: 타입 정보가 코드 자체에 포함되어 있어서 다른 개발자가 코드를 이해하기 쉽습니다.

Vite: 빠른 개발 환경 구축

Vite는 프랑스어로 “빠른”이라는 뜻으로, 이름 그대로 매우 빠른 빌드 도구입니다. 기존의 Create React App보다 훨씬 빠른 개발 서버 시작 시간과 핫 모듈 교체(HMR)를 제공합니다.

빠른 개발 서버: 프로젝트 크기에 관계없이 거의 즉시 개발 서버가 시작됩니다.

효율적인 빌드: 프로덕션 빌드 시에는 Rollup을 사용하여 최적화된 번들을 생성합니다.

플러그인 시스템: 다양한 플러그인을 통해 기능을 확장할 수 있습니다.

스타일링: TailwindCSS로 빠르고 일관된 UI 구축

TailwindCSS의 핵심 개념

TailwindCSS는 “Utility-First” 방식의 CSS 프레임워크입니다. 기존의 Bootstrap이나 Semantic UI와 달리, 미리 만들어진 컴포넌트를 제공하는 것이 아니라 작은 단위의 유틸리티 클래스들을 조합해서 스타일을 만듭니다.

유틸리티 클래스: text-center, bg-blue-500, p-4, rounded-lg 같은 작은 기능 단위의 클래스들을 HTML 요소에 직접 적용합니다.

빠른 개발 속도: CSS 파일을 별도로 작성할 필요 없이 HTML에서 바로 스타일을 적용할 수 있어 개발 속도가 빨라집니다.

일관성: 미리 정의된 디자인 시스템을 사용하기 때문에 색상, 간격, 크기 등이 일관되게 유지됩니다.

반응형 디자인: sm:, md:, lg: 같은 접두사를 사용해서 쉽게 반응형 디자인을 구현할 수 있습니다.

TailwindCSS 사용 예시

// 전통적인 CSS 방식
<div className="card">
  <h2 className="card-title">제목</h2>
  <p className="card-content">내용</p>
</div>

// TailwindCSS 방식
<div className="bg-white rounded-lg shadow-md p-6">
  <h2 className="text-xl font-bold text-gray-800 mb-4">제목</h2>
  <p className="text-gray-600">내용</p>
</div>

TailwindCSS를 처음 접하는 개발자들은 클래스명이 길어 보여서 거부감을 느낄 수 있지만, 익숙해지면 매우 빠르고 효율적으로 스타일링을 할 수 있습니다.

상태 관리: Zustand와 React Query의 완벽한 조합

Zustand: 간단하고 직관적인 상태 관리

Zustand(독일어로 “상태”라는 뜻)는 Redux의 복잡함을 해결하기 위해 만들어진 가벼운 상태 관리 라이브러리입니다.

간단한 설정: Redux처럼 복잡한 보일러플레이트 코드가 필요 없습니다. 몇 줄의 코드만으로 전역 상태를 만들 수 있습니다.

TypeScript 지원: TypeScript와의 호환성이 뛰어나며, 타입 추론도 잘 됩니다.

작은 번들 크기: 압축 후 약 2KB 정도로 매우 가볍습니다.

// Zustand 사용 예시
import { create } from 'zustand'

interface CounterState {
  count: number
  increment: () => void
  decrement: () => void
}

const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

// 컴포넌트에서 사용
function Counter() {
  const { count, increment, decrement } = useCounterStore()
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  )
}

React Query: 서버 상태 관리의 혁신

React Query(현재는 TanStack Query)는 서버에서 가져오는 데이터를 관리하는 라이브러리입니다. 기존에 우리가 useEffect와 useState로 API 호출을 처리하던 방식을 완전히 바꿔놓았습니다.

캐싱: 한 번 가져온 데이터를 메모리에 저장해서 같은 요청이 있을 때 즉시 응답할 수 있습니다.

자동 리페칭: 윈도우에 포커스가 돌아왔을 때, 일정 시간이 지났을 때 등 다양한 조건에서 자동으로 데이터를 업데이트합니다.

로딩 및 에러 상태: 데이터 로딩 중인지, 에러가 발생했는지 등의 상태를 쉽게 관리할 수 있습니다.

// React Query 사용 예시
import { useQuery } from '@tanstack/react-query'

function UserProfile({ userId }: { userId: string }) {
  const { data: user, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
  })

  if (isLoading) return <div>로딩 중...</div>
  if (error) return <div>에러가 발생했습니다</div>
  
  return (
    <div>
      <h1>{user?.name}</h1>
      <p>{user?.email}</p>
    </div>
  )
}

라우팅: React Router DOM으로 페이지 이동 구현

SPA에서의 라우팅 이해

Single Page Application(SPA)에서는 실제로는 하나의 HTML 페이지만 있지만, 사용자에게는 여러 페이지가 있는 것처럼 보여줍니다. 이를 위해 라우팅 라이브러리가 필요하며, React에서는 React Router DOM이 가장 많이 사용됩니다.

브라우저 히스토리 API: 브라우저의 뒤로가기, 앞으로가기 버튼을 자연스럽게 사용할 수 있습니다.

중첩 라우팅: 페이지 안에 하위 페이지를 만들 수 있습니다. 예를 들어 /users/123/profile처럼 계층 구조의 URL을 만들 수 있습니다.

보호된 라우팅: 로그인한 사용자만 접근할 수 있는 페이지를 만들 수 있습니다.

React Router DOM의 주요 기능

// 기본 라우팅 설정
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/users/:userId" element={<UserProfile />} />
        <Route path="/dashboard" element={
          <PrivateRoute>
            <Dashboard />
          </PrivateRoute>
        } />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BrowserRouter>
  )
}

// URL 파라미터 사용
import { useParams } from 'react-router-dom'

function UserProfile() {
  const { userId } = useParams()
  
  return <div>사용자 ID: {userId}</div>
}

동적 라우팅: URL의 일부분을 변수로 사용할 수 있습니다. /users/:userId처럼 콜론을 사용해서 동적인 부분을 표시합니다.

프로그래밍적 네비게이션: 버튼 클릭 등의 이벤트에서 페이지를 이동시킬 수 있습니다.

폼 관리: React Hook Form으로 효율적인 입력 처리

폼 관리의 어려움

React에서 폼을 다루는 것은 생각보다 복잡합니다. 각 입력 필드의 값을 state로 관리하고, 유효성 검사를 하고, 에러 메시지를 표시하는 등 많은 작업이 필요합니다. React Hook Form은 이러한 복잡함을 해결해주는 라이브러리입니다.

성능 최적화: 불필요한 리렌더링을 최소화하여 폼 성능을 크게 향상시킵니다.

간단한 유효성 검사: 복잡한 유효성 검사 로직을 쉽게 구현할 수 있습니다.

타입 안정성: TypeScript와 함께 사용하면 폼 데이터의 타입을 보장받을 수 있습니다.

React Hook Form 사용 예시

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

// 유효성 검사 스키마 정의
const schema = z.object({
  email: z.string().email('올바른 이메일 형식이 아닙니다'),
  password: z.string().min(8, '비밀번호는 최소 8자 이상이어야 합니다'),
  name: z.string().min(2, '이름은 최소 2자 이상이어야 합니다'),
})

type FormData = z.infer<typeof schema>

function SignupForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm<FormData>({
    resolver: zodResolver(schema)
  })

  const onSubmit = async (data: FormData) => {
    try {
      await signup(data)
      // 성공 처리
    } catch (error) {
      // 에러 처리
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <input
          {...register('email')}
          type="email"
          placeholder="이메일"
        />
        {errors.email && <span>{errors.email.message}</span>}
      </div>
      
      <div>
        <input
          {...register('password')}
          type="password"
          placeholder="비밀번호"
        />
        {errors.password && <span>{errors.password.message}</span>}
      </div>
      
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '처리 중...' : '회원가입'}
      </button>
    </form>
  )
}

UI 컴포넌트: 실무에서 자주 사용하는 라이브러리들

React Select: 고급 선택 컴포넌트

HTML의 기본 select 태그는 기능이 제한적입니다. React Select는 검색 기능, 다중 선택, 비동기 데이터 로딩 등 다양한 기능을 제공합니다.

검색 기능: 사용자가 타이핑해서 옵션을 검색할 수 있습니다.

다중 선택: 여러 옵션을 동시에 선택할 수 있습니다.

커스텀 스타일링: 디자인을 자유롭게 변경할 수 있습니다.

React DatePicker: 날짜 선택 인터페이스

날짜 입력은 웹 애플리케이션에서 매우 중요하지만 구현하기 복잡한 기능 중 하나입니다. React DatePicker는 다양한 날짜 선택 UI를 제공합니다.

캘린더 UI: 직관적인 캘린더 인터페이스를 제공합니다.

날짜 범위 선택: 시작일과 종료일을 선택할 수 있습니다.

국제화: 다양한 언어와 지역 설정을 지원합니다.

React PDF: PDF 문서 처리

웹에서 PDF 문서를 보여주거나 생성해야 하는 경우가 있습니다. React PDF는 이러한 기능을 제공합니다.

PDF 뷰어: 웹 브라우저에서 PDF 문서를 볼 수 있습니다.

PDF 생성: React 컴포넌트를 PDF 문서로 변환할 수 있습니다.

React Markdown Preview: 마크다운 렌더링

마크다운은 간단한 문법으로 문서를 작성할 수 있는 방식입니다. React Markdown Preview는 마크다운 텍스트를 HTML로 변환해서 보여줍니다.

실시간 미리보기: 마크다운을 작성하면서 실시간으로 결과를 볼 수 있습니다.

확장 가능: 다양한 플러그인을 통해 기능을 확장할 수 있습니다.

ECharts: 강력한 데이터 시각화

데이터를 차트로 시각화하는 것은 현대 웹 애플리케이션에서 매우 중요합니다. ECharts는 Apache에서 개발한 강력한 차트 라이브러리입니다.

다양한 차트 타입: 막대 차트, 선 차트, 파이 차트, 히트맵 등 다양한 차트를 지원합니다.

인터랙티브: 사용자가 차트와 상호작용할 수 있습니다.

반응형: 화면 크기에 맞춰 차트 크기가 자동으로 조정됩니다.

인증 시스템: Keycloak으로 안전한 사용자 관리

인증과 인가의 중요성

현대 웹 애플리케이션에서 사용자 인증과 권한 관리는 필수적입니다. 직접 구현하기에는 보안 위험이 크기 때문에 검증된 솔루션을 사용하는 것이 좋습니다.

인증(Authentication): 사용자가 누구인지 확인하는 과정입니다.

인가(Authorization): 인증된 사용자가 어떤 리소스에 접근할 수 있는지 결정하는 과정입니다.

Keycloak의 핵심 기능

Keycloak은 Red Hat에서 개발한 오픈소스 ID 및 액세스 관리 솔루션입니다.

Single Sign-On (SSO): 한 번 로그인하면 여러 애플리케이션에 자동으로 로그인됩니다.

소셜 로그인: Google, Facebook, GitHub 등의 소셜 미디어 계정으로 로그인할 수 있습니다.

Multi-Factor Authentication: 이중 인증을 통해 보안을 강화할 수 있습니다.

역할 기반 액세스 제어: 사용자에게 역할을 할당하고, 역할에 따라 접근 권한을 제어할 수 있습니다.

// Keycloak 사용 예시
import Keycloak from 'keycloak-js'
import { createContext, useContext, useEffect, useState } from 'react'

const keycloak = new Keycloak({
  url: 'https://your-keycloak-server',
  realm: 'your-realm',
  clientId: 'your-client-id'
})

const AuthContext = createContext(null)

export function AuthProvider({ children }) {
  const [authenticated, setAuthenticated] = useState(false)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    keycloak.init({ onLoad: 'login-required' })
      .then((authenticated) => {
        setAuthenticated(authenticated)
        setLoading(false)
      })
      .catch(() => setLoading(false))
  }, [])

  if (loading) return <div>로딩 중...</div>

  return (
    <AuthContext.Provider value={{ keycloak, authenticated }}>
      {children}
    </AuthContext.Provider>
  )
}

사용자 경험 향상: 알림, 로딩, 툴팁 컴포넌트

React Toastify: 사용자 친화적인 알림

사용자에게 성공, 에러, 경고 등의 메시지를 전달하는 것은 좋은 사용자 경험에 필수적입니다. React Toastify는 아름답고 사용하기 쉬운 토스트 알림을 제공합니다.

다양한 스타일: 성공, 에러, 경고, 정보 등 다양한 타입의 알림을 지원합니다.

위치 설정: 알림이 나타날 위치를 자유롭게 설정할 수 있습니다.

자동 사라짐: 일정 시간 후 자동으로 사라지도록 설정할 수 있습니다.

import { toast } from 'react-toastify'

function handleSubmit() {
  try {
    // API 호출
    await saveData()
    toast.success('성공적으로 저장되었습니다!')
  } catch (error) {
    toast.error('저장 중 오류가 발생했습니다.')
  }
}

React Loading Skeleton: 자연스러운 로딩 UI

데이터를 불러오는 동안 사용자에게 로딩 상태를 보여주는 것은 중요합니다. 단순히 “로딩 중…”이라는 텍스트보다는 실제 콘텐츠와 비슷한 형태의 스켈레톤을 보여주는 것이 더 나은 사용자 경험을 제공합니다.

실제 콘텐츠 모방: 로딩이 완료되면 나타날 콘텐츠의 구조를 미리 보여줍니다.

부드러운 애니메이션: 깜빡이거나 움직이는 효과로 로딩 중임을 알려줍니다.

커스터마이징: 크기, 색상, 애니메이션 등을 자유롭게 설정할 수 있습니다.

React Tooltip: 정보 전달을 위한 툴팁

복잡한 UI에서 사용자에게 추가 정보를 제공해야 할 때 툴팁이 유용합니다. React Tooltip은 마우스를 올렸을 때 나타나는 작은 정보 창을 만들 수 있게 해줍니다.

다양한 트리거: 마우스 오버, 클릭, 포커스 등 다양한 이벤트로 툴팁을 표시할 수 있습니다.

위치 자동 조정: 화면 경계를 벗어나지 않도록 자동으로 위치를 조정합니다.

풍부한 콘텐츠: 단순한 텍스트뿐만 아니라 HTML, 이미지 등 다양한 콘텐츠를 표시할 수 있습니다.

결론, 프로젝트 구축을 위한 학습 순서

이 글에서 소개한 라이브러리들은 현재 실무에서 가장 많이 사용되는 도구들입니다. 각각의 라이브러리는 특정한 문제를 해결하기 위해 만들어졌으며, 함께 사용했을 때 시너지 효과를 발휘합니다.

학습 순서 추천:

  1. React 18의 기본 개념과 TypeScript 기초 익히기
  2. TailwindCSS로 스타일링 경험해보기
  3. React Router DOM으로 간단한 다중 페이지 앱 만들기
  4. React Hook Form으로 폼 처리 학습하기
  5. Zustand와 React Query로 상태 관리 이해하기
  6. 필요에 따라 다른 UI 컴포넌트 라이브러리들 추가하기

주의사항:

  • 모든 라이브러리를 한 번에 사용하려고 하지 마세요. 프로젝트의 요구사항에 맞게 선택적으로 도입하세요.
  • 각 라이브러리의 공식 문서를 읽어보는 습관을 기르세요.
  • 라이브러리에 너무 의존하지 말고, 기본 React 개념을 확실히 이해하세요.

이러한 기술 스택을 마스터하면 현대적이고 확장 가능한 React 애플리케이션을 개발할 수 있을 것입니다. 각 도구의 특성을 이해하고 적절한 상황에서 사용한다면, 개발 생산성과 코드 품질 모두를 크게 향상시킬 수 있습니다.

Leave a Comment