[DevCamp] 컴포넌트 구현

동건·2025년 4월 13일

DevCamp

목록 보기

46/85

⚛️ React 구조 이해와 Vite + TypeScript 프로젝트 구성하기

React로 프로젝트를 만들 때 가장 먼저 고민하는 것은 프로젝트 구조와 개발 환경 구성이다.
특히 Vite와 TypeScript를 함께 쓰면 빌드 속도도 빠르고,
타입 안정성도 챙길 수 있어 훨씬 쾌적한 개발이 가능하다.

오늘은 React 프로젝트 구조를 어떻게 잡을 수 있는지,
그리고 Vite + TypeScript를 어떻게 설정하는지 학습을 하였다.

프로젝트 구조 이해하기

React 프로젝트는 파일이 많아질수록 폴더 구조가 중요해진다.
아래는 내가 자주 사용하는 구조 예시다:

src/
├── assets/           # 이미지, 폰트 등 정적 파일
├── components/       # 재사용 가능한 컴포넌트
├── pages/            # 라우트 단위의 페이지 컴포넌트
├── hooks/            # 커스텀 훅
├── utils/            # 유틸 함수
├── types/            # 타입 정의
├── services/         # API 호출 관련 함수
├── App.tsx           # 최상위 컴포넌트
├── main.tsx          # 진입점

각 디렉토리 설명

assets/ : 로고, 이미지, 전역 CSS 등 정적 자원 관리
components/ : Header, Modal, Button 등 공통 UI 컴포넌트
pages/ : 실제 라우터에 매핑되는 화면 단위
hooks/ : 재사용 가능한 커스텀 훅들 (예: useToggle, useFetch 등)
utils/ : 날짜 포맷, 숫자 처리 등 도우미 함수
types/ : 인터페이스나 타입 정의 모아두기
services/ : axios 또는 fetch로 API 호출하는 함수

Vite + TypeScript 프로젝트 생성

Vite 는 CRA보다 훨씬 빠르게 실행되며, 기본 설정도 간편하다.
TypeScript 도 공식 지원하므로 함께 설정하는 게 좋다.

1. 프로젝트 생성

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install

--template react-ts 옵션으로 TypeScript + React 설정이 한 번에 끝난다.

2. 폴더 정리

기본 구조는 이렇게 생겼다:

my-react-app/
├── public/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   └── vite-env.d.ts
├── index.html
├── tsconfig.json
├── vite.config.ts

src 폴더 안에 필요한 디렉토리들 (components, pages, hooks 등)을 추가하며 구조를 잡아나가면 된다.

주요 설정 파일 살펴보기

tsconfig.json

타입스크립트 관련 옵션들을 설정할 수 있다.

예시:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@pages/*": ["pages/*"]
    },
    "strict": true,
    "moduleResolution": "node"
  }
}

baseUrl과 paths를 설정하면 상대경로 대신
@components/, @pages/처럼 절대경로로 import할 수 있어 코드 가독성이 높아진다.

vite.config.ts

Vite 설정 파일이며, alias를 설정해두면 유용하다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@pages': path.resolve(__dirname, './src/pages')
    }
  }
})