예산 계산기 - React CRUD 앱

위의 사진과 같은 예산 계산기 앱을 React와 TypeScript로 구현했습니다.

구현 조건

• 최대한 컴포넌트 나누기
• 폴더 이름 / 변수명 명확하게 만들기

기능

• ✅ 지출 항목 추가: 항목명과 비용을 입력하여 새로운 지출 추가
• ✅ 지출 목록 조회: 등록된 모든 지출 항목을 목록으로 표시
• ✅ 지출 항목 수정: 기존 지출 항목의 이름과 금액을 인라인으로 편집
• ✅ 지출 항목 삭제: 개별 지출 항목 삭제 또는 전체 목록 삭제
• ✅ 총 지출 계산: 모든 지출의 합계를 실시간으로 표시

컴포넌트 구조

src/
├── components/
│   ├── ExpenseForm/          # 지출 입력 폼 컴포넌트
│   │   ├── ExpenseForm.tsx
│   │   └── ExpenseForm.css
│   ├── ExpenseList/          # 지출 목록 컴포넌트
│   │   ├── ExpenseList.tsx
│   │   └── ExpenseList.css
│   └── ExpenseItem/          # 개별 지출 항목 컴포넌트
│       ├── ExpenseItem.tsx
│       └── ExpenseItem.css
├── types/
│   └── expense.ts            # 타입 정의
├── App.tsx                   # 메인 앱 컴포넌트
├── App.css
├── index.tsx
└── index.css

사용 기술

• React 18 - 사용자 인터페이스 구축
• TypeScript - 타입 안정성
• CSS3 - 스타일링
• React Hooks - 상태 관리

실행 방법

# 의존성 설치
npm install

# 개발 서버 실행
npm start

# 빌드
npm run build

앱이 실행되면 http://localhost:3000에서 확인할 수 있습니다.