문자열에 React 변수 포함

1. 문자열 연결을 사용하여 문자열에 React 변수 포함
2. 템플릿 리터럴을 사용하여 문자열에 React 변수 포함

오늘날 React는 아마도 동적 기능을 갖춘 빠른 웹 애플리케이션을 구축하기 위한 최고의 라이브러리일 것입니다. React는 HTML과 유사한 템플릿 언어 JSX를 사용합니다. 그러나 중괄호로 묶인 한 JavaScript 표현식을 실행할 수 있는 것과 같은 많은 이점이 있습니다.

문자열 연결을 사용하여 문자열에 React 변수 포함

간단한 연결을 동적으로 사용하여 문자열을 생성할 수 있습니다. 간단한 + 연산자 또는 concat() 메서드를 사용하여 여러 문자열을 연결할 수 있습니다.

예를 들어 동적 className 문자열을 생성한다고 가정합니다. 문자열 연결을 사용하여 동적 className 값을 생성하는 방법의 예를 상상해 봅시다.

export default function App() {
  const [type, setType] = useState("large");
  return (
    <div className={type + "Box"}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

type 상태 변수를 large 문자열로 초기화합니다. JSX에서는 type 변수(large)의 문자열 값과 Box 문자열을 연결하여 <div> 요소의 className 속성을 설정합니다.

소스 HTML을 보면 컨테이너의 class가 largeBox인 것을 볼 수 있습니다.

setType 기능을 사용하여 type 상태 변수의 값을 변경할 수 있습니다. className의 문자열 값도 변경됩니다.

이렇게 하면 컨테이너의 className 값을 동적으로 변경할 수 있으므로 구성 요소의 모양을 사용자 지정할 수 있습니다.

동일한 원칙을 사용하여 두 개 이상의 문자열을 연결할 수 있습니다. 단어 사이에 공백이 필요한 경우 수동으로 추가해야 합니다.

<h1>{firstWord + " " + secondWord}</h1>

참고: JSX 내에서 JavaScript 표현식을 실행하려면 중괄호로 묶어야 합니다.

이 예제의 라이브 데모는 CodeSandbox에서 사용할 수 있으므로 연결이 어떻게 작동하는지 직접 확인할 수 있습니다.

템플릿 리터럴을 사용하여 문자열에 React 변수 포함

많은 프런트 엔드는 문자열의 기능 변수에 보다 우아한 템플릿 리터럴을 사용하는 것을 선호합니다. 일반 문자열처럼 보입니다. 유일한 차이점은 작은따옴표나 큰따옴표를 사용하는 대신 백틱(``)을 사용하여 템플릿 리터럴을 표시한다는 것입니다.

또한 달러 기호와 중괄호를 사용하여 문자열 내에 식을 포함할 수 있습니다. 이 기능은 ES6에서 도입되었으므로 JavaScript에 비교적 새로 추가된 기능입니다.

첫 번째 예를 다시 살펴보겠습니다. 이번에는 문자열에 변수를 포함하기 위해 템플릿 리터럴을 사용합니다.

export default function App() {
  const [type, setType] = useState("large");
  return (
    <div className={`${type}Box`}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

이 경우 type 변수는 문자열 값으로 대체됩니다. 궁극적으로 className 특성에 대한 largeBox 문자열 값은 계속 유지됩니다.

템플릿 리터럴은 단순한 연결보다 더 읽기 쉬운 경우가 많습니다. 예를 들어 문자열에 변수가 많은 경우 단어 사이에 공백을 넣는 것이 훨씬 쉽습니다.