[React] JSX에서 JS 표현식 활용하기 : 동적 값 추가 방법

728x90

JSX는 React 컴포넌트에서 동적인 값을 추가하는 강력한 방법을 제공합니다. 이번 글에서는 JSX 콘텐츠에 중괄호를 사용하여 JavaScript 표현식을 평가하고, 동적인 값을 쉽게 추가하는 방법을 알아보겠습니다.

JSX에서의 동적 값 표현

JSX에서 중괄호를 사용하면 해당 부분이 JavaScript로 평가되어 콘텐츠에 추가됩니다. 아래는 간단한 예제입니다.

// JSX에서의 동적 값 표현
const result = <p>{1 + 4 + 3 / 3}</p>;
// result에는 계산 결과가 포함된 JSX가 저장됨

이처럼 중괄호 안에는 어떠한 JavaScript 표현식도 사용할 수 있습니다. 이 예제에서는 간단한 수학 계산을 수행하고 해당 결과를 JSX에 추가하였습니다.

실제 데이터 적용하기

더 실용적인 예시로, 예를 들어 에어비앤비의 숙소 카드를 작성한다고 가정해봅시다. 각 숙소 카드에는 도시 이름, 거리, 날짜 범위, 가격 등의 동적인 값이 있을 것입니다.

// App.js
import Test from "./Test";

export default function App() {
  // 동적 값 적용 예시
  const listing = {
    city: "New York",
    distance: "5 miles",
    dates: "2023-01-01 to 2023-01-07",
    price: 150
  };

  return (
    <div className="App">
      <Test cardContent={listing} />
    </div>
  );
}

// Test.js
export default function Test({ cardContent }) {
  return (
    <div>
      <p>
        {cardContent.city} - {cardContent.distance}
      </p>
      <p>{cardContent.dates}</p>
      <p>
        Price: <strong>${cardContent.price}</strong> per night
      </p>
    </div>
  );
}

위의 코드에서 {listing.city}, {listing.distance}, {listing.dates}, {listing.price}와 같이 중괄호를 사용하여 데이터를 보간했습니다. 이를 통해 동적인 값이 포함된 JSX를 생성할 수 있습니다.

컴포넌트에서의 활용

동적인 값을 추가하는 것은 컴포넌트에서도 동일합니다. 예를 들어, 반려동물 이름이 동적으로 변하는 경우를 살펴보겠습니다.

// 반려동물 이름 동적으로 추가
const petName = 'Elton';

const DogComponent = () => (
  <p>{petName} says WOOF!!!</p>
);

이처럼 JSX에서는 중괄호를 통해 어떠한 JavaScript 표현식도 삽입할 수 있으며, 이를 통해 동적인 값들을 쉽게 다룰 수 있습니다. 앞으로 더 흥미로운 내용에 대해 자세히 알아보도록 하겠습니다.

[예제] 주사위 컴포넌트 만들기 : 리액트에서 무작위 숫자 표시하기

React에서 동적인 값을 표시하는 간단한 주사위 컴포넌트를 만들어봅시다. Die.js라는 파일에 새로운 컴포넌트를 작성할 것이며, 해당 컴포넌트는 주사위 굴리기를 통해 무작위 숫자를 생성하고 표시할 것입니다.

Die 컴포넌트 만들기

// Die.js

import React from 'react';

const Die = () => {
  const roll = Math.floor(Math.random() * 6) + 1;

  return (
    <h1>Die Roll: {roll}</h1>
  );
};

export default Die;

Die 컴포넌트는 Math.random()을 사용하여 1부터 6까지의 무작위 숫자를 생성하고, 해당 숫자를 JSX에 표시합니다.

Die 컴포넌트 렌더링하기

Die 컴포넌트를 다른 파일에서 불러와서 렌더링할 수 있습니다.

// App.js (혹은 다른 컴포넌트 파일)

import React from 'react';
import Die from './Die';

const App = () => {
  return (
    <div>
      <Die />
      <Die />
      <Die />
      {/* 원하는 만큼 Die 컴포넌트를 추가할 수 있습니다 */}
    </div>
  );
};

export default App;

Die 컴포넌트를 import하여 원하는 만큼 렌더링할 수 있습니다. 페이지를 새로고침하면 매번 다른 주사위 숫자가 표시됩니다.

이렇게 간단하게 React를 사용하여 동적인 값을 표시하는 컴포넌트를 만들 수 있습니다. 무작위 숫자를 생성하고 표시함으로써 React의 기본적인 사용 방법을 익히고 시작할 수 있는 좋은 예제입니다.

이런식으로 원하는 만큼 컴포넌트를 import해서 렌더링 할수 있습니다.