[React 라이브러리] 라이브러리 기초
1. 라이브러리란?
라이브러리 = 개발편의를 위한 도구 모음, 공구
framework = 기반 구조까지 잡혀 있는것, 공장
React도 도구모음
이미 잘 만들어둔 도구를 가져다가 쓰면서 React 생태계의 이점을 누리자
필요 > 검색 > 사용법 파악 > 적용
필요
특정 기능이 필요해짐 (직접 구현하기에는 벅참)
더 나은 도구가 필요해짐
검색
필요 그대로를 검색
github, npm trends, 커뮤니티, 기술 블로그
유사한 라이브러리를 검색
사용법 파악
공식문서
github code 검색
기술 블로그 검색
적용
POC(proof of concept)
부분을 적용해보고, 전체를 고민하자
2. moment
react보다 사이즈가 큰 라이브러리....왠만하면 사용하지 말자...(Luxon, dayjs등을 사용하자)
시간과 날짜를 관리하는 라이브러리
Moment.js | Home
Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD"
momentjs.com
Javascript에서는 Date를 사용하다보면 답답할때가 있다.
예를 들어 오늘이 3월 31일이라하고, 오늘 날짜에서 한달을 빼면 2월31일이 나온다(?)
Moment에서는 다양한 연산을 지원한다.
대신 값을 한번 가져오면 clone을 떠서 사용해야된다. 그렇지 않으면 원본값이 변한다.
(Moment가 Mutable을 지향한다..)
const a = moment("2022-03-31");
const b = a.clone().subtract(1, "months");
console.log(b.format()); // 2022-02-28T00:00:00+09:00예제
export default function MomentExample() {
const momentDate = moment()
const newMomentDate = momentDate.add(1, 'week')
const clonewNewMomenDate = momentDate.clone().add(1, 'week')
return (
<div>
<h1>Moments</h1>
<div>Immutable Check</div>
<div>
{momentDate.format()}
<br />
{newMomentDate.format()}
<br />
{momentDate.format()}
<br />
{clonewNewMomenDate.format()}
<br />
</div>
</div>
)
}결과 - mementDate가 변했다.. 기본값이 변한다.
| 2022-05-16T14:25:30+09:00 2022-05-16T14:25:30+09:00 2022-05-16T14:25:30+09:00 2022-05-23T14:25:30+09:00 |
써머타임 , 윤년도 가능하다.
예를 들어서,
'뉴욕 시간대에서 2018년 3월 10일 13시에 하루 더하기 , 2018년 3월 10일 13시에 24시간 더하기' - 써머타임
<div> Summer Time(New-York)</div>
<div> 2018년 3월 10일 13시에 하루 더하기 :
{moment.tz("2018-03-10 13:00:00", 'America/New_York').add(1, "day").format()}
</div>
<br />
<div> 2018년 3월 10일 13시에 24시간 더하기 :
{moment.tz("2018-03-10 13:00:00", 'America/New_York').add(24, "hour").format()}
</div>| Summer Time(New-York)
2018년 3월 10일 13시에 하루 더하기 :2018-03-11T13:00:00-04:00
2018년 3월 10일 13시에 24시간 더하기 :2018-03-11T14:00:00-04:00
|
'한국 시간대에서 2017년 1월1일에 1년빼기, 2017년 1월1일에 365일 빼기' - 윤년
<div> Leaf Time(Korea)</div>
<div> 2017년 1월 1일 1년빼기 :
{moment("2017-01-01").subtract(1, "year").format()}
</div>
<div> 2017년 1월1일에서 365일 빼기 :
{moment("2017-01-01").subtract(365, "day").format()}
</div>결과
|
Leaf Time(Korea)
2017년 1월 1일 1년빼기 :2016-01-01T00:00:00+09:00
2017년 1월1일에서 365일 빼기 :2016-01-02T00:00:00+09:00
|
특정 날짜를 한국어형태로 표시
<div> 한국어로 표기 (07-17-2021을 2021년 7월 17일로 표기)</div>
{moment('07-17-2021').format('YYYY년 MM월DD일')}두 날짜를 비교
import React, { useRef, useState } from 'react'
import moment from 'moment-timezone'
import 'moment/locale/ko'
export default function MomentExample() {
const birthDayRef = useRef(null)
const [day, setDay] = useState("")
const handleBirthDayChange = (e) => {
setDay(moment(e.target.value, 'YYYY-MM-DD').format('dddd'))
}
return (
<div>
<div> 두 날짜 비교 </div>
<div>
<input type='date' ref={birthDayRef} onChange={handleBirthDayChange} />
<div> 무슨 요일이었을까?</div>
<div> {day}</div>
</div>
</div>
)
}3. dayjs
moment보다 더 작은 라이브러리 (2KB..) ,간결함, immutable
npm install dayjs
Day.js · 2kB JavaScript date utility library
2kB JavaScript date utility library
day.js.org
예제
import React, { useRef, useState } from 'react'
import moment from 'moment-timezone'
import 'moment/locale/ko'
import dayjs from 'dayjs'
import "dayjs/locale/ko"
import utc from "dayjs/plugin/utc"
import timezone from "dayjs/plugin/timezone"
dayjs.locale("ko")
dayjs.extend(utc)
dayjs.extend(timezone)
export default function DayjsExample() {
const birthDayRef = useRef(null)
const [day, setDay] = useState("")
const handleBirthDayChange = (e) => {
setDay(dayjs(e.target.value, 'YYYY-MM-DD').format('dddd'))
}
const dayjsDate = dayjs()
const newdayjsDate = dayjsDate.add(1, 'week')
const clonewNewdayjsDate = newdayjsDate.add(1, 'week')
return (
<div>
<h1>Day.js</h1>
<div>Immutable Check</div>
<div>
{dayjsDate.format()}
<br />
{newdayjsDate.format()}
<br />
{clonewNewdayjsDate.format()}
<br />
</div>
<br />
<div> Summer Time(New-York)</div>
<div>현재 TimeZone 추측 dayjs.tz.guess() 이용</div>
<div>{dayjs.tz.guess()}</div>
<br />
<div> 2018년 3월 10일 13시에 하루 더하기 :
{dayjs.tz("2018-03-10 13:00:00", 'America/New_York').add(1, "day").format()}
</div>
<div> 2018년 3월 10일 13시에 24시간 더하기 :
{dayjs.tz("2018-03-10 13:00:00", 'America/New_York').add(24, "hour").format()}
</div>
<div> Leaf Time(Korea)</div>
<div> 2017년 1월 1일 1년빼기 :
{dayjs("2017-01-01").subtract(1, "year").format()}
</div>
<div> 2017년 1월1일에서 365일 빼기 :
{dayjs("2017-01-01").subtract(365, "day").format()}
</div>
<br />
<div> 한국어로 표기 (07-17-2021을 2021년 7월 17일로 표기)</div>
{dayjs('07-17-2021').format('YYYY년 MM월DD일')}
<div> 두 날짜 비교 </div>
<div>
<input type='date' ref={birthDayRef} onChange={handleBirthDayChange} />
<div> 무슨 요일이었을까?</div>
<div> {day}</div>
</div>
</div>
)
}
4. date-fns
가장 포괄적인 date 라이브러리
Modern JavaScript Date Utility Library
date-fns provides the most comprehensive yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.
date-fns.org
예제
date-fns를 import하고 add와 format을 가져와서 Javascript의 Date에 적용하면 된다.
import { add, format } from 'date-fns'
const dateFnsDate = new Date()
const newdateFnsDate = add(dateFnsDate, { days: 1 })
const clonewNewdateFnsDate = addWeeks(newdateFnsDate)5. 라이브러리를 고르는 기준
잘 선택하면 된다..필요에 의해서