달력 클론코딩 (3) 달력 화면 만들기

저번에 만들었던 달력 데이터를 이용해서 

달력 모양으로 화면에 띄우겠다. 

위에 오늘의 날짜 2022.11.24 부분은 아직 구현 안하고, now라는 현재 시각 받아서 진행 하겠음. 

 

 

1. FlatList 를 만들어 화면 띄우기 

data는 저번에 우리가 util.js 에서 만들었던 column을 이용한다. 

여기에는 현재 "년월일 시분초"를 뜻하는 now를 넣었다. 사실 안 넣어줘도 되지만, (why? dayjs()는 현재 년월일 시분초 의미하는데, 인수가 아무것도 넘어오지 않으면 getCalendarColumns 안에 있는 dayjs는 인수를 아무것도 안 받게되기 때문)

일단 넣어준다. data에 colums를 넣으면 이제 renderItem에서 columns의 배열 원소를 차례로 돌면서 어떠한 기능을 처리한다. 

numColumns는 하나의 행에 몇 개의 renderItem 값을 채우고 다음 열로 넘어갈 것인지를 묻는 속성이다.  일주일은 7일 이므로 달력에 한 줄은 7개의 Item이 있으면 된다. 

 

이제 우리가 너무 복잡할 것 같아서 Component 화 시키고 return 밖으로 빼두었던,  renderItem의 기능부분, ListHeaderComponent를 하나씩 알아보겠다. 

 

(1) RenderItem 

renderItem은 date의 원소 하나 하나를 item이란 이름으로 받는다. 이걸 가독성을 높이기 위해 date 란 이름으로 바꿔 준다. 

첫 번째 변수 dayText는 date에서 '일'만 빼서 가져오는 것이다. 

원래 dayjs의 데이터는 "2023-04-04T15:00:00.000Z" 이런식으로 년월일 시분초로 넘어온다. 여기서 일자만 챙겨 온다.

 

두 번째 day는 date에서 요일만 가져온다. dayjs에서 요일은 숫자로 표현되어 '0~6' 까지가  "토~일" 뜻한다. 

세 번째 변수는 Color로 day를 활용해 토인 날짜는 파란색, 일인 날짜는 빨간색으로 칠하게 해준다.

 

마지막 변수인 isCurrentMonth는 boolean 값으로서 해당 날짜가 현재 월에 포함되는지에 따라 참/거짓을 나타낸다. 

달력에서 보면 해당 달이 아니지만 달력에 나타나 있는 경우가 있다.  

여기서는 30 31과 1 2 3 이 그런 것이다. 

 

return 값은 따로 또 컴포넌트화 해서 뺴주었다. 왜냐하면 위에 글자들 일~ 토를 적을 때도 사용될 것이기 때문에  재사용이 있고, 코드가 길어 가독성이 떨어지기 때문이다. 

이미 text, color, opacity에 관한 것은 처리를 해주었으니 그냥 인수로 값을 받아서, 스타일링 해준다음에 집어넣기만 하면 된다.

 

(2) ListHeaderComponent

월화수목금토 부분과 

2022.11.24 부분을 구현하는 공간이다.

 

ㄱ. < 2022.11.24 > 부분

<ArrowButton> 구문은 Icon에 관한 로직이 < > 두 부분에서 중복되어 컴포넌트 화 시켜서 빼준 것이다. 

아이콘을 터치할 수 있게 TouchableOpacity로 감쌌다.

 

ㄴ. 일월화수목금토  부분 

map 함수 이용 해서 0~6까지 차례대로 day에 넣고 , 일~토 문자를 숫자에 맞게 가져오고, 컬러도 가져온다. 

해당 부분도 내용이 길어 컴포넌트화 시켰다. 

App.js 에 더 적기에는 가독성이 안 좋으므로, 이미 import 해놓은 utill.js 에 export default로 함수를 만들어서 수입해오자.

 

아직 잘 모르겠는 점

무엇을 전역변수로 넣고 무엇을 앱() 안쪽에 적는지 기준을 모르겠다.

 

2. 스스로 해보기 

 

(1)주의할 점. CSS 특징

CSS 는 인수와 CSS 속성의 이름이 같을 경우 
그 인수를 속성의 값으로 받는다 

(color) => {<text color/>}
로 가능하다. 

하지만, 
다른 컴포넌트에 값 전달할 때는 이와 별개니까 값을 넣어줘야 한다.

다른 컴포넌트에 전달하는 경우 Color

인수로 받을 경우

(2) props 가 아닌 속성 자체를 인수로 받아 쓸려면, ()안에 {} 를 써줘야 한다.

(3) 월화수목금토일 구현에서 막힘. 

 

a.

이건 틀린어구다 <>를 쓰는 건 태그들 사이에서 <GetDayText/> 도 뭔가를 나타내야 할 때 사용해야하는 것이다. 

여기서는 변수에 데이터로 넣고 있으므로 function 형식으로 넣어야 한다.

 

 

b. 내가 잘 몰랐던 점. 

 

map을 이용해서 루프를 돌려야 한다는 것 까지는 알았는데 루프를 어디야 써야 하는지 몰랐다. 

보통 View에서는 나온 결과값들만 적고, 일처리는 다른 곳에서 해서 보내줘야 한다고 생각했고, 그런 식으로 일 처리를 하는 방법밖에 알지 못했다. 

 하지만, {}가 있음을 간과 했다. 

 

{}을 쓰면 해당 변수의 값을 쓰겠다는 뜻이다. 

여기서는 map 함수 전체의 결과를 쓰겠다는 의미로 {} 로 다 감쌌다. 

return 값이 View안에 쓰일 수 있는 태그임으로, 이와 같이 View 안에서 써도 된다.