[REACT] JSX에서 중괄호로 JavaScript 표현식 다루기

중괄호의 역할

JSX는 기본적으로 HTML처럼 보이지만, 중괄호를 사용하면 JavaScript를 사용할 수 있습니다.

변수와 문자열의 동적 조합

가장 기본적인 활용법은 변수 값을 JSX에 삽입하는 것입니다. 속성에 고정된 문자열은 따옴표로 작성하지만, 동적인 값은 중괄호로 감싸 전달합니다.

export default function DynamicImage() {
  const imageSrc = "https://example.com/sunset.jpg";
  const caption = "석양의 아름다움";

  return (
    <figure>
      <img src={imageSrc} alt={caption} className="dynamic-image" />
      <figcaption>{caption}</figcaption>
    </figure>
  );
}

컴포넌트 내부에서 JavaScript 함수 호출

중괄호는 단순 변수 참조뿐 아니라, 함수 호출 결과도 삽입할 수 있습니다.

export default function WeatherCard() {
  const city = "서울";

  // 임의의 온도를 반환하는 함수
  function getTemperature() {
    const temp = Math.floor(Math.random() * 30); // 0~29도 사이 랜덤 값
    return `${temp}°C`;
  }

  return (
    <div className="weather-card">
      <h2>{city} 날씨</h2>
      <p>현재 온도: {getTemperature()}</p>
      <p>업데이트 시간: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

이중 중괄호 사용하기

React에서 인라인 스타일을 적용할 때는 CSS 속성을 JavaScript 객체로 작성하며, 이를 중괄호 두 개로 감쌉니다. 
첫 번째 중괄호는 JSX 표현식을, 두 번째는 객체 리터럴을 나타냅니다.

export default function ThemeButton() {
  const theme = {
    light: {
      backgroundColor: "#f5f5f5",
      color: "#333",
      padding: "10px 20px",
      border: "1px solid #ccc"
    },
    dark: {
      backgroundColor: "#333",
      color: "#f5f5f5",
      padding: "10px 20px",
      border: "1px solid #666"
    }
  };

  const isDarkMode = true; // 테마 전환 조건

  return (
    <button style={isDarkMode ? theme.dark : theme.light}>
      {isDarkMode ? "다크 모드 버튼" : "라이트 모드 버튼"}
    </button>
  );
}

또는 객체 리터럴을 직접 작성할 수도 있습니다.

export default function InlineStyledBox() {
  return (
    <div style={{ backgroundColor: "lightcoral", padding: "15px", borderRadius: "4px" }}>
      <h2>인라인 스타일 박스</h2>
      <p>중괄호 두 개를 사용해 객체를 전달합니다.</p>
    </div>
  );
}

복합 데이터와 조건부 렌더링

중괄호는 단순 값뿐 아니라 객체 속성, 배열, 조건문 등 복잡한 표현식도 다룰 수 있습니다.

export default function TeamList() {
  const team = {
    name: "개발팀",
    members: [
      { id: 1, name: "최영준", role: "리드 개발자" },
      { id: 2, name: "박소연", role: "UI/UX 디자이너" },
      { id: 3, name: "김태호", role: "백엔드 개발자" }
    ],
    active: true
  };

  return (
    <section style={{ padding: "20px", backgroundColor: "#f9f9f9" }}>
      <h1>{team.name} 멤버</h1>
      {team.active ? (
        <ul>
          {team.members.map((member) => (
            <li key={member.id}>
              {member.name} - {member.role}
            </li>
          ))}
        </ul>
      ) : (
        <p>현재 팀 활동이 중단되었습니다.</p>
      )}
    </section>
  );
}