JSX(JavaScript XML)

JSX(JavaScript XML)

---

[ JSX(JavaScript XML) 란 ]

JSX(Java Script XML) 은 React 에서 사용하는 문법으로, HTML 과 유사한 구조를 JavaScript 코드 안에서 작성할 수 있도록 해준다. JSX 는 React.createElement()를 보다 직관적으로 작성할 수 있도록 변환되는 JavaScript 문법이다.

 

 

[ React  컴포넌트와 JSX의 차이 ]

▪️ React 컴포넌트는 JSX를 반환하는 함수이다. JSX(JavaScript XML) 은 JavaScript 코드 안에서 HTML과 유사한 문법을 사용하게 해주며 React 컴포넌트는 이러한 JSX를 반환하여 UI를 구성한다.

 

▪️ JSX 는 단순히 Element 를 표현하는 문법일 뿐 실제로는 React.createElement 함수를 통해 Element 객체로 변환된다. 따라서, JSX 없이도 React를 사용할 수 있다.

 

▪️ React 컴포넌트는 독립적인 단위로 구성되며, 각 컴포넌트는 자신의 상태와 속성을 관리한다. 이러한 컴포넌트는 재사용이 가능하며, 복잡한 UI를 구성하는 데 매우 유용하다.

 

[ JSX 기본 문법 ]

① JSX를 사용하면 컴포넌트에서 HTML과 유사한 태그를 작성할 수 있다.

 

const element = <h1>Hello, JSX!</h1>;

 

위 코드는 내부적으로 React.createElement('h1', null, 'Hello, JSX!')로 변환된다. 

 

const element = createElement(type, props, ...children)

// React Element
React.createElement("h1", { className: "title" }, "Hello!");

// type: <h1>
// props: {className: "title"} 
// children: "Hello!"

 

② 태그는 하나의 부모 요소로 감싸야한다.

JSX에서는 여러 개의 요소를 반환할 때 반드시 하나의 부모 요소로 감싸야 한다.

 

// 올바른 예시 1
// <div> </div> 로 감싸져있음.

function App() {
  return (
    <div>
      <h1>Title</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}

 

// 올바른 예시 2
// <> </> 로 감싸져있음

function App() {
  return (
    <>
      <h1>Title</h1>
      <p>This is a paragraph.</p>
    </>
  );
}

 

// 잘못 된 예시

function App() {
  return (
    <h1>Title</h1>
    <p>This is a paragraph.</p> // 오류 발생 (두 개의 요소가 루트로 존재)
  );
}

 

 

③ JavaScript 표현 식 사용( {  } )

 

const name = "React";
const element = <h1>Hello, {name}!</h1>;

 

// 배열이나 조건문도 { } 안에서 사용할 수 있다. 

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map(num => <li key={num}>{num}</li>);

function App() {
  return <ul>{listItems}</ul>;
}

 

<li key={index}>에서 key={index}는 React에서 리스트를 렌더링할 때 사용하는 고유한 키 값을 배열의 인덱스로 설정한 것이다.

React에서 리스트를 렌더링할 때, 각 항목을 구분할 수 있도록 key 값을 설정해야 한다.

 

④ 속성(Attributes)

 

▪️ camelCase 사용

HTML 속성명과 다르게 JSX에서는 camelCase를 사용해야 한다.

const element = <button onClick={handleClick}>Click Me</button>;

 

 

▪️ class 대신 className

JSX에서는 class 가 아닌 className 을 사용해야한다.

const element = <div className="container">Hello, JSX!</div>;

 

 

▪️ style 속성(객체사용)

JSX에서 style 속성은 객체로 전달해야한다.

const element = <div style={{ color: "blue", fontSize: "20px" }}>Styled Text</div>;

 

 

⑤ 조건부 렌더링

JSX에서 조건문을 사용하는 방법은 여러가지가 있다.

 

▪️ 삼항 연산자 사용

const isLoggedIn = true;
const element = <h1>{isLoggedIn ? "Welcome!" : "Please log in"}</h1>;

 

▪️ && 연산자 사용

const messages = ["Hello", "React"];
const element = (
  <div>
    {messages.length > 0 && <h2>You have {messages.length} new messages.</h2>}
  </div>
);

 

&& 연산자는 왼쪽 조건이 true일 때만 오른쪽 값을 평가한다.

 

⑥ 이벤트 핸들링

JSX에서는 이벤트를 camelCase로 작성하며, 이벤트 핸들러는 함수로 전달된다.

 

function handleClick() {
  alert("Button clicked!");
}

const element = <button onClick={handleClick}>Click Me</button>;

 

 

⑦ 컴포넌트 사용

JSX에서 컴포넌트를 사용할 때는 대문자로 시작하는 컴포넌트명을 사용해야한다.

 

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

 

 

 

 

---

Reference

createElement – React

React 컴포넌트와 JSX의 차이점 이해하기