React의 react-moment library 를 사용해보자

개발자 갸갸 2019. 8. 21. 14:38

2019. 8. 21. 14:38

https://www.npmjs.com/package/react-moment

moment

Parse, validate, manipulate, and display dates

www.npmjs.com

react-moment 는 날짜 관련 작업을 위한 js 라이브러리입니다 !

예제로는

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            const dateToFormat = '1976-04-19T12:59-0500';
            <Moment>{dateToFormat}</Moment>
        );
    }
}

이런식으로 Moment를 사용해주면 Outputs 값으로

<time>Mon Apr 19 1976 12:59:00 GMT-0500</time>

이렇게 나옵니다.

자식이 아닌 속성을 사용하여 날짜를 전달하려는 경우 위의 예제를 이런 식으로 작성할 수도 있습니다.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            const dateToFormat = '1976-04-19T12:59-0500';
            <Moment date={dateToFormat} />
        );
    }
}

날짜 값은 문자열, 객체, 배열 또는 Date인스턴스 일 수 있습니다.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            const dateToFormat = new Date('1976-04-19T12:59-0500');
            <Moment date={dateToFormat} />
        );
    }
}

moment는 기본적으로 시간은 60 초 (60000 밀리 초)마다 업데이트됩니다. interval소품을 사용하여 업데이트를 변경하거나 비활성화하십시오. 30 초 (30000 밀리 초)마다 시간을 업데이트합니다.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment interval={30000}>
                1976-04-19T12:59-0500
            </Moment>
        );
    }
}

Disables updating.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment interval={0}>
                1976-04-19T12:59-0500
            </Moment>
        );
    }
}

Formatting

주어진 형식 문자열에 따라 날짜를 형식화합니다.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment format="YYYY/MM/DD">
                1976-04-19T12:59-0500
            </Moment>
        );
    }
}

Outputs

<time>1976/04/19</time>

Parsing Dates

parse = {string}

Moment는 대부분의 표준 날짜 형식을 구문 분석 할 수 있습니다. parse비표준 일 때 주어진 날짜를 구문 분석하는 방법을 순간적으로 알려주 려면 속성을 사용하십시오 .

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment parse="YYYY-MM-DD HH:mm">
                1976-04-19 12:59
            </Moment>
        );
    }
}

Add and Subtract

add={object}

subtract={object}

주어진 날짜에서 기간을 더하고 빼는 데 사용되며 기간은 객체 리터럴로 표시됩니다.\

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        const date = new Date();
 
        return (
            <div>
                <Moment add={{ hours: 12 }}>{date}</Moment>
                <Moment add={{ days: 1, hours: 12 }}>{date}</Moment>
                <Moment subtract={{ hours: 12 }}>{date}</Moment>
                <Moment subtract={{ days: 1, hours: 12 }}>{date}</Moment>
            </div>
        );
    }
}

From Now

때로는 timeago 또는 상대 시간이라고도하며 날짜 를 지금부터 시간으로 표시합니다 ( 예 : "5 분 전").

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment fromNow>1976-04-19T12:59-0500</Moment>
        );
    }
}

위와 아래 같은 코드 생략 가능

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment fromNow ago>1976-04-19T12:59-0500</Moment>
        );
    }
}

Outputs

<time>40 years ago</time>

From Now During

from = {string}

fromNowDuring 을 설정하면 fromNow 와 마찬가지로 상대 시간이 표시 되지만 해당 형식 이 사용 된 후에는 밀리 초 단위의 값만 표시 됩니다.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment from="2015-04-19">1976-04-19T12:59-0500</Moment>
        );
    }
}

Outputs

<time>39 years</time>

To Now

fromNow와 비슷하지만 반대 간격을 제공합니다.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment toNow>1976-04-19T12:59-0500</Moment>
        );
    }
}

Outputs:

<time>40 years ago</time>

to={String}

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment to="2015-04-19">1976-04-19T12:59-0500</Moment>
        );
    }
}

Outputs:

<time>39 years</time>

Filter

filter={function}

렌더링 전에 날짜 값을 수정 / 변환하는 기능입니다.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        const toUpperCaseFilter = (d) => {
            return d.toUpperCase();
        };
 
        return (
            const dateToFormat = '1976-04-19T12:59-0500';
            <Moment filter={toUpperCaseFilter}>{dateToFormat}</Moment>
        );
    }
}

Outputs:

<time>MON APR 19 1976 12:59:00 GMT-0500</time>

With Title

withTitle={bool}

title완전한 날짜를 가진 요소에 속성을 추가합니다 .

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment format="D MMM YYYY" withTitle>
                1976-04-19T12:59-0500
            </Moment>
        );
    }
}

Outputs:

<time title="1976-04-19T12:59-0500">19 Apr 1976</time>

Title Format

titleFormat={string}

속성을 title사용할 때 날짜의 형식을 지정 하는 방법 withTitle

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment titleFormat="D MMM YYYY" withTitle>
                1976-04-19T12:59-0500
            </Moment>
        );
    }
}

Outputs:

<time title="19 Apr 1976">1976-04-19T12:59-0500</time>

Difference

diff={string}

decimal={bool}

unit={string}

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <div>
              <Moment diff="2015-04-19">1976-04-19T12:59-0500</Moment>
              <Moment diff="2015-04-19" unit="days">1976-04-19T12:59-0500</Moment>
              <Moment diff="2015-04-19" unit="years" decimal>1976-04-19T12:59-0500</Moment>
            </div>
        );
    }
}

Duration

duration={string}

date={string}

