78일차 (1) - React (화면에 실시간 렌더링 안되는 문제 해결, 버튼 추가, 값 추가시 값에 따른 차트바 동적 렌더링)

데이터 추가시 화면에 실시간 렌더링 안되는 문제 해결 및 코드 리팩토링

• console에는 배열에 데이터가 추가되지만 화면에는 실시간으로 렌더링 되지않았다. 이를 해결하기위해 배열을 상태변수로 관리

import "./App.css";
import React, {useState} from "react";
import ExpenseList from "./components/expenses/ExpenseList";
import NewExpense from "./components/new-expense/NewExpense";

// 서버에서 데이터를 받아오는 곳
const App = () => {
  // 서버에서 지출항목 JSON 배열을 응답받음
  const expenses = [
    {
      title: "치킨먹음",
      price: 30000,
      date: new Date(2024, 6 - 1, 3),
    },
    {
      title: "족발먹음",
      price: 40000,
      date: new Date(2023, 12 - 1, 7),
    },
    {
      title: "헬스장등록",
      price: 300000,
      date: new Date(2024, 6 - 1, 12),
    },
    {
      title: "파파존스",
      price: 40000,
      date: new Date(2022, 3 - 1, 4),
    },
    {
      title: "파리채",
      price: 1500,
      date: new Date(2023, 1 - 1, 2),
    },
  ];

  // 배열을 상태변수로 관리 (화면에 실시간 렌더링 되기 위함)
  // -> expenses 대신 상태변수인 expenseList로 관리
  const [expenseList, setExpenseList] = useState(expenses)

  // ExpenseForm에게 내려보낼 함수
  const onAddExpense = (userInput) => {
    console.log('App.js가 내려보낸 함수 호출!');
    
    expenseList.push(userInput);
    
    // setter로 변경감지 하려면 이전것 대신 새로운 배열을 넣어주어야함
    // ...expenseList : expenseList 복사본
    // [...expenseList, userInput] : 복사본에 userInput 추가
    setExpenseList([...expenseList, userInput]);

    console.log(expenseList);
  }

  return (
    <>
      <NewExpense onSave={onAddExpense} />
      <ExpenseList expenses={expenseList} />
    </>
  );
};

export default App;

• 초기데이터로 expenses를 넣고 expenseList로 관리

---

버튼 추가

• 새로운 지출 추가 라는 버튼을 누를시 지출값들을 입력할 수 있는 창으로 이동
• 또한 지출값들을 입력할 수 있는 창에서 cancel 누를 시 새로운 지출 추가 버튼이 나오게함

NewExpense.js

import React, {useState} from 'react';
import './NewExpense.css';
import ExpenseForm from './ExpenseForm';

const NewExpense = ({ onSave }) => {
  
  const [toggle, setToggle] = useState(false);
  // 클릭했을 때 발생하는 이벤트 핸들러
  const startInsertModeHandler = (e) => {
    setToggle(true);
  };
  const stopInsertModeHandler = (e) => {
    setToggle(false);
  };

  let newExpenseContent = <button onClick={startInsertModeHandler}>새로운 지출 추가하기</button>
  if (toggle) {
    newExpenseContent = <ExpenseForm onAdd={onSave} onCancel={stopInsertModeHandler} />;
  }

  return (
    <div className="new-expense" >
      {newExpenseContent};
    </div>
  );
};

export default NewExpense;

---

값 추가시 값에 따른 차트바 동적 렌더링

• 해당 연도의 모든 지출데이터배열에서 월별로 지출액을 합산하여 chartDataPoints배열에 value를 누적 저장하는 것이 목표
  -> 연도별로 필터링된 배열을 ExpenseList.js 에서 ExpenseChart.js로 내려줌
  -> ExpenseChart.js에서는 forEach문을 돌려서 월에 따른 값의 누적합을 구함
  -> ExpenseChart.js에서 Chart.js로 dataPoints배열에서 12개 요소의 value를 합산하여 연도 지출총액을 계산, 그리고 각 Chart바에 해당월지출총액 / 연도지출총액 비율을 전달