[JavaScript] 문자열(string)을 날짜로 바꾸는 방법

지난달 바닐라JS와 DOM을 사용해 구현했던 페이지를 React로 리팩토링을 해보았다. 하드코딩된 더미데이터를 가져다 만들었던 지난달과 다르게 서버를 구축해서 해당 서버에 fetch API로 데이터를 요청해서 받아온 데이터를 props로 컴포넌트로 내려보내주었다. 

 

그러던 중에 데이터에 담긴 시간 정보가 toISOstring() 형태의 string이었는데, 이 정보를 가공해서 아래와 같이 다른 날짜 형식으로 표현하고 싶었다. 

 

 

결론부터 이야기하자면 날짜 문자열 구문을 분석해서 1970년 이후의 ms초를 반환(Date.now()와 동일한 형태)해주는 Date.parse() 를 쓰면 된다.  

 

'2022-05-15T23:57:43Z' 형태로 들어온 날짜 데이터를 Date.parse()에 넣어보면 다음과 같다. 

 

 

리액트 컴포넌트 코드 예시는 아래와 같다. 

function Discussion({ answer, url, author, avatarUrl, createdAt, title }) {
  // 날짜 정보 변환
  const parsedDate = Date.parse(createdAt);
  const localedDate = new Date(parsedDate).toLocaleString();

  return (
    // 생략
    <div className="discussion__information">
      <span className="discussion__author">{author}</span>
      <span className="discussion__createdAt">{localedDate}</span>
    </div>
    // 생략
  );
}