react-native-calendars에서 날짜 점프 구현하기

 

 

react-native-calendars 사용 중에 오늘 날짜로 이동하는 기능을 구현하려 했다.

'오늘로' 버튼을 누를 때마다 todayString이라는 오늘 날짜가 업데이트 되도록 했다.

Calendar 컴포넌트에서 current props에 state로 관리 중인 todayString를 넣어봤지만, 달력 이동이 안됐다.

const [todayString, setTodayString] = useState('');

return (
   <Calendar
      current={todayString}
      key={todayString}
   />
);

 

이 문제를 해결하기 위해서 key prop을 위한 state를 하나 더 만들었다. current prop 대신에 key prop에 변화되는 값을 주어, '오늘로' 버튼을 누를 때마다 오늘 날짜로 캘린더가 리렌더링 되도록 하였다.

const [todayString, setTodayString] = useState('');
const [calendarKey, setCalendarKey] = useState(0);

return (
   <View>
      <TouchableOpacity
         onPress={() => { setCalendarKey(Math.random()); }}
      >
         <Text>오늘로</Text>
      </TouchableOpacity>
      <Calendar
         current={todayString}
         key={calendarKey}
      />
   </View>
);