[React]클래스 컴포넌트로 계산기 앱 구현해보기

리액트를 처음 접해봐서
컴포넌트 구분, props,state 등등 문법을 익히기 위해 간단히 구현해 볼 것이다.

현재 class보다는 함수형 컴포넌트를 많이 쓰는 추세이지만,다른 강의에서도 클래스형 컴포넌트로 구현할 줄 아는게 좋다고 해서 우선 클래스 컴포넌트로 구현해보자.

폴더 구조는 다음과 같다.

1] ExpenseForm.js

전체적인 Form형태의 코드

import React, { Component } from "react";
import "./ExpenseForm.css";
import { MdSend } from "react-icons/md";

export class ExpenseForm extends Component {
  render() {
    return (
      <form>
        <div className="form-center">
          <div className="form-group">
            <label htmlFor="charge">지출 항목</label>
            <input
              type="text"
              className="form-control"
              placeholder="예)렌트비"
              id="charge"
              name="charge"
            />
          </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">
          제출
          <MdSend className="btn-icon" />
        </button>
      </form>
    );
  }
}

export default ExpenseForm;

2] ExpenseList.js

Form 안에 큰 틀인 List 구조.

import React, { Component } from "react";
import "./ExpenseList.css";
import ExpenseItem from "./ExpenseItem";
import { MdDelete } from "react-icons/md";
export class ExpenseList extends Component {
  render() {
    console.log(this.props.initialExpenses);
    return (
      <>
        <ul className="list">
          {this.props.initialExpenses.map((expense) => {
            return (
              <ExpenseItem
                expense={expense}
                key={expense.id}
                handleDelete={this.props.handleDelete}
              />
            );
          })}
        </ul>
        <button className="btn">
          목록 지우기
          <MdDelete className="btn-icon" />
        </button>
      </>
    );
  }
}

export default ExpenseList;

이때, map함수를 사용해 배열에 할당하고 props로 App.js로부터 데이터를 받아온다.

3]ExpenseItem.js

import React, { Component } from "react";
import "./ExpenseItem.css";
import { MdEdit } from "react-icons/md";
import { MdDelete } from "react-icons/md";
export class ExpenseItem extends Component {
  render() {
    return (
      <li className="item">
        <div className="info">
          <span className="expense">{this.props.expense.charge}</span>
          <span className="amount">{this.props.expense.amount}</span>
        </div>
        <div>
          <button className="edit-btn">
            <MdEdit />
          </button>
          <button
            className="delete-btn"
            onClick={() => this.props.handleDelete(this.props.expense.id)}
          >
            <MdDelete />
          </button>
        </div>
      </li>
    );
  }
}

export default ExpenseItem;

4] APP.JS

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expenses: [
        { id: 1, charge: "렌트비", amount: 1600 },
        { id: 2, charge: "교통비", amount: 700 },
        { id: 3, charge: "식비", amount: 1200 },
      ],
    };
  }

  handleDelete = (id) => {
    console.log(id);
    const newExpenses = this.state.expenses.filter(
      (expense) => expense.id !== id
    ); //새로운 배열인 newExpenses에 내가 삭제하려는 목록의 id와 기존 목록의 id가 같지 않는 것들로만 이루어진 목록을 생성.
    console.log(newExpenses);
    this.setState({ expenses: newExpenses }); //기본배열에 새롭게 변한 값 부여.
  };

  render() {
    return (
      <main className="main-container">
        <h1>예산 계산기</h1>
        <div
          style={{ width: "100%", backgroundColor: "white", padding: "1rem" }}
        >
          {/* Expense Form */}
          <ExpenseForm />
        </div>

        <div
          style={{ width: "100%", backgroundColor: "white", padding: "1rem" }}
        >
          {/* Expense List */}
          <ExpenseList
            initialExpenses={this.state.expenses} 
            handleDelete={this.handleDelete}
          />
        </div>

        <div
          style={{ display: "flex", justifyContent: "end", marginTop: "1rem" }}
        >
          <p style={{ fontSize: "2rem" }}>
            총지출:
            <span>원</span>
          </p>
        </div>
      </main>
    );
  }
}
export default App;