캘린더 클론코딩 특정 날짜 눌렀을 때, 달력이 반응이 오도록 하기

1. 개요도

상태 변수가 추가되었다. 

상태 변수는 renderItem 의 on Press 을 이용해 

사용자가 특정 날짜 누를 때 마다 상태 변수가 최신화 되도록 세팅한다. 

 

이렇게 세팅된 상태변수는 총 3가지에서 쓰인다. 

먼저 달력에 들어갈 dayjs 변수들을  배열로 돌려주던 utill.js에 이제 now(현재시간)을 안 넣고, 해당 상태 변수를 넣는다. 

이렇게 되면 사용자가 달력 내 전월이나 내월의 날짜를 클릭 했을 시 그 날짜의 달로 넘어가는 기능이 구현된다. 

왜냐하면 눌러진 날짜가 속한 달을  기준으로 달력에 들어갈 값의 배열을 다시 뽑기 때문이다.

 

두 번째로 renderItem에서 쓰인다.

onPress를 누르면 상태변수가 해당 날짜로 세팅된다. 

isSelected라는 변수에서 상태 변수가 이용되는데, 배열의 원소(날짜)와 상태변수의 날짜가 같은지 체크한다. 

같으면 true, 아니면 false 이다. 이는 Columns 에서 true일 경우 해당 날짜 원소의 색깔이 바뀌도록 하기 위해 쓰인다.

 

 

세번째는 Header 부분에서 쓰이고 

달력 맨 윗 상단에 보이는 YYYY.MM.DD 부분이 날짜 누를 때마다 바뀌기 위해 쓰인다. 

날짜 누르면 해당 값으로 상태변수가 바뀌었으니 상태 변수만 가져오면 된다. 

 

Columns 컴포넌트에 disabled와 onPress 추가 

disabled는 TouchableOpacity의 고유 속성으로 클릭할 수 없게 만드는 것이다. 

월,토는 클릭 안해도 되므로 해당 변수를 사용해 조절 한다.

Onpress는 날짜 부분에서만 필요하다. 

 

App.js의 태그에서 해당 속성을 적어주지 않으면, 자동으로 인수로 undifned가 들어감을 이용하여 

날짜 부분의 Column에서는 disabled를 따로 적어주지 않고, 월~ 토 글자 부분에서는 OnPress를 따로 적어주지 않아도 된다.

2. 스스로 해보기

작동 안하면 태그 부분에 인수를 제대로 받았는지 확인해보기 

그것 말고는 스무스하게 구현했다.