두 날짜 사이의 기간 (경과 시간)을 표시합니다. duration은 date 시간적으로 뒤에 있어야 합니다.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment duration="2018-11-1T10:59-0500"
                    date="2018-11-1T12:59-0500"
            />
        );
    }
}

Duration From Now

durationFromNow={bool}

현재 날짜와 제공된 날짜 시간 사이의 지속 시간 (경과 시간)을 표시합니다.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment date="2018-11-1T12:59-0500"
                    durationFromNow
            />
        );
    }
}

Unix Timestamps

unix={bool}

주어진 날짜 값을 유닉스 타임 스탬프로 구문 분석하도록 Moment에 지시합니다.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        const unixTimestamp = 198784740;
        return (
            <Moment unix>{unixTimestamp}</Moment>
        );
    }
}

Outputs:

<time>Mon Apr 19 1976 12:59:00 GMT-0500</time>

Local

local={bool}

현지 시간으로 결과를 출력합니다

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment local>
                2018-11-01T12:59-0500
            </Moment>
        );
    }
}

Outputs:

<time>Thu Nov 01 2018 18:59:00 GMT+0100</time> //현재시간

Timezone

tz={string}

시간대를 설정합니다. 서버 측 렌더링 (SSR)을 사용하려면 클라이언트와 서버가 공통 시간대를 기반으로 동일한 날짜 시간을 제공해야합니다. 이 tz속성은 공통 시간대 설정을 활성화합니다.

import React  from 'react';
import Moment from 'react-moment';
import 'moment-timezone';
 
export default class MyComponent extends React.Component {
    render() {
        const unixTimestamp = 198784740;
        return (
            <Moment unix tz="America/Los_Angeles">
                {unixTimestamp}
            </Moment>
        );
    }
}

Outputs:

<time>Mon Apr 19 1976 09:59:00 GMT-0800</time>

Calender

calendar={object|bool}

달력 기능에 사용되는 문자열을 사용자 정의하십시오.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        const calendarStrings = {
            lastDay : '[Yesterday at] LT',
            sameDay : '[Today at] LT',
            nextDay : '[Tomorrow at] LT',
            lastWeek : '[last] dddd [at] LT',
            nextWeek : 'dddd [at] LT',
            sameElse : 'L'
        };
 
        return (
            <Moment calendar={calendarStrings}>
                '1976-04-19T12:59-0500'
            </Moment>
        );
    }
}

Locale

locale = {string}

날짜를 표시하는 데 사용되는 Locale을 설정합니다.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        const dateToFormat = '1976-04-19T12:59-0500';
        return (
            <Moment locale="de">{dateToFormat}</Moment>
        );
    }
}

참고 경우에 따라 언어 파일이 순간적으로 자동으로로드되지 않고 수동으로로드해야합니다. 예를 들어 프랑스어 로캘을 사용하려면 부트 스트랩 (예 : index.js) 스크립트에 다음을 추가하십시오.

import 'moment/locale/fr';

Element

element={string|React.Component}

렌더링 할 요소 유형 (문자열 또는 함수)

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment element="span">1976-04-19T12:59-0500</Moment>
        );
    }
}

Outputs:

<span>Mon Apr 19 1976 12:59:00 GMT-0500</span>

OnChange

onChange={func}

onChange소품은 기본적으로 60 초마다 한 날짜가 업데이트 될 때마다 호출됩니다. 함수는 새로운 날짜 값을받습니다.

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment onChange={(val) => { console.log(val); }}>
                1976-04-19T12:59-0500
            </Moment>
        );
    }
}

Other Props

다른 속성은 <time>요소에 전달됩니다 .

import React  from 'react';
import Moment from 'react-moment';
 
export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment className="datetime" aria-hidden={true}>
                1976-04-19T12:59-0500
            </Moment>
        );
    }
}

Pooled Timer

기본적으로 마운트 된 각 <Moment />인스턴스 에 대해 타이머가 작성되어 날짜 값을 업데이트합니다. 이는 페이지에 인스턴스가 몇 개인 경우에 좋습니다. 그러나 마운트 된 인스턴스가 많은 경우 성능이 저하 될 수 있습니다. 풀링 된 타이머를 사용하여 문제를 해결합니다.

풀링 된 타이밍이 활성화되면 react-moment는 단일 타이머 만 사용하여 마운트 된 모든 <Moment />인스턴스 를 업데이트 합니다. 풀링 된 타이밍은 호출 startPooledTimer()하여 활성화되고을 호출 하여 중지됩니다 clearPooledTimer().

startPooledTimer()부트 스트랩 스크립트 (보통 index.js)에서 정적 메소드를 호출하여 타이머를 초기화하십시오

import React from 'react';
import ReactDOM from 'react-dom';
import Moment from 'react-moment';
import App from './components/app';
 
// Start the pooled timer which runs every 60 seconds
// (60000 milliseconds) by default.
Moment.startPooledTimer();
 
// Or set the update interval. This will update the mounted
// instances every 30 seconds.
// Moment.startPooledTimer(30000);
 
ReactDOM.render(<App />, document.getElementById('mount'));

이상으로 npm moment의 속성 값과 내용을 알아보았습니다.

npmjs.com에서 번역해온 글로 수정을 조금 했습니다. 감사합니다:)

저작자표시 비영리 동일조건

'React' 카테고리의 다른 글

React는 알고 코딩해야지 ! (0)	2019.09.04
React Component LifeCycle API 이란? (0)	2019.08.23
템플릿 리터럴 이란 ?! (0)	2019.08.20
React Styled Component (0)	2019.08.19
리액트의 인라인 스타일링 ! React Inline Styling (0)	2019.08.19

개발야 기하하자