[React] 리액트 - JSX란?

JSX는 JavaScript XML의 약자로, HTML과 유사한 구문을 사용하여 JavaScript 코드 내에서 UI 요소를 기술하는 React의 확장 문법이다.

JXS는 개발자가 UI 구조를 보다 직관적으로 작성할 수 있도록 하고 가독성과 생산성을 향상시킬 수 있다.

JSX의 특징

1. 태그 구문 사용: HTML과 비슷한 태그를 사용하여 컴포넌트를 정의할 수 있다.
2. 자바스크립트 표현식 포함: 중괄호 {}를 사용하여 JS 표현식을 삽입할 수 있다.
3. 속성 지정: HTML과 유사하게 속성을 지정할 수 있으며, JavaScript 표현식도 속성 값으로 사용할 수 있다.
4. 자식 정의: 태그 안에 다른 컴포넌트나 HTML 요소를 자식으로 포함할 수 있다.

 

JSX 예시

App 컴포넌트는 title과 children 속성을 받아 렌더링한다.

import React from 'react';

function App(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.children}</p>
    </div>
  );
}

export default function Main() {
  return (
    <App title="Hello, JSX!">
      JSX는 JavaScript를 확장한 문법입니다.
    </App>
  );
}

 

JSX의 작동 원리

JSX 코드는 브라우저에서 직접 실행될 수 없어서 Babel 같은 트랜스파일러를 사용하여 일반 JavaScript 코드로 변환된다.

위에 코드 App 컴포넌트는 아래와 같이 변환된다.

function App(props) {
  return React.createElement(
    "div",
    null,
    React.createElement("h1", null, props.title),
    React.createElement("p", null, props.children)
  );
}

 

JSX 주의사항

1. class 넣을 땐 className 이라고 해야 한다.

function App() {
	return(
    	<div className="App">
        	<div className="black-nav>
            	<h4>블로그</h4>
            </div>        	
        </div>
    );
}

 

2. 변수 넣을 때와 데이터바인딩(서버에서 데이터 가져와서 html 사이에 보여줄 ){중괄호}

function App() {

	let post = '강남 우동 맛집';

	return(
    	<div className="App">
        	<div className="black-nav">
            	<h4 id={post}>블로그</h4>
            </div>
            <h4>{post}</h4>
        </div>
    );
}

 

3. style 넣을 땐 style={{스타일명:'값', 스타일명:'값' }}

이 때, 카멜케이스로 스타일명을 써줘야 함.
(-)대시 사용하지 않음.

function App() {

	let post = '강남 우동 맛집';

	return(
    	<div className="App">
        	<div className="black-nav">
            	<h4 style={{color:'red', fontSize : '16px'}}>블로그</h4>
            </div>
            <h4>{post}</h4>
        </div>
    );
}