React – JSX와 렌더링 – JSX 문법 – 0 – JSX란 무엇인가 (HTML과 차이)

작성자 wooah
React – JSX와 렌더링 – JSX 문법 – 0 – JSX란 무엇인가 (HTML과 차이)

React – JSX와 렌더링 – JSX 문법 – 0 – JSX란 무엇인가 (HTML과 차이)

안녕하세요! 😊 오늘부터는 React의 가장 핵심이자 첫 걸음인 JSX에 대해 하나씩 배워볼 거예요. 이번 글에서는 JSX란 무엇인지, 그리고 우리가 흔히 알고 있는 HTML과 어떤 차이가 있는지를 친절하고 알기 쉽게 풀어드릴게요!

JSX란 무엇인가요?

JSX는 JavaScript XML의 줄임말이에요.
한마디로 말하자면…

JavaScript 코드 안에 HTML처럼 보이는 문법을 쓸 수 있게 해주는 문법 확장입니다.

예를 들어 아래 코드를 보세요:

const element = <h1>Hello, world!</h1>;

이건 얼핏 보면 HTML 같지만, 사실은 JavaScript 코드예요!

왜 JSX가 필요한가요?

JSX는 단순히 예쁘게 보이기 위한 장식이 아니에요. 다음과 같은 장점이 있답니다:

🎯 1. UI 구성 요소를 코드처럼 조작할 수 있어요

  • JavaScript의 유연함과 HTML의 직관성을 동시에 얻을 수 있어요.
  • 반복, 조건문, 변수 삽입 등이 자연스럽게 가능해요.

🚀 2. 코드 가독성 향상

  • UI 구조를 그대로 코드로 표현할 수 있어서 직관적이에요.
  • 협업 시에도 “이게 화면의 어떤 부분인지” 한눈에 보여요.

JSX vs HTML 비교해보기

JSX는 HTML과 매우 비슷하게 생겼지만, 몇 가지 중요한 차이점이 있어요.
표로 한 번 비교해볼게요!

항목 HTML JSX
속성 이름 class, for className, htmlFor
닫는 태그 일부 태그 생략 가능 모든 태그 닫아야 함
JavaScript 표현 불가능 {}로 감싸서 가능
다중 요소 반환 가능 반드시 하나의 부모 요소로 감싸야 함

JSX 문법 예시

✅ HTML처럼 보이지만 JavaScript인 코드

const element = <h1>안녕하세요, React!</h1>;

✅ 표현식 사용

const name = '홍길동';
const greeting = <p>안녕하세요, {name}님!</p>;

JSX에서는 중괄호 {} 안에 JavaScript 표현식을 넣을 수 있어요!

✅ class → className

// HTML
<div class="container">내용</div>

// JSX
<div className="container">내용</div>

⚠️ class는 JavaScript에서 예약어라서, JSX에서는 className으로 바꿔야 해요!

✅ 닫는 태그 필수

// HTML에선 <img> 이렇게 써도 됨
<img src="logo.png">

// JSX에선 반드시 닫아야 함
<img src="logo.png" />

셀프 클로징 태그는 반드시 /> 형태로 끝나야 해요!

JSX는 어떻게 동작하나요?

JSX는 브라우저가 바로 이해할 수 있는 문법이 아니에요.
실제로는 Babel이라는 도구가 아래처럼 변환해줍니다:

const element = <h1>안녕</h1>;

⬇️ Babel이 변환

const element = React.createElement('h1', null, '안녕');

즉, JSX는 React.createElement() 함수의 간편한 표현 방식이에요.
그래서 JSX가 없어도 React는 동작하지만, 개발자 입장에선 훨씬 편하겠죠?

JSX가 없으면 어떻게 될까?

비교해볼게요!

// JSX 사용
const element = <button>클릭</button>;

// JSX 없이
const element = React.createElement('button', null, '클릭');

🧠 어때요?
JSX를 쓰는 쪽이 훨씬 간결하고 가독성도 좋죠?

JSX는 단순한 템플릿이 아니다!

중요한 점! JSX는 템플릿 언어가 아니라, JavaScript의 일부라는 점이에요.

즉, 아래처럼도 사용할 수 있어요:

function getGreeting(user) {
  if (user) {
    return <h1>안녕하세요, {user.name}님!</h1>;
  }
  return <h1>환영합니다!</h1>;
}

HTML 템플릿처럼 고정된 게 아니라, 동적으로 JavaScript 문법을 모두 활용할 수 있는 게 핵심이에요!

JSX 컴포넌트로의 확장

JSX는 결국 컴포넌트를 만들기 위한 밑바탕이에요.

function Welcome(props) {
  return <h1>안녕하세요, {props.name}님</h1>;
}

사용할 때는 JSX 문법으로:

<Welcome name="철수" />

JSX는 컴포넌트 정의와 사용 모두를 시각적으로 명확하게 만들어줍니다.

주의할 점 정리

항목 주의사항
속성 이름 HTML과 다르게 className, htmlFor 등을 사용해야 해요
닫는 태그 <input>, <img> 등도 반드시 />로 닫아야 해요
표현식은 {}로 숫자, 변수, 함수 결과 등을 넣을 땐 반드시 {}로 감싸야 해요
반드시 하나의 부모 요소 JSX는 항상 하나의 최상위 요소로 감싸야 해요 (예: <div> 또는 <></>)
로직은 JSX 외부에서 if문은 JSX 내부가 아니라 JS 코드로 분기 처리하고 JSX 안에서는 삼항연산자 사용 권장

마무리하며

JSX는 처음엔 낯설 수 있지만, 곧 JavaScript로 HTML을 마법처럼 조작할 수 있는 도구가 된다는 걸 알게 되실 거예요.

JSX를 알면 React의 UI 구성 방식이 자연스럽게 이해되고, 더 효율적이고 직관적인 코드를 작성할 수 있게 됩니다!

다음 글에서는 JSX에서 중괄호 표현식과 JavaScript 코드 섞기에 대해 배워보겠습니다.
우리 함께 점점 더 React 전문가로 성장해봐요! 🚀

답글 남기기