[react] weekly to-do-list 만들기1

기획

- 오늘 할 일을 기록하고, 체크하고, 저장할 수 있는 to-do-list 어플리케이션 만들기

- 대강 급하게 만들어 본 UI는 아래와 같음

 

-실제로 사용할 수 있는 걸 만들고 싶어서 weekly로 볼 수 있게 작성했으며,

firebase를 이용해서 데이터를 클라우드에 저장하고 불러오고자 한다.

 

 

기술스택

 

javascript react

firebase

 

 

구현

 

1. 만들고자 하는 폴더에 들어가서 npx create-react-app to-do-list 를 작성한다!

2. App js에 WeeklyCalander 컴포넌트와 와 TodoList 컴포넌트를 만든다.

import "./App.css";
import TodoList from "components/ToDoList";
import WeeklyCalander from "components/WeeklyCalander";
import React, { useState } from "react";
function App() {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const getSelectedDate = (date) => {
    setSelectedDate(date);
  };
  return (
    <div className="App">
      <WeeklyCalander getSelectedDate={getSelectedDate}></WeeklyCalander>
      <TodoList selectedDate={selectedDate}></TodoList>
    </div>
  );
}

export default App;

 

 

WeeklyCalandar 구현하기

일단 기능만 넣으려고 대충 만듦

1. 우선 현재 주를 가져올 함수를 만든다.

const getWeekDays = (startDate) => {
    const weekdays = ["일", "월", "화", "수", "목", "금", "토"];
    const weekDays = [];
    for (let i = 0; i < 7; i++) {
      const currentDate = new Date(startDate);
      currentDate.setDate(startDate.getDate() - startDate.getDay() + i);
      weekDays.push({
        day: weekdays[i],
        date: currentDate,
      });
    }

    return weekDays;
  };

 

2. map 함수로 출력해준다.

   <div style={{ display: "flex" }}>
        {getWeekDays(selectedDate).map((dayInfo) => (
          <div style={{ width: "100px" }} key={dayInfo.day}>
            <p>{dayInfo.day}</p>
            {isToday(dayInfo.date) ? (
              <button
                onClick={() => {
                  handleDateChange(dayInfo.date);
                }}
                className="today-marker"
              >
                오늘: {dayInfo.date.getMonth() + 1}/{dayInfo.date.getDate()}
              </button>
            ) : (
              <button
                onClick={() => {
                  handleDateChange(dayInfo.date);
                }}
              >
                {dayInfo.date.getMonth() + 1}/{dayInfo.date.getDate()}
              </button>
            )}
      </div>

 

3. 날짜를 선택할 수 있어야 하니 관련 state와 함수를 추가하여, button tag에 맵핑한다.

각각의 날짜 버튼을 누르면 그 날짜가 선택돼서 selectedDate 에 저장된다.

 

  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

 

4. previous, next button 을 만들고 함수를 추가한다.

  //js
  
  const handlePrevWeek = () => {
    const newStartDate = new Date(selectedDate);
    newStartDate.setDate(newStartDate.getDate() - 7);
    setSelectedDate(newStartDate);
  };

  const handleNextWeek = () => {
    const newStartDate = new Date(selectedDate);
    newStartDate.setDate(newStartDate.getDate() + 7);
    setSelectedDate(newStartDate);
  };



//jsx
<div className="week-navigation">
    <button onClick={handlePrevWeek}>&lt; 이전 주</button>
    <button onClick={handleNextWeek}>다음 주 &gt;</button>
</div>

 

 

TO-DO-LIST 추가는 다음 시간에 ...