Date 객체에서 연, 월, 일을 추출하는 방법은 다음과 같습니다.

const d = new Date();
const year = d.getFullYear();
const month = d.getMonth() + 1;
const day = d.getDate();

여기서 주의할 점은 month 값의 범위가 0부터 11까지라는 것입니다. 즉, 0이 1월이고, 11이 12월입니다.

DateHead 컴포넌트를 수정하기 전에 자바스크립트 문법을 한 가지 알아보겠습니다. 템플릿 리터럴(Template Literal)이라는 문법인데요. 문자열을 조합할 때 매우 유용합니다.

year, month, day 값이 있는 상황에서 YYYY년 MM월 DD일을 표현하고 싶다면 다음과 같이 코드를 작성할 수 있습니다.

const formatted = year + '년 ' + month + '월 ' + day + '일';

문제는 이러한 코드가 보기에 헷갈린다는 겁니다. 특히 문자열 안에 들어가는 변수 / 상수의 값이 다양해지면 더더욱 헷갈리죠.

템플릿 리터럴 문법을 사용하면 앞의 코드를 다음과 같이 작성할 수 있습니다.

const formatted = `${year}년 ${month}월 ${day}일`;

어떤가요? 훨씬 간결하죠? 이처럼 템플릿 리터럴을 사용하는 편이 훨씬 간결하기 때문에 문자열을 조합할 때 주로 사용한답니다. 템플릿 리터럴에서 사용하는 문자는 백틱(backtick) ` 으로 키보드에서 숫자 1 좌측에 있는 키입니다.