티스토리 뷰
react-native에서 date-fns 라이브러리는 리액트에서 날짜 및 시간을 매우 쉽고 편리하게 다룰 수 있게 해주는 라이브러리이다.
이 라이브러리는 다양한 날짜 관련 기능을 제공하며, 사용하기 쉽고 가벼운 구조를 가지고 있다.
자세한 사용법은 여기에서 확인하자.
설치는 아래와 같이 설치한다.
npm install date-fns --save
# or
yarn add date-fns
바로 한번 예제 코드를 알아보자.
1.현재 날짜와 시간 표시
import { format } from 'date-fns';
const currentDate = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
console.log('현재 날짜와 시간:', currentDate);
이 코드는 date-fns의 format 함수를 사용하여 현재 날짜와 시간을 'yyyy-MM-dd HH:mm:ss' 형식으로 표시한다.
new Date()를 통해 현재 날짜와 시간을 가져오고, format 함수로 원하는 형식으로 변환한다.
2: 특정 날짜로부터 일주일 후의 날짜 계산
import { addDays } from 'date-fns';
const today = new Date();
const nextWeek = addDays(today, 7);
console.log('오늘로부터 일주일 후:', format(nextWeek, 'yyyy-MM-dd'));
이 코드는 date-fns의 addDays 함수를 사용하여 오늘 날짜로부터 7일 후의 날짜를 계산한다.
new Date()로 오늘 날짜를 얻고, addDays 함수에 오늘 날짜와 추가하고자 하는 일 수(7일)를 전달한다.
그 후 format 함수를 사용하여 날짜를 원하는 형식으로 출력한다.
3. 두 날짜 간의 차이 계산
import { differenceInDays } from 'date-fns';
const startDate = new Date(2024, 0, 1); // 2024년 1월 1일
const endDate = new Date(2024, 0, 15); // 2024년 1월 15일
const diffDays = differenceInDays(endDate, startDate);
console.log('두 날짜의 차이(일):', diffDays);
이 코드는 date-fns의 differenceInDays 함수를 사용하여 두 날짜 사이의 일수 차이를 계산한다.
두 날짜는 new Date(year, month, day) 형식으로 생성되며, differenceInDays 함수에 두 날짜를 인수로 전달한다. 함수는 두 날짜 사이의 일수 차이를 반환한다.
이처럼 date-fns 라이브러리는 다양한 날짜 관련 연산을 쉽게 처리할 수 있게 해준다.
끝!
반응형
'Mobile > react-native' 카테고리의 다른 글
[react-native] useWindowDimensions (0) | 2024.02.06 |
---|---|
[react-native] Animated (0) | 2024.01.26 |
[react-native] uuid (0) | 2024.01.23 |
[react-native] useRef를 사용한 focus() (0) | 2024.01.23 |
[react-native] FloatingButton Template (1) | 2024.01.23 |
Comments
최근에 올라온 글
최근에 달린 댓글
TAG
- redux-thunk
- Promise
- AsyncStorage
- react-native
- redux
- Async
- 인천 구월동 맛집
- 인천 구월동 이탈리안 맛집
- react
- 파니노구스토
- await
- 이탈리안 레스토랑
- 정보보안기사 #실기 #정리
- javascript
- 맛집
- Total
- Today
- Yesterday