[React] JSX란 ?

JSX

자바스크립트는 줄여서 보통 JS라고 표기합니다. 자바스크립트 관련 라이브러리도 이름 뒤에 js를 붙여 자바스크립트의 라이브러리라는 것을 표기합니다. 리액트 역시 ReactJS로 표기하여 자바스크립트의 라이브러리라는 것을 알 수 있습니다. 그렇다면 JSX는 무엇일까요?

💡 JSX : A syntax extension to JavaScript
JSX는 자바스크립트의 확장 문법입니다.

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

JSX는 자바스크립트와 XML/HTML을 합친 것이라고 보면 됩니다. 위 코드에서 대입 연산자 기준으로 왼쪽에는 자바스크립트 문법 자료형 const와 변수 element가 있고 오른쪽에는 HTML 코드가 있습니다. 이 코드가 자바스크립트 코드와 HTML 코드가 결합되어 있는 JSX 코드입니다.

JSX 역할

JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거칩니다. 그렇기 떄문에 실제로 JSX로 코드를 작성해도 최종적으로는 자바스크립트 코드가 나옵니다.

const = (
  <h1 className="greeting">
  	Hello, world!
  </h1>
)

const element = React.createElement(
  'h1',
  { className:'greeting' },
  'Hello, world!'
)

위 두개의 코드는 JSX를 사용한 코드와 사용하지 않은 코드입니다. JSX를 사용한 코드는 내부적으로 createElement() 메서드를 사용하도록 변환되기 때문에 좀 더 쉽게 작성이 가능합니다.

JSX의 장점

• 코드가 간결해집니다.
  JSX를 사용하면 HTML과 유사한 문법을 통해 UI를 정의할 수 있어, 기존의 React.createElement() 메서드를 사용하는 방식보다 훨씬 간결하고 직관적인 코드를 작성할 수 있습니다.

const element = <h1 className="greeting">Hello, world!</h1>; //JSX

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
); // 기존 자바스크립트

JSX를 사용하면 코드의 양이 줄어들고, UI 구조를 보다 쉽게 파악할 수 있어 개발 속도가 향상됩니다.

• 가독성이 향상됩니다.
  JSX는 HTML과 유사한 문법을 사용하기 때문에, 디자이너나 프론트엔드 개발자들이 UI 레이아웃을 이해하고 수정하기 용이합니다. 컴포넌트의 구조와 내용을 직관적으로 표현할 수 있어, 팀 내 협업 시 코드의 가독성이 크게 향상됩니다. 또한, JSX는 중첩된 구조를 명확하게 보여주기 때문에 복잡한 UI를 구성할 때도 코드의 흐름을 쉽게 파악할 수 있습니다.

function Welcome(props) {
  return (
    <div className="welcome-message">
      <h1>Hello, {props.name}!</h1>
      <p>Welcome to our application.</p>
    </div>
  );
}

이러한 구조는 컴포넌트의 역할과 UI 구성을 한눈에 이해할 수 있게 도와줍니다.

• 보안성이 증가합니다.
  JSX는 기본적으로 입력값을 이스케이프 처리하여 XSS(크로스 사이트 스크립팅) 공격을 방지합니다. 예를 들어, 사용자가 입력한 값이 JSX 내에서 렌더링될 때 자동으로 이스케이프되므로, 악의적인 스크립트가 실행되지 않습니다. 이는 개발자가 별도로 보안 처리를 하지 않아도 안전한 코드를 작성할 수 있게 해주며, 보안 취약점을 줄이는 데 큰 도움이 됩니다.

const userInput = '<script>alert("XSS Attack!")</script>';
const element = <div>{userInput}</div>;

위 코드에서 userInput은 자동으로 이스케이프 처리되어 스크립트가 실행되지 않고, 단순한 텍스트로 표시됩니다.

• 개발 생산성이 향상됩니다.
  JSX는 JavaScript의 모든 기능을 사용할 수 있기 때문에, 조건부 렌더링이나 반복문 등을 쉽게 구현할 수 있습니다. 또한, 현대적인 개발 도구와의 호환성이 뛰어나며, 코드 자동 완성, 구문 강조, 오류 검출 등의 기능을 통해 개발 생산성을 크게 향상시킵니다.

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

위 예제에서는 map 메서드를 사용하여 리스트 아이템을 간편하게 렌더링하고 있습니다.

JSX 사용법

기본적으로 JSX는 자바스크립트 문법을 확장시킨 것이기 때문에, 모든 자바스크립트 문법을 지원합니다. 여기에 추가로 XML/HTML을 섞어서 사용하시면 됩니다.다음은 JSX를 사용하는 몇 가지 주요 방법들에 대한 설명과 예제입니다.

const name = 'MinJae';
const element = <h1>Hello, {name}</h1>

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element)

XML/HTML 코드를 사용하다가 중간에 자바스크립트 코드를 사용하고 싶으면 중괄호를 써서 묶어 주면 됩니다.

결론

JSX는 자바스크립트와 XML/HTML의 결합을 통해 React 개발을 보다 직관적이고 효율적으로 만들어줍니다. 중괄호를 사용한 자바스크립트 표현식 삽입, 조건부 렌더링, 리스트와 키 사용, 이벤트 처리, 인라인 스타일링 등 다양한 기능을 통해 복잡한 UI를 간결하게 구현할 수 있습니다. 이러한 JSX의 유연성과 강력한 기능들은 React를 사용하는 개발자들에게 큰 장점을 제공합니다.