hard mode box 개발2

오늘 한 내용

• box update
• box 배열 → object로 변경
• 표에 도장 채우기
• 표에 날짜 분배
• click시 해당 도장 변경

오늘 배운 내용

• box update

• const onSubmit = async (event) => {
      event.preventDefault();
      const hardBox = {
        id: Date.now(),
        title: titleRef.current.value || "",
        color: color,
  };
      formRef.current.reset();
      onAdd(hardBox);
    };

• const addHardBox = (hardBox) => {
      const updated = [...hardBoxes, hardBox];
      setHardBoxes(updated);
    };
  

• 배열 → object로 변경 후 mapping

• const [hardBoxes, setHardBoxes] = useState({
      1: {
        id: "1",
        title: "html 공부하기",
        color: "red",
        startDate: new Date(2021, 11, 15),
        endDate: new Date(2021, 12, 4),
      },
      2: {
        id: "2",
        title: "영어 단어 외우기",
        color: "purple",
        startDate: new Date(2021, 11, 30),
        endDate: new Date(2021, 12, 19),
      },
  })

• {Object.keys(hardBoxes).map((key) => (
            <HardModeBox
              key={key}
              hardBox={hardBoxes[key]}
              updateHardBox={creatOrUpdateHardBox}
            />
          ))}
  

• 해당 표 인덱스에 접근

• function toggleStamp(id) {
      setClicked((stamp) => ({
        ...stamp,
        [id]: !stamp[id],
      }));
    }

 

• new Date() 형식 xxxx-xx-xx 형태로 변경

• new Date().toISOString().substring(0, 10);

캡쳐

 

소감

뜻하지 않게 너무 오래 걸렸다. 날짜를 계산해서 형식을 바꾼 후 mapping 하는 것에서 시간을 엄청 소요했다. 내가 배열과 객체를 제대로 알지 못하고 썼구나 반성하게 되는 시간이었다. 처음에는 표에 할당된 시간이 지나면 자동으로 검은 도장이 찍히도록 만들고 싶었다. 하루종일 어떻게 하면 구현할 수 있을까 고민했지만 답을 찾지 못했다. 어떻게 검색해야 할 지 감조차 오지 않았다. 그래서 다른 방법을 먼저 사용해보기로 했다. 모든 표에 검은 도장을 다 찍어두고 해당 날짜에 도장을 눌러야 바뀔 수 있도록 한다. 물론 아직 도장을 누르면 그 값을 데이터베이스에 어떤 형식으로 저장해야 할 지 답을 찾지 못했다. 열심히 구글링하자...!