[React] html 과 리액트 비교해보기

 

lionbum.tistory.com

 

Html 익숙하기에, 리액트를 빠르게 이해해 보고자 두개를 비교해 봤습니다. 

리액트 문법과 HTML 문법의 차이

리액트 문법과 전통적인 HTML 문법의 주요 차이점

1. JSX란 무엇인가?

리액트는 UI를 구성할 때 JSX라는 문법을 사용합니다.

JSX는 JavaScript XML의 약자로, JavaScript 코드 안에서 HTML과 비슷한 코드를 작성할 수 있도록 해줍니다.
즉, 리액트 문법은 기본적으로 JavaScript 코드 내에 HTML 구조를 작성하는 방식입니다.

 

2. 속성 이름의 차이

HTML 속성JSX 속성 설명

 

HTML 속성	JSX 속성	설명
class	className	class는 JS 예약어라 변경됨
for	htmlFor	라벨 연결 시 사용
tabindex	tabIndex	카멜케이스 표기법 사용
onclick	onClick	이벤트는 카멜케이스

* 리액트에서는 HTML 속성을  자바스크립트 변수명 스타일(카멜케이스) 로 바꿔서 사용해야 합니다.

3. 스타일 지정 방법

• HTML에서는 style="color: red; font-size: 16px;"처럼 문자열로 CSS를 직접 작성합니다.
• 리액트에서는 스타일을 객체로 표현합니다.

// HTML
<div style="color: red; font-size: 16px;"></div>

// JSX
<div style={{ color:'red',fontSize:'16px'}}></div>

 

리액트에서는 CSS 속성명이 카멜케이스(font-size → fontSize)로 바뀌고, 값은 문자열로 감싸서 객체 형태로 전달해야 합니다.

4. 태그 닫기 규칙

• HTML에서는 <img>, <input> 등 일부 태그를 닫지 않아도 동작합니다.
• JSX에서는 모든 태그를 닫아야 합니다.

// HTML
<img src="logo.png">

// JSX
<img src="logo.png" />

 

모든 태그는 반드시 닫는 태그가 필요하며, 빈 태그일 경우엔 스스로 닫는 형태(/ >)를 사용합니다.

5. JavaScript 표현식 삽입

리액트 JSX에서는 중괄호 {}를 이용해 JavaScript 코드를 삽입할 수 있습니다.

const name = 'ChatGPT';

// JSX
<p>Hello, {name}!</p>

 

이는 HTML 문법에선 불가능하며, 리액트가 제공하는 강력한 기능 중 하나입니다.

6. 조건부 렌더링과 반복문

리액트에서는 JSX 내부에 조건문이나 반복문을 직접 사용할 수 없지만, 중괄호 {} 안에서 삼항 연산자나 map() 함수 등을 써서 UI를 동적으로 구성합니다.

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

// JSX
<ul>
  {items.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

HTML은 정적인 마크업이기 때문에 이런 동적 처리 기능이 없으며, 리액트가 제공하는 JavaScript 통합 덕분에 가능해진 기능입니다.

정리

 

구분	HTML	리액트(JSX)
문법 유형	순수 마크업 언어	JavaScript 안에 HTML 유사 문법
속성명	소문자, class, for	카멜케이스, className, htmlFor
스타일	문자열 CSS	객체 형태의 스타일
태그 닫기	일부 태그는 닫지 않아도 됨	모든 태그 반드시 닫아야 함
동적 데이터 삽입	불가능	{} 안에 JavaScript 표현식 삽입 가능
반복 및 조건	불가능	JavaScript로 동적 처리 가능

 

 

 

 

 

HTML vs 리액트(JSX) 태그 문법 비교

태그이름	HTML 문법예시	React 문법 예시	차이점 요약
클래스 지정	<div class="box"></div>	<div className="box"></div>	class → className
라벨 연결	<label for="input-id">이름</label>	<label htmlFor="input-id">이름</label>	for → htmlFor
스타일 적용	<div style="color: red;"></div>	<div style={{ color: 'red' }}></div>	문자열 → 객체형 스타일
이벤트 바인딩	<button onclick="handleClick()">Click</button>	<button onClick={handleClick}>Click</button>	onclick→ onClick, 함수 직접 전달
input 태그	<input disabled>	<input disabled={true} />	속성은 boolean 처리 필요
태그 닫기	<img src="img.jpg">	<img src="img.jpg" />	셀프 클로징 필수
br 태그	<br>	<br />	셀프 클로징 필수
속성명 표기	<div tabindex="0"></div>	<div tabIndex={0}></div>	카멜케이스 사용
주석 처리	<!-- 주석 -->	{/* 주석 */}	JS 스타일 주석 사용

주의

• JSX는 JavaScript 안에 HTML을 쓰는 것이기 때문에, HTML처럼 보여도 사실은 JS 문법이 섞여 있어요.
• 태그는 항상 닫아야 하고, 속성 값은 중괄호 {} 안에 자바스크립트 표현식을 써야 하는 경우가 많습니다.

 

참고, html 기본 

 https://www.elancer.co.kr/blog/detail/791