[react] JSX에서 템플릿 리터럴 사용하기

26 Dec 2023

react

먼저, 템플릿 리터럴을 사용하여 문자열을 생성하는 예를 보겠습니다.

const name = 'John';
const element = <p>{`Hello, ${name}!`}</p>;
ReactDOM.render(element, document.getElementById('root'));

위 예제에서는 템플릿 리터럴을 사용하여 ‘Hello, John!’이라는 문자열을 생성하고, JSX 요소 안에서 중괄호({})로 감싸 사용했습니다.

또 다른 예로, 템플릿 리터럴을 사용하여 동적인 JSX 요소를 생성할 수도 있습니다.

const user = {
  firstName: 'Jane',
  lastName: 'Doe'
};

const element = (
  <div>
    <h1>{`Hello, ${user.firstName} ${user.lastName}!`}</h1>
    <p>{`Today is ${new Date().toLocaleDateString()}`}</p>
  </div>
);
ReactDOM.render(element, document.getElementById('root'));

이러한 방식으로 JSX에서 템플릿 리터럴을 활용하여 동적으로 문자열을 생성하거나 표현식을 삽입할 수 있습니다.

참고 자료:

React 공식 문서: Introducing JSX
MDN Web Docs: 템플릿 리터럴