JSX에서의 변수 사용법: React 컴포넌트에서 변수 활용하기

 

JSX는 JavaScript XML의 약자로, React에서 UI를 구성하는 데 사용되는 문법입니다. JSX를 사용하면 HTML과 유사한 코드로 React 컴포넌트를 작성할 수 있지만, 실제로는 JavaScript로 변환되어 실행됩니다. JSX 내부에서 변수를 사용하거나 표현식을 삽입하는 방법은 React의 핵심 개념 중 하나입니다. 이번 글에서는 JSX에서 변수와 표현식을 어떻게 사용하는지, 그리고 그 사용법에 대한 자세한 예시를 소개하겠습니다.

1. JSX에서 변수 삽입하기

JSX에서는 변수 삽입을 위해 중괄호 {}를 사용합니다. 중괄호는 JavaScript 표현식을 JSX 코드 내에 삽입할 수 있게 해주는 구문입니다. 이를 통해 React 컴포넌트 내에서 동적인 값을 처리할 수 있습니다.

예시 1: 변수 직접 삽입하기

const name = "홍길동";

function Greeting() {
  return <h1>안녕하세요, {name}님!</h1>;
}

위 예시에서 name이라는 변수를 JSX 내에 {}를 사용하여 삽입했습니다. 이 방식으로 JavaScript의 변수 값을 JSX 내부에 동적으로 표시할 수 있습니다. React는 name 변수의 값을 읽고, 이를 "안녕하세요, 홍길동님!"으로 출력합니다.

2. JSX에서 표현식 사용하기

JSX에서는 단순히 변수뿐만 아니라 JavaScript 표현식도 {} 안에 삽입할 수 있습니다. 예를 들어, 연산자나 함수 호출을 표현식으로 사용할 수 있습니다.

예시 2: 표현식 사용하기

const a = 10;
const b = 20;

function Sum() {
  return <h1>두 숫자의 합은 {a + b}입니다.</h1>;
}

위 코드에서는 a와 b 변수의 값을 더하는 표현식을 JSX에 삽입했습니다. React는 {a + b}를 평가하여 두 숫자의 합은 30입니다.로 출력합니다.

또한, JSX 내에서 함수 호출을 사용하여 동적으로 값을 생성할 수도 있습니다.

예시 3: 함수 호출 사용하기

function getGreeting() {
  return "환영합니다!";
}

function Welcome() {
  return <h1>{getGreeting()}</h1>;
}

이 코드에서는 getGreeting이라는 함수의 반환 값을 JSX 내에 삽입했습니다. 이 방식으로 함수를 사용하여 JSX 내에서 동적인 데이터를 생성할 수 있습니다.

3. 조건부 렌더링에서 변수 사용하기

JSX에서는 조건부 렌더링을 통해 UI를 동적으로 제어할 수 있습니다. 조건에 따라 다른 UI를 표시하려면 JavaScript의 조건문을 표현식으로 삽입할 수 있습니다.

예시 4: 삼항 연산자 사용하기

const isLoggedIn = true;

function UserGreeting() {
  return (
    <h1>{isLoggedIn ? "환영합니다, 로그인한 사용자님!" : "로그인 해주세요."}</h1>
  );
}

위 예시에서 삼항 연산자를 사용하여 isLoggedIn 변수가 true일 때와 false일 때 다른 메시지를 출력하는 방식입니다. 이렇게 조건에 따라 다른 UI를 표시하는 패턴은 React에서 자주 사용됩니다.

4. JSX에서 배열 및 객체 사용하기

JSX 내에서 배열이나 객체를 사용할 수도 있습니다. 배열의 경우, React는 배열을 순회하며 각 항목을 출력하는 방식을 사용합니다. 객체는 특정 속성을 사용할 수 있습니다.

예시 5: 배열 사용하기

const items = ["사과", "바나나", "체리"];

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

위 예시에서는 map() 메서드를 사용해 배열을 순회하고, 각 항목을 <li> 태그로 출력하는 방법을 보여줍니다. 각 항목에 key 속성을 추가하는 이유는 React가 DOM을 효율적으로 갱신할 수 있도록 돕기 위함입니다.

예시 6: 객체 사용하기

const user = {
  name: "홍길동",
  age: 25,
  location: "서울"
};

function Profile() {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>나이: {user.age}</p>
      <p>위치: {user.location}</p>
    </div>
  );
}

위 예시에서는 객체의 속성을 JSX 내에서 {}를 사용하여 동적으로 표시하는 방법을 보여줍니다. 객체의 속성 값을 직접 사용하여 다양한 UI를 구성할 수 있습니다.

5. JSX에서 이벤트 핸들러와 변수 사용하기

JSX에서 변수는 이벤트 핸들러와 결합하여 동적인 상호작용을 구현할 수 있습니다. 예를 들어, 버튼 클릭 시 특정 값을 변경하는 방식입니다.

예시 7: 버튼 클릭 시 값 변경하기

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
    </div>
  );
}

이 예시에서는 useState 훅을 사용하여 상태 변수를 관리하고, 버튼 클릭 시 setCount 함수를 호출하여 count 값을 업데이트하는 방식입니다. JSX에서는 이벤트 핸들러 내에서도 변수와 상태를 동적으로 사용할 수 있습니다.

6. JSX 내에서 스타일과 변수 사용하기

JSX에서는 인라인 스타일을 객체 형태로 정의하여 변수와 함께 사용할 수 있습니다. 이를 통해 스타일을 동적으로 변경할 수 있습니다.

예시 8: 인라인 스타일과 변수 사용하기

const isRed = true;

function ColoredBox() {
  const boxStyle = {
    backgroundColor: isRed ? "red" : "blue",
    width: "100px",
    height: "100px"
  };

  return <div style={boxStyle}></div>;
}

위 코드에서는 isRed 변수를 이용해 박스의 배경색을 동적으로 변경하고 있습니다. React에서는 이와 같이 JavaScript 객체를 사용하여 스타일을 설정할 수 있습니다.

결론

JSX에서 변수와 표현식 사용은 React의 강력한 기능 중 하나로, UI를 동적으로 구성하고 다양한 사용자 상호작용을 처리하는 데 필수적인 기술입니다. 변수, 표현식, 조건문, 배열 및 객체 등 다양한 JavaScript 기능을 JSX와 결합하여 더 유연하고 동적인 웹 애플리케이션을 만들 수 있습니다. 이 글에서 다룬 기본적인 사용법 외에도, 다양한 실전 예제를 통해 JSX의 활용도를 극대화할 수 있습니다.

React를 사용하면서 JSX에서의 변수 사용법을 잘 이해하고 활용하면, 더욱 직관적이고 효율적인 컴포넌트 개발이 가능합니다.