React JSX 문법 정리 | 기본 문법, 조건부 렌더링, 리스트 렌더링까지

React를 공부하기 시작하면 가장 먼저 부딪히는 문법이 바로 JSX입니다.

처음 보면 HTML처럼 보이는데 JavaScript 안에 들어가 있고, 중괄호로 값을 넣기도 하고, if문은 그대로 안 들어가고, 배열을 map()으로 돌려 화면에 뿌리는 방식도 낯설게 느껴집니다.

특히 입문 단계에서는 아래 포인트에서 많이 막힙니다.

• JSX는 정확히 무엇인가?
• HTML과 뭐가 다르고 왜 중괄호를 쓰는가?
• 조건부 렌더링은 어떻게 해야 하는가?
• 리스트 출력할 때 왜 map()과 key가 필요한가?

이번 글에서는 React 입문자가 꼭 알아야 하는 JSX 기본 문법, 조건부 렌더링, 리스트 출력을 한 번에 정리하겠습니다. 단순 문법만 나열하지 않고, 왜 그렇게 쓰는지, 어디서 자주 헷갈리는지까지 같이 보겠습니다.

핵심만 먼저 보면

JSX는 React에서 UI를 HTML처럼 작성할 수 있게 해주는 문법입니다.

조건부 렌더링은 상태에 따라 다른 화면을 보여주는 방식입니다.

리스트 렌더링은 배열 데이터를 map()으로 반복 출력하는 패턴입니다.

728x90

React JSX란 무엇인가?

HTML처럼 보이지만, 실제로는 JavaScript 안에서 UI를 표현하는 문법입니다.

JSX는 JavaScript XML의 약자입니다. 쉽게 말하면 React에서 화면 구조를 더 직관적으로 작성할 수 있게 해주는 문법이라고 보면 됩니다.

예를 들어 아래 코드를 보겠습니다.

function App() {
  return <h1>안녕하세요, React</h1>;
}

이 코드는 HTML처럼 보이지만, 브라우저가 그대로 이해하는 HTML은 아닙니다. 내부적으로는 JavaScript로 변환되어 동작합니다.

즉, JSX는 단순 장식 문법이 아니라 React 컴포넌트에서 화면을 선언적으로 작성하기 위한 표현 방식입니다.

JSX는 “DOM을 어떻게 직접 조작할지”를 쓰는 문법이 아니라, 지금 어떤 UI가 보여야 하는지를 표현하는 문법에 가깝습니다.

JSX 기본 문법은 어떻게 읽으면 될까?

입문 단계에서는 아래 기본 규칙부터 익히면 충분합니다.

기본 규칙	설명
태그처럼 작성 가능	HTML과 비슷하게 UI 구조를 작성할 수 있습니다.
JavaScript 값은 중괄호로 출력	변수, 식, 함수 호출 결과를 { } 안에 넣습니다.
여러 요소는 하나로 감싸기	반환 시 하나의 부모 요소 또는 Fragment로 묶어야 합니다.
속성 이름이 조금 다름	예: class 대신 className, onclick 대신 onClick

가장 기본적인 예제는 아래처럼 볼 수 있습니다.

function Profile() {
  const name = 'Ace';
  const age = 28;

  return (
    <div>
      <h2>{name}</h2>
      <p>나이: {age}</p>
    </div>
  );
}

여기서 중요한 포인트는 다음과 같습니다.

• {name}처럼 JavaScript 값을 JSX 안에 넣을 수 있고
• 태그 구조는 HTML처럼 읽히지만
• 실제로는 컴포넌트가 반환하는 UI 구조라는 점입니다.

자주 헷갈리는 포인트

JSX 안에서는 문장(statement)보다 값(expression)을 넣는다고 생각하면 이해가 쉽습니다. 그래서 if문 자체를 JSX 중간에 바로 넣기보다, 삼항 연산자나 논리 연산자를 더 자주 씁니다.

JSX에서 많이 쓰는 기본 문법 4가지

이 정도를 익히면 대부분의 입문 예제를 읽을 수 있습니다.

1. 중괄호로 값 넣기

변수, 숫자, 문자열, 계산식, 함수 호출 결과를 중괄호 안에 넣어 화면에 반영할 수 있습니다.

