step3. Cell Table + Counter

 

1. Cell click 이벤트

• cell Component에서 Toggle기능을 구현했다.
• Cell을 클릭하면 done의 상태를 바꿔주고 App Component로 전달한다. 

const Cell = memo(({ days, onCountCell }) => {
    const [done, setDone] = useState(false);

    const onClickCircle = () => {
        setDone(prev => !prev)
        onCountCell(done);
      };

    return (
        <>
            <Circle onClick={onClickCircle} done={done}>
                <em className="days">{days}</em>
            </Circle>
        </>
    )
});

• App 컴포넌트에서는 받아온 done을 가지고 counter 기능을 구현한다.
• 조건에 맞으면 대시보드의 카운터가 1씩 증가하고, 아니면 경고창이 뜨고, 확인을 누르면 카운터가 1 감소하면서 색도 지워진다. 
• ** 근데 여기서 done이 true로 넘어와야하는데 false로 넘어오는 이유는....?????????? 

  const onCountCell = (done) => {
    if(!done){
      setCount((prevCount) => prevCount + 1);
    } else {
      alert("really?");
      setCount((prevCount) => prevCount - 1);
    }
  }

 

 

2. d-day 구하기 

• form에서 미리 dday를 계산해서 Note 컴포넌트로 받아왔다. 
• 오늘이 포함되어야 하니깐 1을 더해준다. 초기 셋팅값은 d-day : 30일

const getDday = (date) => {
   const startDay = new Date(date);
   const after30Days = getAfter30days(getToday());
   const endDay = new Date(after30Days);

   const gap = startDay.getTime() - endDay.getTime();
   const dDay = Math.floor(gap / (1000 * 60 * 60 * 24)) * -1;

   return dDay + 1;
}

 

3. Edit 기능 구현하기 

• 제일 위기에 봉착했다. 수정 기능 구현하는게 제일 어렵다.
• App 컴포넌트에서 맨 처음initial에 challenge의 state는 다 비어있는 값이다. 

  const [challenge, setChallenge] = useState({
    goal: '',
    startDate: '',
    endDate: '',
    dday: '',
    motivate: ''
  });

• Form에서 입력 후 제출을 하게 되면 입력값을 받아온다. 

  const onSubmitForm = (e) => {
      e.preventDefault(); 
      if(!goal){
         setMessage('목표를 입력해주세요');
         inputRef.current.focus();
      } else {
         onInsertChallenge(goal, startDate, endDate, motivate, dday);
         onToggleModal();
      }
   }

• App 컴포넌트에서 받아온 값으로 challenge를 변경한다. 

  const onInsertChallenge = (goal, startDate, endDate, motivate, dday) => {
    const first = {
      goal,
      startDate,
      endDate,
      dday,
      motivate,
    }
    setChallenge(first);
    setInitial(false);
  }

 

• 그리고 이 받아온 값을 form에 다시 전달해서 초기값으로 넣어준다.
• ** 그래서 goal과 motivate는 구해왔는데, 날짜 구해오는데에서 막혔다.
• 이것만 하면 기본 기능 구현은 거의 끝나간다. 

   const [goal, setGoal] = useState(challenge.goal);
   const [motivate, setMotivate] = useState(challenge.motivate);

 

 

 

 

그래서 오늘의 결과물~

날짜 선택하는 부분이랑 알림창 뜨는 부분은 녹화가 되지 않는다.... 

 

---

 ◻️ 시작 날짜는 가져오지만, 수정은 못하게 하기... 

 ◻️ reset 버튼 만들기

 ◻️ 셀 클릭했을때 참 잘했어요 같은 메세지창이랑, 취소했을 때 경고창 만들기

 ◻️ 30일 지났을 때 종료창 만들기 

 

흐름이 끊기면 안된다...........

리액트는 창을 여기저기 왔다갔다해서 너무 머리아프다..

페이스북은 컴포넌트만 이만개 넘는댔는데 어떻게 관리하는거지??????? 

 

redux 배우는것도 시작해야겠다.