이 튜토리얼에서는 React를 사용하여 비용 추적기 웹 애플리케이션을 만들어 보겠습니다. 이 프로젝트는 React의 상태 관리, 이벤트 처리 및 동적 목록 업데이트를 이해하는 데 도움이 됩니다. 실용적이고 유용한 애플리케이션을 구축하여 React 개발에 대한 지식을 강화하려는 초보자에게 이상적입니다.
비용 추적기 애플리케이션을 사용하면 사용자는 수입과 지출을 추적할 수 있습니다. 수입, 지출, 총 잔액을 분류하고 계산하여 재무 데이터 관리에 도움을 줍니다. 이 프로젝트는 상태를 관리하고 사용자 입력을 효율적으로 처리하기 위해 React를 사용하는 방법을 보여줍니다.
프로젝트 구조는 일반적인 React 프로젝트 레이아웃을 따릅니다.
├── public ├── src │ ├── components │ │ ├── TransactionList.jsx │ │ ├── TransactionItem.jsx │ │ ├── AddTransaction.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
이 구성 요소는 거래 표시 및 모든 거래 상태 관리를 담당합니다.
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 구성 요소는 삭제 옵션을 포함하여 개별 거래를 나타냅니다.
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;
이 구성요소는 새로운 거래 추가를 관리하여 사용자가 수입 또는 지출 데이터를 입력할 수 있도록 합니다.
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는 애플리케이션이 깔끔하고 사용자 친화적으로 보이도록 보장합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!