[React]JSX 기초

JSX는 JavaScript XML의 약자로, React에서 HTML을 JavaScript 내부에서 작성할 수 있게 해주는 문법이다.

JSX를 사용하면 UI 구조를 직관적으로 표현할 수 있으며, JavaScript의 강력한 기능과 함께 UI 로직을 구현할 수 있다.

 

JSX의 주요 특징
1. 태그는 반드시 닫혀야 한다 : 모든 JSX 태그는 닫는 태그가 있어야 하며, 자식이 없는 태그는 자체적으로 닫힐 수 있다. 예를 들어, <div></div> 또는 <input />과 같이 작성할 수 있다.
2. JavaScript 표현식 사용 : {}를 사용하여 JavaScript 표현식을 JSX 내부에 포함시킬 수 있다. 이를 통해 변수의 값을 렌더링하거나 조건부 렌더링을 수행할 수 있다. {sample}
3. 스타일과 클래스 설정: JSX에서는 className을 사용하여 CSS 클래스를 적용하고, style 속성에 JavaScript 객체를 전달하여 인라인 스타일을 적용할 수 있다.

 

JSX 예제

import React from 'react';

function App() {
  const name = 'React';
  const isReactAwesome = true;
  
  return (
    <div>
      <h1>안녕하세요! {name}</h1>
      {isReactAwesome && <p>{name}은 정말 멋집니다!</p>}
      <input type="text" className="input" />
      <button style={{ backgroundColor: 'blue', color: 'white' }}>
        클릭하세요
      </button>
    </div>
  );
}

export default App;

javaScript 표현식 : {name}을 통해 변수 값을 JSX 내부에 포함시켰다. 또한, {isReactAwesome && <p>{name}은 정말 멋집니다!</p>}와 같이 조건부 렌더링을 수행했다.
className과 style : className을 사용하여 input 태그에 CSS 클래스를 적용했으며, button 태그에는 style 속성을 통해 인라인 스타일을 적용했다.

 

JSX 이외에도 React에서 컴포넌트를 렌더링하는 다른 방법이 있다. 바로 React.createElement 함수를 직접 사용하는 것이다.

 

React.createElement

React.createElement 함수는 JSX가 없던 시절부터 사용되어 온 방법으로, React 요소를 생성한다.

이 함수는 최소 세 개의 인자를 받을 수 있다. 태그 이름(혹은 컴포넌트), props 객체, 그리고 자식 요소들이다. 자식 요소가 여러 개일 경우, 세 번째 인자 이후로 추가적으로 인자를 제공할 수 있다.

import React from 'react';

function App() {
  return React.createElement(
    'div',
    null,
    React.createElement('h1', null, '안녕하세요!'),
    React.createElement('p', null, 'React.createElement를 사용한 예제입니다.')
  );
}

export default App;

 

JSX와 HTML의 차이점
JSX는 HTML과 유사해 보이지만, 실제로는 JavaScript의 확장이다. 따라서 JSX와 HTML 사이에는 몇 가지 차이점이 있다.
속성 이름: HTML에서는 class와 for 속성을 사용하지만, JSX에서는 JavaScript 예약어와의 충돌을 피하기 위해 className과 htmlFor를 사용한다.
스타일 설정: HTML에서는 스타일 속성에 CSS 문자열을 직접 작성하지만, JSX에서는 스타일 속성에 JavaScript 객체를 전달한다.
자바스크립트 표현식: JSX 내부에서 {}를 사용하여 JavaScript 표현식을 삽입할 수 있다. 이는 HTML 내부에서는 할 수 없다.
태그 닫기: JSX에서는 모든 태그가 닫혀야 한다. 예를 들어, HTML에서는 <input> 태그를 그대로 사용할 수 있지만, JSX에서는 <input />처럼 자체 닫기 태그를 사용해야 한다.

JSX 스타일 지정

const myStyle = {
  color: 'white',
  backgroundColor: 'blue'
};

const element = <div style={myStyle}>스타일링된 텍스트</div>;