[ React ]JSX란 무엇인가?

**JSX (JavaScript XML)**는 React에서 UI를 만들 때 사용되는 독특한 문법입니다. 자바스크립트 내에서 HTML과 비슷한 구문을 사용해 UI 컴포넌트를 더욱 직관적이고 효율적으로 작성할 수 있게 도와줍니다. 이번 글에서는 JSX의 개념, 사용법, 그리고 그 장점에 대해 자세히 알아보겠습니다.

1. JSX란?

JSX는 JavaScript의 확장 문법으로, HTML과 유사한 코드를 작성할 수 있도록 도와줍니다. 그러나, JSX는 단순한 HTML이 아닌 자바스크립트 코드의 일부분이며, 최종적으로는 브라우저가 이해할 수 있는 순수한 JavaScript로 변환됩니다. 이 덕분에 우리는 UI를 구축할 때 직관적이고 읽기 쉬운 코드를 작성할 수 있습니다.

다음은 기본적인 JSX 코드의 예입니다:

 

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

 

위 코드는 React에서 사용되며, 컴파일되면 다음과 같은 자바스크립트 코드로 변환됩니다.

const element = React.createElement('h1', null, 'Hello, world!');

 

즉, JSX는 내부적으로 React.createElement 호출로 변환되며, 이 호출은 React가 DOM에 요소를 추가하거나 갱신하는 방식으로 작동합니다.

2. JSX의 특징

(1) HTML과 유사한 문법

JSX의 가장 큰 특징 중 하나는 HTML과 매우 비슷한 문법을 사용한다는 점입니다. 덕분에 HTML을 잘 아는 개발자라면 JSX를 사용하는 데 어려움이 없습니다. 하지만 HTML과 완전히 같지는 않고, 몇 가지 중요한 차이점이 있습니다.

(2) 자바스크립트 표현식 사용

JSX에서는 중괄호 {}를 사용해 자바스크립트 표현식을 사용할 수 있습니다. 예를 들어, 변수 또는 함수의 결과를 JSX 내부에서 바로 사용할 수 있습니다.

 

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

 

위 코드는 name 변수의 값을 삽입하여 "Hello, John!"이라는 텍스트를 출력합니다.

(3) 태그는 반드시 닫혀야 함

JSX의 모든 태그는 반드시 닫혀야 합니다. HTML에서는 일부 태그가 열리고 닫히지 않아도 동작할 수 있지만, JSX에서는 단일 태그는 반드시 /로 닫혀야 합니다.

const element = <img src="image.jpg" alt="Example" />;

 

(4) class 대신 className 사용

JSX에서는 HTML의 class 속성 대신 className을 사용합니다. 이는 자바스크립트의 예약어인 class와 충돌을 피하기 위함입니다.

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

 

(5) JSX는 JavaScript로 컴파일됨

JSX는 최종적으로 순수한 JavaScript로 변환되며, 이는 React의 createElement 함수로 DOM을 직접 조작하는 방식으로 실행됩니다. 따라서 JSX를 사용할 때 자바스크립트의 모든 기능을 사용할 수 있습니다.

3. JSX의 장점

(1) 직관적이고 읽기 쉬운 코드

HTML과 유사한 문법을 사용하기 때문에 JSX는 매우 직관적입니다. 이는 특히 UI 컴포넌트를 작성할 때 코드의 가독성을 높이는 데 큰 장점을 제공합니다. 개발자는 쉽게 구조를 파악할 수 있으며, UI와 자바스크립트 로직이 결합된 형태로 간편하게 관리할 수 있습니다.

(2) 동적 UI 구현 용이

JSX는 자바스크립트 코드와 완벽하게 결합되므로, 변수나 함수의 결과를 UI에 쉽게 반영할 수 있습니다. 이는 동적인 UI를 만들 때 매우 유용합니다. 조건부 렌더링이나 리스트 렌더링 등을 직관적으로 구현할 수 있습니다.

 

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      <h1>{isLoggedIn ? "Welcome back!" : "Please sign up."}</h1>
    </div>
  );
}

 

위 예시는 props.isLoggedIn 값에 따라 "Welcome back!" 또는 "Please sign up."이라는 문구를 출력하는 JSX 코드입니다. JSX 덕분에 매우 간결하게 조건부 렌더링을 구현할 수 있습니다.

(3) 컴파일 시점에서 에러 감지 가능

JSX는 빌드 도구에 의해 컴파일됩니다. 이 과정에서 문법 오류나 잘못된 코드를 사전에 감지할 수 있어, 개발 중 발생할 수 있는 문제를 줄이고 디버깅 시간을 단축시킬 수 있습니다.

4. JSX 사용 예시

다음은 JSX를 사용한 간단한 React 컴포넌트 예시입니다. 사용자의 로그인 상태에 따라 다른 메시지를 출력하는 UI를 구현했습니다.

 

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      <h1>{isLoggedIn ? "Welcome back!" : "Please sign up."}</h1>
    </div>
  );
}

ReactDOM.render(
  // isLoggedIn을 true로 전달해 로그인 상태를 설정합니다.
  <Greeting isLoggedIn={true} />,
  document.getElementById('root')
);

 

이 예시는 ReactDOM을 사용하여 Greeting 컴포넌트를 DOM에 렌더링 합니다. 로그인 상태에 따라 적절한 인사말이 표시됩니다.

5. JSX는 선택사항일까?

JSX는 React에서 사용되는 문법이지만, 필수는 아닙니다. JSX 없이도 순수 JavaScript로 React 코드를 작성할 수 있습니다. 그러나 JSX는 코드의 가독성과 유지 보수성을 높여주기 때문에 대부분의 React 프로젝트에서 기본적으로 사용됩니다.

 

const element = React.createElement('h1', null, 'Hello, world!');

 

위 코드는 JSX 없이 React에서 UI를 작성하는 방법이지만, JSX를 사용한 코드보다 직관적이지 않고 길어집니다. 그래서 JSX는 React 개발자들에게 매우 선호되는 선택사항입니다.

결론

JSX는 React에서 UI를 직관적이고 간결하게 작성할 수 있도록 도와주는 매우 유용한 문법입니다. 자바스크립트 코드와 결합된 HTML 유사 문법 덕분에 동적 UI를 쉽게 구현할 수 있으며, 컴파일 단계에서 에러를 감지할 수 있어 안정적인 개발 환경을 제공합니다. React를 배우는 데 있어 JSX는 필수적인 개념이므로, JSX의 문법과 작동 방식을 잘 이해하는 것이 중요합니다.

JSX 덕분에 우리는 더욱 효율적으로 UI를 구축하고, 유지 보수성을 높일 수 있습니다. 아직 JSX를 사용해보지 않았다면, React 프로젝트에서 JSX를 활용해 직관적이고 간결한 코드를 작성해 보세요.