티스토리 뷰

Mobile/react-native

[react-native] date-fns

춘햄 2024. 1. 26. 11:15

 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-fnsformat 함수를 사용하여 현재 날짜와 시간을 '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-fnsaddDays 함수를 사용하여 오늘 날짜로부터 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