React 애플리케이션을 개발할 때 JSX 안에서 JavaScript 표현식을 사용하는 것은 매우 흔한 일입니다. JSX는 JavaScript 표현식을 허용하기 때문에, 동적으로 UI를 생성하거나 상태와 프롭스에 액세스하는 등의 작업을 손쉽게 수행할 수 있습니다.

JSX 안에서 변수 사용하기

JSX 안에서 JavaScript 변수를 사용하려면, 중괄호({})를 사용하여 해당 변수를 감싸면 됩니다.

예를 들어, 다음과 같이 변수를 JSX 안에서 사용할 수 있습니다:

import React from 'react';

function ExampleComponent() {
  const name = 'John Doe';
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
}

JSX 안에서 조건부 렌더링하기

조건에 따라 다른 요소를 렌더링하려면, JSX 안에서 JavaScript의 조건문을 사용할 수 있습니다.

예를 들어, 다음과 같이 조건부 렌더링을 할 수 있습니다:

import React from 'react';

function ExampleComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome, User!</p> : <p>Please log in.</p>}
    </div>
  );
}

JSX 안에서 매핑하기

리스트나 배열과 같은 여러 요소를 렌더링하려면, map() 함수를 사용하여 JSX 안에서 매핑할 수 있습니다.

예를 들어, 다음과 같이 매핑하여 렌더링할 수 있습니다:

import React from 'react';

function ExampleComponent({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

이와 같이 JSX 안에서 JavaScript 표현식을 사용하여 동적으로 UI를 조작할 수 있습니다. JSX는 JavaScript 표현식을 지원하므로, React 애플리케이션을 개발할 때 더 많은 자유도를 가질 수 있습니다.