[React.js] 버튼 클릭 시 동적으로 날짜 변경

1. 구현 기능 정의

- 페이지 렌더링 시 현재 년/월 정보를 화면에 출력

- 사용자가 버튼 클릭시 현재 월이 증가/감소하여 화면에 리렌더링

 

2. 구현 과정

- 예시 데이터

export const mockData = [
    {
        id: 1,
        createdDate: new Date("2024-06-10").getTime(),
        emotionId: 1,
        content: "1번 일기 내용",
    },
    {
        id: 2,
        createdDate: new Date("2024-06-15").getTime(),
        emotionId: 2,
        content: "2번 일기 내용",
    },
    {
        id: 3,
        createdDate: new Date("2024-05-28").getTime(),
        emotionId: 3,
        content: "3번 일기 내용",
    },
]

 

- 월 증가/감소 버튼 구현

• 버튼 컴포넌트

import "./Button.css";

const Button = ({ text, type, onClick }) => {
  return (
    <button className={`Button Button_${type}`} onClick={onClick}>
      {text}
    </button>
  );
};

export default Button;

 

• Header 컴포넌트

import "./Header.css"

const Header = ({ title, leftChild, rightChild }) => {
  return (
    <header className="Header">
        <div className="header_left">{leftChild}</div>
        <div className="header_center">{title}</div>
        <div className="header_right">{rightChild}</div>
    </header>
  )
}

export default Header;

 

• Home 컴포넌트

import { useState } from "react";
import Button from "../components/Button";
import DiaryList from "../components/DiaryList";
import Header from "../components/Header";
import { getMonthlyData } from "../util/DateUtil";

const Home = () => {

  // 현재 날짜
  const [pivotDate, setPivotDate] = useState(new Date());

  // 월 증가 함수
  const onIncreaseMonth = () => {
    setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1))
  }

  // 월 감소 함수
  const onDecreaseMonth = () => {
    setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() - 1))
  }

  return (
    <div>
      <Header
        title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth() + 1}월`}
        leftChild={<Button text={"<"} onClick={onDecreaseMonth}/>}
        rightChild={<Button text={">"} onClick={onIncreaseMonth}/>}
      />
      <DiaryList />
    </div>
  );
};

export default Home;

 

3. 결과