function Message() {
  const user = 'React 입문자';
  return <h3>{user}님 반갑습니다.</h3>;
}

2. 속성 넣기

HTML 속성과 비슷하지만 React 스타일로 작성합니다.

function Avatar() {
  const imageUrl = 'https://example.com/avatar.png';
  return <img src={imageUrl} alt="프로필 이미지" className="avatar" />;
}

3. 여러 태그 반환하기

여러 요소를 반환할 때는 하나의 부모 태그로 감싸거나 Fragment를 사용합니다.

function Intro() {
  return (
    <>
      <h2>React JSX</h2>
      <p>HTML처럼 보이는 UI 문법입니다.</p>
    </>
  );
}

4. 이벤트 연결하기

이벤트 이름은 camelCase로 작성합니다.

function Button() {
  const handleClick = () => {
    console.log('클릭됨');
  };

  return <button onClick={handleClick}>클릭</button>;
}

React 조건부 렌더링은 어떻게 할까?

상태에 따라 다른 UI를 보여주는 핵심 패턴입니다.

조건부 렌더링은 말 그대로 조건에 따라 화면에 보이는 내용을 다르게 처리하는 방식입니다.

예를 들어 로그인 여부에 따라 메시지를 다르게 보여줄 수 있습니다.

function Greeting({ isLogin }) {
  return <h2>{isLogin ? '환영합니다' : '로그인이 필요합니다'}</h2>;
}

이 코드는 isLogin 값이 true면 환영 메시지를, false면 로그인 안내를 보여줍니다.

React에서 조건부 렌더링은 보통 아래 3가지 방식이 많이 쓰입니다.

방식	언제 많이 쓰는가
삼항 연산자	true/false 두 경우를 모두 보여줘야 할 때
&& 연산자	조건이 맞을 때만 특정 요소를 보여줄 때
if + return 분기	조건이 복잡해 JSX 안에서 처리하기 지저분할 때

1. 삼항 연산자

가장 대표적인 방식입니다.

function LoginStatus({ isLogin }) {
  return (
    <div>
      {isLogin ? <button>로그아웃</button> : <button>로그인</button>}
    </div>
  );
}

2. && 연산자

조건이 true일 때만 보여줄 때 간단합니다.

function Notice({ isAdmin }) {
  return <div>{isAdmin && <p>관리자 전용 메뉴입니다.</p>}</div>;
}

3. if 문으로 밖에서 분기하기

조건이 길어질 때는 JSX 밖에서 처리하는 편이 더 읽기 쉽습니다.

function UserMessage({ isLoading }) {
  if (isLoading) {
    return <p>로딩 중입니다...</p>;
  }

  return <p>데이터를 불러왔습니다.</p>;
}

조건부 렌더링에서 꼭 봐야 할 포인트

간단한 한 줄 조건은 삼항 연산자나 &&가 편하지만, 조건이 여러 개로 늘어나면 JSX를 억지로 짧게 만들기보다 바깥으로 빼서 읽기 쉽게 정리하는 편이 더 좋습니다.

React 리스트 출력은 왜 map()을 쓸까?

배열 데이터를 화면으로 바꾸는 React의 기본 패턴입니다.

리스트 렌더링은 게시글 목록, 댓글 목록, 메뉴 목록처럼 배열 데이터를 반복해서 화면에 출력하는 방식입니다.

가장 많이 쓰는 패턴은 map()입니다.

function MenuList() {
  const menus = ['홈', '소개', '문의하기'];

  return (
    <ul>
      {menus.map((menu) => (
        <li key={menu}>{menu}</li>
      ))}
    </ul>
  );
}

이 코드는 배열의 각 값을 하나씩 꺼내 <li> 요소로 바꿔 출력합니다.

즉, React에서는 배열을 그대로 보여주는 것이 아니라 배열 데이터를 JSX 요소로 변환해서 렌더링한다고 이해하면 됩니다.

key는 왜 필요할까?

리스트의 각 요소를 React가 구분하기 위해 필요합니다.

React는 리스트가 변경될 때 어떤 항목이 추가·삭제·변경되었는지 더 잘 파악하기 위해 key를 사용합니다.

const users = [
  { id: 1, name: 'Kim' },
  { id: 2, name: 'Lee' },
  { id: 3, name: 'Park' }
];

function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

