[React] 현재 날짜 값 받아오기

; 리액트에서 현재 날짜 값 나타내기

 

현재 날짜를 'YY.MM.DD' 포맷으로 나타내려고 했는데 애를 꽤 먹었다.

나와 같은 사람이 있다면 참고하라고 남기는 소소한 글.

 

1. 현재 날짜를 받아온다.

let now = new Date(); //현재 날짜 및 시간

 

2. 연도, 월, 일을 받아온다.

//연도
let year = now.getFullYear();

//월
let month = now.getMonth() + 1;

//일
let date = now.getDate();

getMonth()는 현재 달에 -1을 한 값,

즉 0부터 리턴하기 때문에 +1을 해줘야 원하는 달의 값을 가져올 수 있다.

 

3. 현재 날짜 출력하기 (YYYY.MM.DD)

const todayDate = () => {
            let now = new Date();
            
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            let date = now.getDate();

            return year + '.' + month + '.' + date;
        }
        
        return(
            <div>
                {todayDate()}
            </div>
        );

 

결과값

현재 날짜를 잘 불러오는 것을 확인!

그런데 YY의 포맷으로 나타내고 싶기 때문에 앞의 20을 지워줘야 한다.

 

4. 현재 날짜 출력하기 (YY.M.D)

const todayDate = () => {
            let now = new Date();
            
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            let date = now.getDate();

            return year + '.' + month + '.' + date;
        }
        
        return(
            <div>
                {todayDate().slice(2, 9)}
            </div>
        );

slice() 메소드를 사용하자! 

시작 인덱스가 2기 때문에 2022의 '20'을 제외하고 출력한다.

결과값

내가 원했던 YY의 포맷으로 잘 출력되는 것을 확인할 수 있다.

그런데 '22.01.29'로 출력하고 싶기 때문에 '1'로만 출력되는 월을 수정해야 한다.

또한 1의 자리 날짜일 때도 예를 들어 '22.1.1'로 출력될 것이기 때문에 일도 수정해야 한다.

 

5. 1의 자리 달과 일일 때도 MM, DD 포맷으로 출력하기 (YY.MM.DD)

const todayDate = () => {
            let now = new Date();
            
            let year = now.getFullYear();
            let month = ("0" + (now.getMonth() + 1)).slice(-2);
            let date = ("0" + now.getDate()).slice(-2);

            return year + '.' + month + '.' + date;
        }
        
        return(
            <div>
                {todayDate().slice(2, 10)}
            </div>
        );

현재 날짜의 달과 일 앞에 문자열 '0'을 더해준다.

또한 slice() 메소드를 사용해서 뒤에서부터 인덱스 2개를 지워주면 MM, DD 포맷을 만들 수 있다.

최종 날짜의 slice() 메소드의 인덱스 범위도 유의하자.

결과값

드디어 원하는 포맷에 맞는 현재 날짜 값을 불러왔다!

 

 

---

 

slice() 메소드만 잘 이해하고 있으면 금방 구현이 가능했다.

무심코 지나쳤던 메소드들을 다시, 정확히 공부해야겠다! ;)