[React] 템플릿 리터럴(Template Literal) - 백틱(`) 사용법 / 날짜 값 담는 활용 예제

이번 글은 템플릿 리터럴을 활용해 동적으로 변화하는 값을 담는 활용법에 대한 글이다.

 

---

 

[ 템플릿 리터럴 사용법 ]

현재 날짜를 표시해주는 기능에 대한 예제다.

 

먼저 아래 코드와 같이 현재 날짜를 담아줄 state를 생성해준다.

const [date, setDate] = useState(new Date());

 

아래와 같이 백틱(`)으로 감싸준 뒤 $ 뒤에 날짜 데이터를 담은 스테이트를 가져와 연도와 월을 가져와 출력한다.

이때 월은 +1을 해줘야 정상적으로 현재의 달이 출력되기 때문에 반드시 +1을 해줘야한다.

<div>
	<h3>{`${date.getFullYear()}년 ${date.getMonth() + 1}월`}</h3>
</div>

 

실행결과

 

 

 

---