React 비용 추적기 앱 구축

소개

이 튜토리얼에서는 React를 사용하여 비용 추적기 웹 애플리케이션을 만들어 보겠습니다. 이 프로젝트는 React의 상태 관리, 이벤트 처리 및 동적 목록 업데이트를 이해하는 데 도움이 됩니다. 실용적이고 유용한 애플리케이션을 구축하여 React 개발에 대한 지식을 강화하려는 초보자에게 이상적입니다.

프로젝트 개요

비용 추적기 애플리케이션을 사용하면 사용자는 수입과 지출을 추적할 수 있습니다. 수입, 지출, 총 잔액을 분류하고 계산하여 재무 데이터 관리에 도움을 줍니다. 이 프로젝트는 상태를 관리하고 사용자 입력을 효율적으로 처리하기 위해 React를 사용하는 방법을 보여줍니다.

특징

• 거래 추가: 사용자는 수입 또는 지출 거래를 추가할 수 있습니다.
• 잔액 추적: 사용자는 총 잔액을 확인하고 변경 사항을 동적으로 추적할 수 있습니다.
• 거래 삭제: 사용자는 목록에서 거래를 삭제할 수 있습니다.
• 로컬 저장소: localStorage를 사용하여 페이지를 다시 로드해도 트랜잭션이 유지됩니다.

사용된 기술

• React: 사용자 인터페이스를 구축하고 구성요소 상태를 관리합니다.
• CSS: 애플리케이션 스타일을 지정합니다.
• JavaScript: 애플리케이션의 핵심 로직을 처리합니다.

프로젝트 구조

프로젝트 구조는 일반적인 React 프로젝트 레이아웃을 따릅니다.

├── public
├── src
│   ├── components
│   │   ├── TransactionList.jsx
│   │   ├── TransactionItem.jsx
│   │   ├── AddTransaction.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

주요 구성 요소

• TransactionList.jsx: 트랜잭션 목록을 표시하고 관리합니다.
• TransactionItem.jsx: 개별 거래를 나타냅니다.
• AddTransaction.jsx: 새로운 거래(수입 또는 지출) 추가를 처리합니다.

코드 설명

TransactionList 구성 요소

이 구성 요소는 거래 표시 및 모든 거래 상태 관리를 담당합니다.

import { useState, useEffect } from "react";
import TransactionItem from "./TransactionItem";

const TransactionList = () => {
  const [transactions, setTransactions] = useState([]);

  useEffect(() => {
    const savedTransactions = JSON.parse(localStorage.getItem("transactions")) || [];
    setTransactions(savedTransactions);
  }, []);

  useEffect(() => {
    localStorage.setItem("transactions", JSON.stringify(transactions));
  }, [transactions]);

  const deleteTransaction = (index) => {
    const newTransactions = transactions.filter((_, i) => i !== index);
    setTransactions(newTransactions);
  };

  return (
    <div className="transaction-list">
      <h2>Transaction History</h2>
      <ul>
        {transactions.map((transaction, index) => (
          <TransactionItem
            key={index}
            transaction={transaction}
            deleteTransaction={deleteTransaction}
          />
        ))}
      </ul>
    </div>
  );
};

export default TransactionList;

TransactionItem 구성요소

TransactionItem 구성 요소는 삭제 옵션을 포함하여 개별 거래를 나타냅니다.

const TransactionItem = ({ transaction, deleteTransaction }) => {
  const sign = transaction.amount < 0 ? "-" : "+";
  return (
    <li className={transaction.amount < 0 ? "expense" : "income"}>
      {transaction.text} 
      <span>{sign}${Math.abs(transaction.amount)}</span>
      <button onClick={deleteTransaction}>Delete</button>
    </li>
  );
};

export default TransactionItem;

AddTransaction 구성요소

이 구성요소는 새로운 거래 추가를 관리하여 사용자가 수입 또는 지출 데이터를 입력할 수 있도록 합니다.

import { useState } from "react";

const AddTransaction = ({ addTransaction }) => {
  const [text, setText] = useState("");
  const [amount, setAmount] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    const transaction = { text, amount: +amount };
    addTransaction(transaction);
    setText("");
    setAmount("");
  };

  return (
    <div>
      <h2>Add New Transaction</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Enter description"
        />
        <input
          type="number"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          placeholder="Enter amount"
        />
        <button type="submit">Add Transaction</button>
      </form>
    </div>
  );
};

export default AddTransaction;

앱 구성요소

App.jsx는 애플리케이션의 루트 역할을 하며 TransactionList 및 AddTransaction 구성 요소를 렌더링합니다.

import { useState } from "react";
import TransactionList from './components/TransactionList';
import AddTransaction from './components/AddTransaction';
import './App.css';

const App = () => {
  const [transactions, setTransactions] = useState([]);

  const addTransaction = (transaction) => {
    setTransactions([...transactions, transaction]);
  };

  return (
    <div className="app">
      <h1>Expense Tracker</h1>
      <TransactionList transactions={transactions} />
      <AddTransaction addTransaction={addTransaction} />
<div className="footer">
          <p>Made with ❤️ by Abhishek Gurjar</p>
        </div>
    </div>
  );
};

export default App;

CSS 스타일링

CSS는 애플리케이션이 깔끔하고 사용자 친화적으로 보이도록 보장합니다.

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

.app {
  width: 400px;
  margin: 50px auto;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
}

input {
  width: calc(100% - 10px);
  padding: 5px;
  margin-bottom: 10px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.transaction-list ul {
  list-style: none;
  padding: 0;
}

.transaction-list li {
  background-color: #f9f9f9;
  margin: 5px 0;
  padding: 10px;
  border-left: 5px solid green;
}

.transaction-list li.expense {
  border-left: 5px solid red;
}

.transaction-list span {
  float: right;
}

button {
  float: right;
  background-color: red;
  color: white;
  padding: 5px;
}
.footer{
    text-align: center;
    margin: 40px;
}

설치 및 사용법

시작하려면 저장소를 복제하고 종속성을 설치하세요.

git clone https://github.com/abhishekgurjar-in/expense-tracker.git
cd expense-tracker
npm install
npm start

애플리케이션은 http://localhost:3000에서 실행되기 시작합니다.

라이브 데모

여기에서 비용 추적기의 라이브 데모를 확인하세요.

결론

Expense Tracker 프로젝트는 React에서 목록과 상태를 효과적으로 관리하는 방법을 보여줍니다. localStorage를 사용하여 영구 데이터 저장소가 포함된 동적 애플리케이션을 구축하는 방법을 배울 수 있는 좋은 방법입니다.

크레딧

• 영감: 사용자가 금융 거래를 추적할 수 있도록 돕는 아이디어로 제작되었습니다.

작가

Abhishek Gurjar는 실용적이고 기능적인 웹 애플리케이션 제작에 열정을 쏟는 헌신적인 웹 개발자입니다. GitHub에서 그의 프로젝트를 더 확인해 보세요.

위 내용은 React 비용 추적기 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!