리액트네이티브에서 Calendar 구현
최종 구현 모습
캡스톤디자인에서 감정다이어리를 구현하는데, 각 날짜에 이모티콘을 넣거나, 헤더에 다른 버튼을 두거나 해야했다. 처음엔 쉽게 그냥 구현되겠지 싶었는데 생각보다 react-native-calendars 라이브러리가 커스텀하는게 꽤나 어려웠다.
초기에는 이런 형태로 import 된다.
큰 구현 목표
- 날짜에 이모티콘 넣기
- 선택된 날짜 테두리로 표시하기
- Header를 커스텀하여 좌측에선 날짜이동, 우측에선 버튼을 눌러 기능활용이 가능하도록 구현
날짜에 이모티콘 및 선택된 날짜 테두리로 표시하기
우선 날짜에 이모티콘을 넣거나 선택된 날짜를 테두리로 표시하기 위해서는 날짜를 나타내는 Day Component를 변경해야 했다. Calendar의 속성 중에, dayComponent라는 속성이 있는데, 이것을 통해 변경할 수 있었다.
해당 속성에서 가져올 수 있는 인자값은 date, state, marking이었는데, date에는 날짜들이 들어있고, state는 disable상태인지 today인지에 관한 정보가 들어있었다.
우선 기존 방식은 TouchableOpacity와 그 내부요소로 이루어진 Day Component였던것같다. 나는 여기에 추가로 이모지를 넣고자 했기때문에 View로 TouchableOpacity와 Text를 감싸주었다. 나중에는 저 Text 태그 내에 이모지를 날짜에 맞게 동적으로 넣어줄 예정이다.
marking은 Calendar에 markedDates라는 속성이 있는데, markedDates에 ['2024-05-24']: {스타일값} 이렇게 들어있다면 해당 날짜와 동일한 Day Component에 스타일값이 marking에 들어가 있었다. 아래 사진을 보면 어떻게 활용했는지 알 수 있다.
위와 같은 코드를 적용하면 아래와 같은 결과가 나온다.
커스텀 헤더
이제는 상단에 있는 저 화살표와 달(month)을 Custom Header로 만들고자 했다.
theme 속성에 위 사진처럼 'stylesheet.calendar.header' : { header : {} } 을 통해 강제로 캘린더의 헤더 속성에 접근할 수 있었다.
이렇게 상단부분을 설정할 수 있는 스타일속성인데, 여기에 접근하는 순간 기존에 있던 스타일들이 전부 풀린다. 그래서 화살표와 달(month)이 왼쪽에 치우쳐진 Column 스타일로 변경이 된다. 나는 이곳에 backgroundColor를 바꾸고 flexDirection:'row'를 통해 다시 가로 스타일로 만들어주었다.
그 외에도 나만의 화살표 디자인을 Expo Icon 라이브러리를 통해 넣어주었다.
나는 기존에 버튼 뿐만 아니라 새로운 버튼들도 추가하고 싶었다. 근데 상단 헤더를 원하는대로 커스텀하는 속성이 없길래, 저 화살표들을 커스텀하여 버튼을 추가적으로 구현하였다. 솔직히 온전한 방법은 아니고, 그냥 이런 방법도 있구나 하는 정도로만 생각하면 될 것 같다.
이처럼 CalenderButtons 컴포넌트를 정의하고, 얘네를 우측화살표에 position:'absolute'를 사용하여 강제로 붙여버렸다.
최종적으로 아래와 같은 결과물이 나왔다.
마무리
이제 캘린더의 대략적인 UI는 완성이 되고 있다. 이제 AsyncStorage를 통해 각 날짜마다 일기 및 이모지를 저장해주어야 한다.
