JSX

 

JSX

 

JavaScript XML의 약자로, JavaScript의 확장 문법

 

HTML과 비슷하게 보이지만, 실제로는 JavaScript 코드

React에서 JSX를 사용하면 UI를 보다 직관적으로 구성 가능

 

 

직관적이고 가독성이 좋음

• JSX는 HTML과 유사해서 웹 개발자들이 직관적으로 이해하기 좋음
• 기존 JavaScript의 React.createElement() 방식보다 코드가 깔끔하고 가독성이 좋음

UI와 로직의 통함

• UI와 관련된 로직을 한 곳에서 작성 가능
  예:
  버튼을 생성, 생성한 버튼을 클릭했을 때의 동작을 같은 파일에서 정의

 

 

JSX의 사용법

 

JSX 안에서 JavaScript 사용

 

JSX 내부에서 JavaScript 표현식을 사용하려면 {} 중괄호 사용

const name = "리액트";
const element = <h1>안녕, {name}!</h1>;

위 코드에서 {name}은 변수 값을 포함하는 표현식

 

 

JSX 예제 코드

import React from 'react';

function App() {
  const name = '리액트';
  const greeting = <h1>Hello, {name}!</h1>;

  return (
    <div>
      {greeting}
      <p>{name}는 정말 멋진 라이브러리입니다!</p>
    </div>
  );
}

export default App;

• {name} : JavaScript 변수를 JSX 내부에서 사용하는 방법
• greeting : JSX를 변수에 저장해서 재사용
• <div>, <p> 태그를 이용해 UI 구성

 

 

 

JSX의 주의점

 

 

JSX는 JavaScript 표현식

 

JSX는 Babel을 통해 변환되면(컴파일) React.createElement() 호출로 변환됨

→ JSX는 실제로 JavaScript 표현식이고, 다른 코드와 자유롭게 섞을 수 있음

*컴파일 : 주어진 문법으로 작성된 컴퓨터 프로그램을 다른 언어에서 해석할 수 있게 변환하는 프로세스

 

 

태그는 반드시 닫혀야 함

 

JSX에서는 HTML과 달리 모든 태그를 닫아야 함

// ❌ 오류 발생 (닫히지 않은 태그)
<input>

✔️ 올바른 사용법
<input />

 

 

JSX 내부에서 중괄호 {} 사용

• JavaScript 표현식을 사용할 때는 {} 중괄호를 사용
• {} 내부에서는 변수, 함수, 호출, 논리 연산 등을 수행 가능

const name = "React";
<p>{name}는 정말 강력해요!</p>

 

 

class 대신 className 사용

 

JSX에서는 class가 아니라 className을 사용

<p className="title">JSX에서는 class 대신 className을 사용해요.</p>

 

 

인라인 스타일은 객체 형태로 작성

 

JSX에서 인라인 스타일을 적용할 때는 JavaScript 객체를 사용

const style = {
  color: "blue",
  fontSize: "20px"
};

<p style={style}>이 문장은 파란색입니다.</p>

속성 이름은 카멜 케이스(CamelCase) 형태를 사용 (font-size → fontSize)