JSX(JavaScript XML)는 개발자가 JavaScript 파일 내에서 HTML과 유사한 코드를 직접 작성할 수 있도록 하는 JavaScript용 구문 확장입니다. 사용자 인터페이스(UI)의 구조를 명확하고 간결하게 설명함으로써 개발 경험을 향상시키는 React의 핵심 기능 중 하나입니다.
JSX에 대해 알아야 할 모든 것은 다음과 같습니다.
JSX를 사용하면 JavaScript 내의 HTML 요소나 React 구성 요소를 나타내는 XML과 유사한 태그를 작성할 수 있습니다. JSX는 HTML처럼 보이지만 그렇지 않습니다. JSX는 Babel과 같은 도구를 사용하여 표준 JavaScript로 컴파일됩니다.
const Greeting = () => {
return <h1>Hello, World!</h1>;
};
const Greeting = () => {
return React.createElement('h1', null, 'Hello, World!');
};
JSX에 JavaScript 표현식을 중괄호 {}로 묶어 삽입할 수 있습니다.
const name = "Alice";
const Greeting = () => <h1>Hello, {name}!</h1>;
JSX는 HTML과 유사한 속성을 지원하지만 속성에 대해 camelCase 이름 지정을 사용합니다.
const Button = () => <button className="btn" onClick={() => alert('Clicked!')}>Click Me</button>;
요소를 서로 중첩하여 완전한 UI 구조를 만들 수 있습니다.
const App = () => (
<div>
<h1>Welcome</h1>
<p>This is a nested JSX structure.</p>
</div>
);
JavaScript 로직을 사용하여 요소를 조건부로 렌더링합니다.
const isLoggedIn = true;
const App = () => (
<div>
{isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Log In</h1>}
</div>
);
JSX는 UI를 정의하는 선언적 방법을 제공하여 코드를 더 읽기 쉽고 실제 UI 디자인에 더 가깝게 만듭니다.
JSX는 단지 JavaScript 함수의 구문 설탕이므로 UI 정의 내에서 로직, 상태 및 소품을 원활하게 통합할 수 있습니다.
JSX를 사용하면 기존 React.createElement() 호출에 비해 UI 코드를 더 쉽게 작성하고, 이해하고, 디버그할 수 있습니다.
JSX는 단일 루트 요소를 반환해야 합니다.
const Greeting = () => {
return <h1>Hello, World!</h1>;
};
하위 요소가 없는 요소의 경우 자체 닫는 태그를 사용하세요.
const Greeting = () => {
return React.createElement('h1', null, 'Hello, World!');
};
JSX는 스타일 속성을 통해 인라인 스타일을 지원하지만 더 나은 유지관리를 위해 CSS-in-JS 라이브러리나 외부 스타일시트를 사용하세요.
const name = "Alice";
const Greeting = () => <h1>Hello, {name}!</h1>;
JSX는 XSS 공격을 방지하기 위해 위험한 입력을 자동으로 이스케이프합니다. 예:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
