📚금일 학습 내용 KPT

나이 계산기 input, 연도별 2월에 대한 내용 계산
오랜만에 써본 useEffect, useState

📌Keep

• 즐겁게 코딩하기
• 코딩 매일하기

❗️Problem

• 아침 시간을 더 잘 활용해보기

📍Try

• 로직을 더 세세하기 짜기
• 리액트에서 파일 분리, 컴포넌트 분리에 대해서 학습, 적용해보기

🥽React

로토님의 강의 후 사용해본 리액트의 기능들

간단히 후기를 말하자면 엄청 편하다. 바닐라JS에서 하던 this.state, setState가 알아서 된 상태이고 더 발전된 상태로 존재하고 있으니..

아래와 같이 사용될 상태들을 설정해주고

  const [selectedYear, setSelectedYear] = useState(currentYear);
  const [selectedMonth, setSelectedMonth] = useState(1);
  const [selectedDay, setSelectedDay] = useState(1);
  const [koreanAge, setKoreanAge] = useState(null);

화면이 바뀌고 상태가 바뀔 때 마다 값이 변경된 계산된 날짜를 표기해주어야 해서 useEffect를 사용해서 계산하고 표기하는 로직을 함수화해서 지정해주었다.

  useEffect(() => {
    calculateKoreanAge();
  }, [selectedMonth, selectedYear, selectedDay]);

그리고 2월의 경우에는 날짜가 다른 날보다 적기도 하고 윤년에 의해 매년 값이 다를 수 있기때문에 해당 년도와 월을 선택하면 날짜를 다시 그려주는 로직으로 구현하였다.

      <select id="day" value={selectedDay} onChange={handleDayChange}>
        {Array.from({ length: new Date(selectedYear, selectedMonth, 0).getDate() }, (_, index) => index + 1).map(
          (day) => (
            <option key={day} value={day}>
              {day}
            </option>
          )
        )}
      </select>

📖소회

오랜만에 문화생활을 했다! 서울 구경도 많이 하고... 그리고 분위기 좋은 카페 들어가서 얘기도 하다가 1시간 조금 넘게 코딩을 하기도 했다. 즐겁지만 매우 피곤하다.
내일은 집에서 개인 프로젝트에 조금 더 힘써보도록 해야겠다! 그리고 중간중간 코테랑 노션도 건드려보자

내일도 가보자~🔥
TIL 작성 소요시간 약 20분