HTML과 React JSX의 주요 차이점

📌 HTML  vs  React JSX

 

	HTML	JSX
태그	class	className
<label>	for	htmlFor
<input>	value	value,   defaultValue
<input>	checked	checked,   defaultChecked
태그	style 속성에 문자열	style 속성에 {객체}

 

 

 

 

ℹ️ 태그의 className

✅ HTML ➡︎ class 사용

<div class="my-class">Hello World</div>

 

 

☑️ JSX ➡︎ className 사용

<div className="my-class">Hello World</div>

 

 

 

ℹ️ <label> 태그의 htmlFor

✅ HTML ➡︎ for 사용

<label for="username">Username:</label>
<input id="username" type="text" />

 

 

☑️ JSX ➡︎ htmlFor 사용

<label htmlFor="username">Username:</label>
<input id="username" type="text" />

 

 

ℹ️ <input> 태그의 defaultValue 

✅ HTML ➡︎ value 사용

<input type="text" value="Initial value" />

 

 

☑️ JSX ➡︎ value,  defaultValue 사용

• value: 값을 동적으로 제어할 때 사용

function ControlledInput() {
  const [value, setValue] = useState('Initial value');
  
  return (
     <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
  );
}

 

• defaultValue: 초기 값을 설정할 때 사용 (읽기 전용(수정 ❌))

function UncontrolledInput() {

  return (
     <input type="text" defaultValue="Initial value" />
  );
}

 

 

 

ℹ️ <input> 태그의 defaultChecked

✅ HTML ➡︎ checked 사용

<input type="checkbox" checked />

 

 

☑️ JSX ➡︎ checked,  defaultChecked 사용

• checked: 체크 상태를 제어할 때 사용

function ControlledInput() {
  const [value, setValue] = useState('Initial value');
  
  return (
     <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
  );
}

 

• defaultChecked: 초기 체크 상태를 설정할 때 사용 (읽기 전용(수정 ❌))

function UncontrolledCheckbox() {

  return (
     <input type="checkbox" defaultChecked />
  );
}

 

 

 

ℹ️ 태그의 style

✅ HTML ➡︎ style 속성에 문자열 전달

<div style="color: red;">Text</div>

 

 

☑️ JSX ➡︎ style 속성에 {객체} 전달

<div style={{ color: 'red' }}>Text</div>

 

 

---

 

<input> – React