[리액트 따라하며 배우기] 달력 프로젝트 React+typescript, styled-components

 

이번 리따배 프로젝트는 달력만들기 입니다.

깃허브 저장소 : https://github.com/jdy0120/frontendproject/tree/master/calender

GitHub - jdy0120/frontendproject

 

윈도우 시계를 누르면 나오는 달력에 영감을 받아 비슷하게 만들고자했습니다.

 

 

11월 1일이 일요일이 아니기 때문에 10월 30,31일 까지 출력된 것을 확인할 수 있습니다.

또 11월 30일이 토요일이 아니기 때문에 12월 1,2,3일까지 출력된 것을 확인할 수 있습니다.

 

코드 구성은 다음과 같습니다.

App.tsx에 Main컴포넌트가 들어가고

 

Main컴포넌트엔 ControlDate컴포넌트+ DateBox컴포넌트가 들어갑니다.

 

ControlDate엔 달력위에 적힌 YYYY.MM과 버튼들을 출력해 주고 1달전,1달후,1년전,1년후 달력을 바꿔주는 기능을 추가했습니다.

 

DateBox컴포넌트엔 실제 그 달의 일수가 출력되는 컴포넌트입니다.

가장위에 '일','월','화','수','목','금','토' 를 출력해주며 그 아래론 일수가 출력되는데

 

당일의 달에 포함된 모든 일수 (1~28,1~30,1~31이 될 수 있겠네요.) 당일의 달 1일 이전 출력해줘야하는 일수, 당일의 달 마지막일 이후 출력해줘야하는 일수를 리스트에 저장했습니다.

 

코드를 보고 이해해주시면 되겠습니다.

위 코드에 의해 2022년 11월의 리스트엔 [30,31,1,2,3,...,29,30,1,2,3]이 Date형식으로 저장되게 됩니다.

 

단순히 일수 숫자를 리스트로 넣어도 편할텐데 Date형식으로 넣으면 번거롭지 않나요?

 - 달력의 확장성을 생각해 Date로 집어넣었습니다. 예를 들어 달력에 일정을 추가하는 기능이 있겠습니다.

추가기능이 생긴다면 코드를 완전히 다시 작성하는 것이 아닌 리스트에 저장된 Date형식 날짜를 활용해 간단히 기능을 구현할 수 있겠다고 생각했습니다.

mapping을 통해 weeks와 allDay를 출력했습니다.

 

 

AllDay컨테이너

각 일수를 출력해주는 컴포넌트는 Container에 Props를 받아 오늘날짜가 맞는지, 선택한 날짜가 맞는지 등을 확인해 css가 변경됩니다.

위 styled-components코드로 달력의 추가기능을 구현했습니다.

 

위 설명은 굵직한 코드설명입니다.

아래 영상에서 디테일한 코드작성으로 세부적인 코드를 확인하실 수 있습니다.