React JSX 기초: 표현식·조건부 렌더링·리스트 출력

이 글에서는 React에서 UI를 작성할 때 핵심이 되는 JSX 문법에 대해 알아봅니다. 표현식 삽입, 조건부 렌더링, 리스트 렌더링 예제를 통해 JSX 사용법을 익히고, 주요 팁과 주의사항을 정리해 보세요.

1. JSX란?

JSX(JavaScript XML)는 JavaScript 코드 안에 HTML 구조를 작성할 수 있게 해 주는 문법입니다. 브라우저가 이해하는 순수 JavaScript로 변환되기 때문에, UI 구조를 직관적으로 표현할 수 있습니다.

2. JSX 표현식 삽입

JSX 안에서는 중괄호({})를 사용해 JavaScript 표현식을 삽입할 수 있습니다.

const name = 'BlueShare';
function Greeting() {
  return (
    <h2>Hello, {name}!</h2>
  );
}

위 코드에서 {name} 부분은 변수 name의 값을 출력합니다.

3. 조건부 렌더링

조건부 렌더링은 UI 일부를 상황에 따라 표시하거나 숨길 때 사용합니다.

3.1 논리 연산자(&&)

function Notification({ count }) {
  return (
    <div>
      {count > 0 && <p>새 알림: {count}</p>}
    </div>
  );
}

3.2 삼항 연산자(?:)

function LoginButton({ isLoggedIn }) {
  return (
    <button>
      {isLoggedIn ? '로그아웃' : '로그인'}
    </button>
  );
}

4. 리스트 렌더링

배열 데이터를 기반으로 여러 컴포넌트를 렌더링할 때 map() 함수를 사용합니다.

const fruits = ['Apple', 'Banana', 'Cherry'];
function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

각 li 요소에는 React가 리스트를 효율적으로 업데이트할 수 있도록 key 속성이 필요합니다.

5. 예제 컴포넌트 코드

import React from 'react';

function JsxPractice() {
  const items = ['React', 'JSX', 'Props'];
  const hasTopics = items.length > 0;

  return (
    <div>
      <h2>JSX 예제 컴포넌트</h2>
      <p>다양한 JSX 문법 기능을 확인해 보세요.</p>

      {/* 표현식 삽입 */}
      <p>오늘의 학습 주제: {items[0]}</p>

      {/* 논리 연산자 && */}
      {hasTopics && <p>총 {items.length}개의 주제가 있습니다.</p>}

      {/* 삼항 연산자 ?: */}
      {items.length > 2 ? (
        <p>3개 이상의 주제가 준비되어 있습니다.</p>
      ) : (
        <p>주제가 충분하지 않습니다.</p>
      )}

      {/* 리스트 렌더링 */}
      <ul>
        {items.map((item, idx) => (
          <li key={idx}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default JsxPractice;

▼ 실행 결과 화면