JSX 개념
JSX 개념 : JSX는 HTML과 유사한 JavaScript의 구문 확장입니다.
JSX는 사용자 인터페이스를 설명하기 위해 React와 함께 사용됩니다.
JSX를 사용하면 개발자가 JavaScript 내에서 HTML과 유사한 코드를 직접 작성할 수 있으므로 UI 구조를 더 쉽게 작성하고 시각화 할 수 있습니다.
JSX 주요 특징
jsx 의 주요 특징은 다음과 같습니다.
HTML-like Syntax
JSX를 사용하면 HTML과 유사한 구문으로 요소를 작성할 수 있습니다.
const element = <h1>Hello, world!</h1>;Embedding JavaScript
중괄호 {}를 사용하여 JSX 내에 JavaScript 표현식을 삽입할 수 있습니다.
const name = 'John';
const element = <h1>Hello, {name}!</h1>;Components
JSX는 UI의 재사용 가능한 부분인 React 구성요소를 정의하는 데 자주 사용됩니다.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}HTML과 다른 점
JSX(JavaScript XML)는 HTML과 유사하지만 구문과 사용법에 몇 가지 주요 차이점과 변형이 있습니다.
class vs. className
HTML에서는 class 속성을 사용하여 요소에 대한 CSS 클래스를 정의합니다. 그러나 JSX에서는 className을 대신 사용합니다.
HTML
<div class="my-class">Hello, world!</div>JSX
<div className="my-class">Hello, world!</div>HTML Attributes to JSX Props
| HTML Attribute | JSX Prop | Example |
|---|---|---|
class | className | <div className="my-class"></div> |
for | htmlFor | <label htmlFor="inputId">Label</label> |
onclick | onClick | <button onClick={handleClick}>Click</button> |
tabindex | tabIndex | <div tabIndex="0"></div> |
maxlength | maxLength | <input maxLength={10} /> |
readonly | readOnly | <input readOnly /> |
style Attribute
HTML에서 style 속성은 문자열이였습니다.
JSX에서 style 속성은 키가 camelCased CSS 속성 이름인 js 객체입니다.
HTML
<div style="color: blue; background-color: yellow;">Styled text</div>JSX
<div style={{ color: 'blue', backgroundColor: 'yellow' }}>Styled text</div>Self-Closing Tags
HTML에서 일부 태그는 스스로 닫히지만(예: ) 태그를 닫을 필요는 없습니다.
JSX에서 모든 자체 닫힘 태그는 슬래시로 끝나야 합니다.
HTML
<img src="image.jpg" alt="Image">JSX
<img src="image.jpg" alt="Image" />JavaScript Expressions in Attributes
HTML에서 속성 값은 항상 문자열입니다.
JSX에서는 HTML 속성 값에 문자열 뿐만 아니라 중괄호 {} 안에 JavaScript 변수를 포함할 수 있습니다.
HTML
<input type="text" value="Hello">JSX
const inputValue = 'Hello';
<input type="text" value={inputValue} />Boolean 속성
HTML에서는 boolean 속성을 값 없이 작성할 수 있습니다.
JSX에서는 명시적으로 ‘true’로 설정해야 합니다.
HTML
<input type="checkbox" checked>JSX
<input type="checkbox" checked={true} />Event handler
JSX의 이벤트 핸들러 속성은 camelCase 명명 규칙을 따르며 JavaScript 함수로 전달됩니다.
HTML
<button onclick="handleClick()">Click me</button>JSX
<button onClick={handleClick}>Click me</button>Component vs JSX
React에서 컴포넌트와 JSX는 밀접한 관계가 있습니다. Component는 JSX로 표현할 수 있다고 보면 좋을 것 같습니다.
JSX는 React.createElement() 함수의 문법적 설탕(syntactic sugar)으로, 더 가독성이 높고 직관적입니다.
아래의 Component를 JSX로 작성한 것 입니다.
const element = <h1>Hello, world!</h1>동일하게 createElement() 함수를 사용해서 Component를 작성할 수 있습니다.
const element = React.createElement(
'h1',
null,
'Hello, world!'
);참고하면 좋은 글
