예산 계산기 앱 - 클래스 컴포넌트 방식(1)

시작하기

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

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

        <div style={{width: '100%', backgroundColor:'white', padding: '1rem'}}>
          {/* Expense Form */}
        </div>

        <div style={{width: '100%', backgroundColor:'white', padding: '1rem'}}>
          {/* Expense List */} 
        </div>

        <div style={{display:'flex', justifyContent:'end', marginTop:'1rem'}}>
          <p style={{fontSize:'2em'}}>
            총지출:
            <span >원</span>
          </p>
        </div>
      </main>
    )
  }
}

export default App;

클래스 컴포넌트를 사용해서 작성할 예정입니다.

src폴더 안에 App.js에 위와 같이 작성합니다.

:root {
  --primaryColor: #90A959;
  --secondColor: #E9B872;
  --mainWhite: #fff;
  --mainBlack: #222;
  --mainRed: #C45151;
  --mainGreen: #4CAF50;
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: var(--secondColor);
  color: var(--mainBlack);
}

h1 {
  margin: 1rem 0;
}

src폴더 안에 index.css에 위와 같이 작성합니다.

.main-container {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

 

src폴더 안에 App.css에 위와 같이 작성합니다.

 

ExpenseForm컴포넌트 생성하기

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

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' 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>
      </form>
    )
  }
}

export default ExpenseForm

src폴더 안에 ExpenseForm.js와 ExpenseForm.css 파일을 만듭니다.

ExpenseForm.js파일에 위와 같이 작성합니다.

.form-center {
  display: flex;
}

.form-group {
  padding: 1rem 0.75rem;
  flex: 1;
}

label {
  display: block;
  color: var(--secondColor);
  font-size: 1rem;
  text-transform: capitalize;
}

.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;
}

ExpenseForm.css파일에 위와 같이 작성합니다.

 

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

ExpenseList.js파일에 위와 같이 작성합니다.

react사용하면서 여러 엘리먼트 있으면 반드시 하나의 부모 요소로 감싸줘야 합니다.

보통은 div로 하는데 div가 block특성을 갖춰서 상황에 안 맞는 경우도 있습니다.

이때 React.Fragment혹은 아예 비어놓아도 됩니다.

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

ExpenseList.css파일에 위와 같이 작성합니다.

 

ExpenseForm, ExpenseList컴포넌트를 화면에 연결

src폴더 안에 App.js에 해당 파일을 엘리먼트 방식으로 작성합니다. 그리고 위에서 import해주면 됩니다.

 

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

ExpenseItem.js파일에 위와 같이 작성합니다.

.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 .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;
}

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

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

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

ExpenseItem.css파일에 위와 같이 작성합니다.

 

ExpenseItem컴포넌트를 ExpenseList에 연결

 

ExpenseList.js파일에 ExpenseItem.js파일을 엘리먼트 방식으로 작성합니다. 그리고 위에서 import해주면 됩니다.

 

React Icon

react-icons문서 => react에서 바로 사용할 수 있는 icon들입니다.

npm install react-icons --save

위와 같이 terminal에서 react-icons를 설치합니다.

ExpenseItem.js파일에 icon을 적용합니다.

ExpenseForm.js파일에 icon을 적용합니다.

ExpenseList.js파일에 icon을 적용합니다.

.btn {
  text-decoration: none;
  color: var(--mainWhite);
  background-color: var(--primaryColor);
  text-align: center;
  letter-spacing: 0.5px;
  font-size: 14px;
  outline: 0;
  border: none;
  border-radius: 2px;
  display: block;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  cursor: pointer;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, .12),
    0 1px 2px rgba(0, 0, 0, .24);
  transition: all .3s linear;
  display: flex;
  align-items: center;
}

.btn:hover {
  box-shadow: 
    0 14px 28px rgba(0, 0, 0, .25),
    0 10px 10px rgba(0, 0, 0, .22);
}

.btn-icon {
  margin-left: 0.75rem;
  font-size: 1.2rem;
}

button 스타일을 주기위해 src폴더 안에 index.css파일에 위 내용을 추가합니다.