JSX: 리액트(React)에서 효율적인 UI 구성하기

JSX(JavaScript XML)는 React에서 자주 사용되는 확장 문법으로, 자바스크립트 내에서 HTML과 유사한 코드를 작성할 수 있게 한다. 또한 UI 컴포넌트를 정의할 때 매우 유용하다. 이를 통해 코드가 더 직관적이고 가독성이 높아지며, 개발자들이 UI를 정의하고 관리하는 데 있어 더 편리해진다는 장점이 있다.

 

JS = JavaScript
JSX = JavaScript XML/HTML

 

 

 

JSX의 기본 개념

JSX는 XML과 유사한 문법을 사용하여, HTML 태그와 자바스크립트 코드를 혼합할 수 있게 한다. 기본적으로 JSX 코드는 브라우저에서 실행되기 전에 Babel과 같은 트랜스파일러에 의해 일반 자바스크립트 코드로 변환된다.

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

 

위 코드에서 h1 태그는 실제로는 자바스크립트의 React.createElement() 함수를 호출하는 코드로 변환된다. 이때 JSX를 사용하면 UI 요소를 더욱 직관적이고 읽기 쉽게 표현할 수 있다.

 

JSX의 역할: XML/HTML 코드를 JavaScript로 변환

JSX는 React에서 UI를 정의할 때 사용되는 문법으로, 자바스크립트와 XML/HTML의 조합을 가능하게 한다. JSX를 사용하면 UI 구성 요소를 직관적으로 작성할 수 있지만, 브라우저는 JSX를 직접 이해하지 못한다. 따라서 JSX는 내부적으로 JavaScript 코드로 변환되어야 한다.

 

JSX의 변환 과정

① JSX 문법 작성: 개발자는 JSX 문법을 사용하여 React 컴포넌트를 작성한다. 예를 들어, 다음과 같은 JSX 코드를 작성할 수 있다.

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

② 트랜스파일러를 통한 변환: 브라우저가 JSX를 이해할 수 있도록, JSX 코드는 Babel과 같은 트랜스파일러에 의해 일반 자바스크립트 코드로 변환된다. 이 과정에서 JSX 문법은 자바스크립트의 함수 호출로 바뀐다.

③ React.createElement 함수: 변환 과정에서 JSX 코드는 React의 createElement 함수 호출로 변환된다. 예를 들어, 위의 JSX 코드는 다음과 같은 자바스크립트 코드로 변환된다.

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

 

여기서 React.createElement 함수는 세 가지 인자를 받는다.

 

• 첫 번째 인자: 생성할 HTML 요소의 타입('h1')
• 두 번째 인자: 요소의 속성(여기서는 null, 속성이 없다는 의미)
• 세 번째 인자: 요소의 자식 요소(여기서는 'Hello, world!' 텍스트 노드)

 

④ React 엘리먼트 생성: React.createElement 함수는 실제로 React 엘리먼트를 생성하며, 이 엘리먼트는 React의 가상 DOM에 저장된다. 가상 DOM은 실제 DOM과의 차이를 관리하고, 효율적으로 화면을 업데이트하는 데 사용된다.

 

JSX의 장점

JSX의 간결함은 특히 많은 DOM 요소를 다루거나, 복잡한 조건부 렌더링을 수행할 때 유용하다. 전통적인 자바스크립트 코드로 UI를 작성하는 것보다 훨씬 적은 코드로 동일한 기능을 구현할 수 있어 개발 효율성이 크게 향상된다.

 

• 가독성 : HTML과 유사한 문법으로 코드의 가독성을 높여준다. 개발자는 복잡한 UI를 더 직관적으로 작성할 수 있다.
• 코드의 간결함 : JSX는 JavaScript와 HTML을 결합하여 코드를 더 간결하게 만든다. 일반적으로 DOM 요소를 생성하고 속성을 추가하는 작업을 몇 줄의 코드로 표현할 수 있어, 코드의 길이가 줄어들고 유지보수가 쉬워진다.
• 컴포넌트 기반: JSX는 React의 컴포넌트 기반 아키텍처와 잘 맞아떨어져, 재사용 가능한 UI 컴포넌트를 쉽게 정의하고 관리할 수 있다.
• 조건부 렌더링과 반복: JSX는 자바스크립트 표현식을 사용하여 조건부 렌더링 및 배열 반복 등을 간편하게 처리할 수 있다.

//JSX 사용함
<div>Hello, {name}</div>

//JSX 사용안함
React.createElement('div', null, 'Hello, ${name}');

 

JSX 예제

예제 1번

//JSX를 사용한 코드
class Hello extends React.Component {
	render( ) {
		return <div>Hello {this.props.toWhat}</div>;
	}
}

ReactDOM.render(
	<Hello toWhat="world" />,
	document.getElementById('root')
)

//JSX를 사용하지 않은 코드
class Hello extents React.Component {
	render( ) {
		return React.createElement('div', null, 'Hello ${this.props.toWhat}');
	}
}

ReactDOM.render(
 React.createElement(Hello, { toWhat: 'World' }, null),
 document.getElementById('root')
)

 

예제 2번

//JSX를 사용한 코드
const element = (
	<h1 className="greeting">
		Hello, World!
	</h1>
)

//JSX를 사용하지 않은 코드
const element = React.createElement (
	'h1',
	{ className: 'greeting' },
	'Hello, world!'
)

//React.createElement()의 결과로 아래와 같은 객체가 생성됨
const element = {
	type: 'h1',
	props: {
		className: 'greeting',
		children: 'Hello, world!'
	}
}

 

React에서 JSX를 반드시 사용해야하는 것은 아니나, JSX를 사용하지 않으면 createElement 함수를 사용해야한다.

JSX는 React에서 필수적인 역할을 하며, 자바스크립트와 HTML을 결합해 더욱 직관적이고 가독성 높은 코드를 작성할 수 있게 한다. JSX를 잘 활용하면 React 컴포넌트를 더욱 효율적으로 관리하고 개발할 수 있으며, 복잡한 UI를 간결하게 표현할 수 있다.