예산 계산기 앱 만들기(컴포넌트 생성)

예산 계산기 앱 만들기(App.js)

이 앱은 App Component 부모 컴포넌트 안에 ExpenseForm ExpenseList 자녀 컴포넌트가 있으며 ExpenseList 컴포넌트 안에 여러 Expenseitem 자녀 컴포넌트들로 이루어져 있습니다.

1. 원래 있던 부분 지우기
   App.css, App.js, index.css 파일 안에있는 내용 전부 지우기

2. 클래스형 컴포넌트로 App 컴포넌트 UI 만들기

import { Component } from "react";
import "./App.css";
import ExpenseForm from "./components/ExpenseForm";
import ExpenseList from "./components/ExpenseList";

class App extends Component {
  render() {
    return (
      <main className="main-container">
        <h1>예산 계산기</h1>

        <div style={{ width: "100%", backgroundColor: "white", padding: "1rem" }}>
          {/* {Expense From} */}
          <ExpenseForm />
        </div>
        <div style={{ width: "100%", backgroundColor: "white", padding: "1rem" }}>
          {/* {Expense List} */}
          <ExpenseList />
        </div>
        <div style={{ display: "flex", justifyContent: "end", marginTop: "1rem" }}>
          <p style={{ fontSize: "2rem" }}>
            총지출:
            <span>원</span>
          </p>
        </div>
      </main>
    );
  }
}

export default App;

3. ExpenseForm 컴포넌트 만들기

import React, { Component } from "react";
import "./ExpenseForm.css";

export class ExpenseForm extends Component {
  render() {
    return (
      <from>
        <div className="form-center">
          <div className="form-group">
            <label htmlFor="charge">지출항목</label>
            <input 
      			type="text" 
      			className="form-control" 
      			id="charge" 
      			name="charge" 
      			placeholder="예) 렌트비" 
      		/>
          </div>
          <div className="form-group">
            <label htmlFor="amount">비용</label>
            <input 
              type="number" 
              className="form-control" 
              id="amount" 
              name="amount" 
              placeholder="예) 100" 
            />
          </div>
        </div>
        <button type="submit" className="btn">
          제출
        </button>
      </from>
    );
  }
}

export default ExpenseForm;

.form-center {
  display: flex;
}
.form-group {
  padding: 1rem 0.75rem;
  flex: 1;
}
label {
  display: block;
  color: var(--secondColor);
}
.form-control {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--secondColor);
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 16px;
  margin: 0 0 8px 0;
  padding: 0;
}

4. ExpenseList 컴포넌트 만들기

import React, { Component } from "react";
import "./ExpenseList.css";

export class ExpenseList extends Component {
  render() {
    return (
      <React.Fragment>
        <ul className="list">{/* {Expense Item} */}</ul>
        <button className="btn">목록지우기</button>
      </React.Fragment>
    );
  }
}

export default ExpenseList;

.list {
  list-style: none;
  border: none;
  padding: 0;
}

4. ExpenseItem 컴포넌트 만들기

import React, { Component } from "react";
import "./ExpenseItem.css";

export class ExpenseItem extends Component {
  render() {
    return (
      <li className="item">
        <div className="info">
          <span className="expense"></span>
          <span className="amount"> 원</span>
        </div>
        <div>
          <button className="edit-btn">수정</button>
          <button className="clear-btn">삭제</button>
        </div>
      </li>
    );
  }
}

export default ExpenseItem;

.item {
  background-color: var(--mainWhite);
  line-height: 1.5rem;
  padding: 10px 20px;
  margin-bottom: 1rem;
  border: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  transition: all 0.3s linear;
}

.item:hover {
  width: 100%;
  transform: scale(1.02);
}

.info {
  flex: 0 0 60%;
  display: flex;
  justify-content: space-between;
}

.expense {
  margin-right: 2rem;
}

.amount {
  font-weight: 300;
  font-size: 1rem;
  padding: 1px 3px;
}

.edit-btn,
.clear-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  outline: none;
  cursor: pointer;
}

.clear-btn {
  color: var(--mainRed);
}
.edit-btn {
  color: var(--mainGreen);
}