[Main] React 기초 - JSX란?

안녕하세요^^
이번에는 JSX에 대해 알아보겠습니다.

⚛︎ JSX란?

JSX는 JavaScript XML의 줄임말로, 자바스크립트에 HTML과 비슷한 문법을 추가한 확장 문법입니다.

JSX는 React에서 UI를 만들 때 사용되는데, HTML처럼 태그와 속성을 사용하여 컴포넌트를 작성할 수 있습니다.

 

예를 들어, 다음과 같은 JSX 코드는

<h1>Hello, world!</h1>

 

브라우저에서 실행되기 전에 바벨이라는 도구를 통해 다음과 같은 자바스크립트 코드로 변환됩니다.

React.createElement("h1", null, "Hello, world!");

 

 

 

⚛︎ JSX의 장점

• 보기 쉽고 익숙하다.
  JSX는 HTML과 비슷하기 때문에 일반 자바스크립트보다 더 가독성이 좋고 작성하기 쉽습니다.
  
  
• 높은 활용도를 가진다.
  JSX에서는 HTML 태그뿐만 아니라, 개발자가 만든 컴포넌트도 JSX 안에서 사용할 수 있습니다. 이렇게 하면 UI를 재사용하고 조합하기 쉬워집니다.
  
  
• 성능이 좋다.
  JSX는 브라우저에서 실행되기 전에 컴파일되기 때문에, 런타임 오류를 줄이고 최적화된 코드를 생성할 수 있습니다.

 

⚛︎ JSX 사용에 대한 규칙

JSX를 사용하기 위해서는 몇 가지 규칙을 지켜야 합니다.

• 태그는 반드시 닫혀야 한다.
  HTML과 달리, JSX에서는 <img>, <input>, <br> 등의 단독 태그도 반드시 닫아주어야 합니다.
  예를 들어, <img src="logo.png">는 오류가 발생하지만, <img src="logo.png" />는 정상적으로 작동합니다.
• 루트 엘리먼트는 하나만 존재해야 한다.
  JSX에서는 여러 개의 태그를 반환할 수 없습니다. 따라서, 반드시 하나의 태그로 감싸주어야 합니다.
  (아래의 태그는 이해를 돕기위하여 예시로 작성된 내용입니다.)

// 오류
return (
  <h1>Hello</h1>
  <h2>World</h2>
);

// 정상
return (
  <div>
    <h1>Hello</h1>
    <h2>World</h2>
  </div>
);

 

 

• 자바스크립트 표현식을 사용하려면 중괄호로 감싸야 한다.
  JSX 안에서 변수나 함수 등의 자바스크립트 값을 사용하려면 {}로 감싸주어야 합니다.
  (아래의 태그는 이해를 돕기위하여 예시로 작성된 내용입니다.)

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

 

 

• class 대신 className을 사용해야 한다.
  HTML에서 CSS 클래스를 적용할 때는 class 속성을 사용하지만, JSX에서는 class가 자바스크립트의 예약어이기 때문에 className을 사용해야 합니다.
  (아래의 태그는 이해를 돕기위하여 예시로 작성된 내용입니다.)

<div className="container">...</div>

 

 

• 인라인 스타일은 객체 형태로 작성해야 한다.
  HTML에서 인라인 스타일을 적용할 때는 문자열 형태로 작성하지만, JSX에서는 객체 형태로 작성해야 합니다. 또한, 스타일 속성명은 카멜 표기법으로 작성해야 합니다. 예를 들어,

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

<div style={style}>...</div>

 

 

 

⚛︎ 이 글을 마치며

JSX는 자바스크립트와 HTML을 조합하여 UI를 만들 수 있는 편리하고 강력한 문법입니다. React에서 JSX를 사용하면 코드의 가독성과 재사용성을 높일 수 있습니다. JSX에 대해 더 자세히 알고 싶다면, React 공식 문서나 JSX 공식 문서를 참고하세요. 감사합니다.