문자열에 React 변수 포함

React에서 바뀌는 값을 텍스트와 결합하려면 JSX 중괄호 안에 JavaScript 표현식을 넣으세요. 예를 들어 className={type + "Box"}는 문자열 연결을 사용하고, className={`${type}Box`}는 템플릿 리터럴을 사용합니다. React는 JavaScript 라이브러리이며, JSX를 사용하면 마크업과 비슷한 문법으로 이러한 표현식을 작성할 수 있습니다.

문자열 연결로 React 변수를 문자열에 포함하기

이 예제에서 type은 문자열 "large"이므로 type + "Box"는 두 값을 연결해 "largeBox"를 만듭니다. 두 피연산자가 모두 숫자라면 +는 숫자를 더합니다. React 컴포넌트에서는 JSX 중괄호 안의 표현식을 속성 값으로 사용하세요. type이 바뀌면 다음 렌더링에서 React는 새로 결합된 값을 받습니다. 다음 실행 가능한 JavaScript 예제는 문자열 연산만 따로 보여 주며, React나 JSX를 렌더링하지는 않습니다.

다음 예제를 실행하세요:

const type = "large";
const className = type + "Box";
console.log(className);

largeBox

+를 사용하면 공백을 별도의 문자열로 포함해 여러 부분을 연결할 수 있습니다. 예를 들어 firstWord + " " + secondWord는 두 값 사이에 공백 하나를 넣습니다. 공백을 명시하지 않으면 단어가 붙어서 표시됩니다. JSX에서는 <h1>{firstWord + " " + secondWord}</h1>처럼 전체 표현식을 중괄호 안에 작성하세요. 중괄호는 JavaScript 표현식의 범위를 표시하며 결과 텍스트에 포함되지는 않습니다.

연결할 부분이 적으면 문자열 연결이 간단합니다. 값이나 문장 부호, 공백이 여러 개라면 + 연산자가 반복되어 의도한 문장을 한눈에 파악하기 어려울 수 있습니다. 같은 문자열을 만드는 다른 방법으로 템플릿 리터럴을 사용할 수 있습니다.

템플릿 리터럴로 React 변수를 문자열에 포함하기

템플릿 리터럴은 백틱과 ${...}를 사용해 문자열 안에 표현식을 넣습니다. JSX에서는 속성의 표현식 중괄호 안에 템플릿 리터럴을 넣으세요. 예를 들면 className={`${type}Box`}와 같습니다. type이 "large"이면 JavaScript 표현식은 문자열 연결과 같은 largeBox 값을 만듭니다. 여러 값을 결합하거나 공백이 필요한 문자열에서는 주변 텍스트를 하나의 읽기 쉬운 템플릿으로 유지할 수 있어 이 표기법이 유용합니다. 자리표시자 사이의 문자도 결과에 그대로 복사되므로 표시되는 이름을 띄우려면 ${firstName}과 ${lastName} 사이에 공백을 직접 넣으세요. 쉼표나 콜론 같은 문장 부호, 단위 접미사도 같은 방식으로 포함할 수 있습니다. 템플릿 표현식은 여전히 하나의 JavaScript 문자열로 평가됩니다. JSX 요소를 추가하거나 보간되는 값을 바꾸지는 않습니다. JSX 텍스트에서는 제목 예제처럼 표현식을 중괄호로 감싸세요. className 같은 속성에서는 템플릿 리터럴을 속성 중괄호 안에 넣습니다. 컴포넌트를 렌더링할 때 React는 만들어진 문자열을 텍스트나 속성 값으로 받습니다. 결과에 공백이 빠졌다면 JavaScript 값을 바꾸기 전에 각 자리표시자 주변의 문자 리터럴을 확인하세요.

예를 들어 const firstName = "Ada"와 const lastName = "Lovelace"로 값을 정의하면, JSX에서 Hello, ${firstName} ${lastName}! 템플릿 리터럴 표현식을 사용해 제목을 렌더링할 수 있습니다. 코드는 <h1>{`Hello, ${firstName} ${lastName}!`}</h1>와 같습니다. JavaScript 표현식은 JSX 중괄호로 감싸고 템플릿 리터럴은 백틱으로 감싸세요. 짧은 문자열 연결에는 연결 연산자를 사용하고, 보간으로 긴 문자열을 더 읽기 쉽게 만들 수 있다면 템플릿 리터럴을 선택하세요. 두 방법 모두 React가 사용할 일반 JavaScript 문자열을 만듭니다.