여기서는 user.id가 고유값이기 때문에 좋은 key가 됩니다.

리스트 출력에서 자주 하는 실수

단순히 화면 경고를 없애려고 아무 값이나 key에 넣는 것은 좋지 않습니다. 가능하면 데이터 자체의 고유 id를 쓰는 편이 안전합니다.

조건부 렌더링과 리스트 출력을 같이 쓰면 어떻게 될까?

실제 화면에서는 두 패턴이 함께 나오는 경우가 많습니다.

예를 들어 할 일 목록에서 데이터가 없으면 안내 문구를 보여주고, 데이터가 있으면 리스트를 출력할 수 있습니다.

function TodoList({ todos }) {
  return (
    <div>
      {todos.length === 0 ? (
        <p>등록된 할 일이 없습니다.</p>
      ) : (
        <ul>
          {todos.map((todo) => (
            <li key={todo.id}>{todo.text}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

이 패턴은 React에서 정말 자주 나옵니다.

• 데이터가 없으면 빈 상태 메시지 보여주기
• 데이터가 있으면 목록 출력하기
• 로딩 중이면 스피너 보여주기
• 권한이 있으면 버튼 보여주기

즉, JSX를 익힌다는 것은 단순 태그 작성이 아니라 상태와 데이터를 UI로 바꾸는 사고 방식에 익숙해지는 과정이기도 합니다.

JSX에서 자주 헷갈리는 문법 차이

HTML처럼 보이기 때문에 더 헷갈릴 수 있습니다.

헷갈리는 부분	기억하면 좋은 기준
class	JSX에서는 className 사용
for	라벨 연결은 htmlFor 사용
스타일	문자열이 아니라 객체 형태로 작성
조건문	JSX 안에서는 주로 삼항 연산자, &&, 바깥 분기를 사용

실무 관점에서 JSX를 볼 때 중요한 점

문법을 외우는 것보다 읽기 좋은 구조를 만드는 습관이 더 중요합니다.

실무에서 JSX를 쓸 때 핵심은 “짧게 쓰는 것”보다 “읽기 쉽게 쓰는 것”입니다.

특히 아래 기준을 기억하면 도움이 됩니다.

• 조건이 복잡하면 JSX 밖으로 빼기
• 리스트 key는 고유값 사용하기
• 컴포넌트가 너무 길어지면 분리하기
• 상태, 조건, 리스트가 한 화면에 섞일수록 구조를 더 단순하게 유지하기

좋은 JSX는 “멋진 문법”보다 한눈에 읽히는 UI 구조에 가깝습니다.

빠른 체크리스트

• JSX 안에서 JavaScript 값은 { }로 넣는지 확인
• 조건부 렌더링은 삼항 연산자, &&, 바깥 분기를 구분해서 쓰는지 확인
• 리스트 출력은 map()으로 처리하는지 확인
• key에는 가능한 한 고유값을 쓰는지 확인
• 문법보다 읽기 쉬운 구조로 작성했는지 확인

마무리 정리

React JSX는 화면을 HTML처럼 작성하게 도와주는 문법이지만, 실제 핵심은 상태와 데이터를 UI로 바꾸는 방식에 익숙해지는 데 있습니다.

JSX 기본 문법 = 태그 구조 + 중괄호 표현식 + React식 속성

조건부 렌더링 = 삼항 연산자, &&, if 분기

리스트 출력 = 배열 map() + 올바른 key

중요한 관점 = 짧게 쓰는 것보다 읽기 쉽게 쓰는 것이 더 중요

다음으로 같이 보면 좋은 React 글

• React란 무엇인가? 특징과 사용하는 이유
• React 프로젝트 구조 정리: src, public, components 폴더 역할
• React 개발환경 설정 방법: Node.js, Vite, npm 기본 흐름

React JSX를 이해하면 이후 컴포넌트, state, 이벤트 처리, hooks까지 훨씬 자연스럽게 연결됩니다.

onents 폴더 역할 쉽게 이해하기

• React 설치 및 개발환경 세팅 방법 | Node.js 설치부터 프로젝트 생성까지
• React Router 사용법 | 페이지 이동, Link, 기본 라우팅 적용 방법

React JSX를 이해하면 이후 컴포넌트, state, 이벤트 처리, hooks까지 훨씬 자연스럽게 연결됩니다.