[React] JSX(JavaScript XML)

목차

JSX: React에서 HTML과 JavaScript의 완벽한 조화 🎨📜

안녕하세요, 웹 개발에 열정을 가진 여러분! React를 사용하다 보면, JSX라는 용어를 자주 접하게 됩니다. JSX는 JavaScript XML의 약자로, HTML과 JavaScript를 조합한 React의 문법입니다. 이 블로그 포스트에서는 JSX의 개념을 소개하고, React에서 JSX가 어떻게 HTML과 JavaScript의 조화를 이루는지 탐색해 보겠습니다.

---

JSX란 무엇인가?

JSX는 React 개발에 있어 핵심적인 요소로, 개발자가 UI 구조를 JavaScript 코드와 함께 선언적으로 기술할 수 있게 해줍니다. 마치 HTML을 작성하듯이, 하지만 실제로는 JavaScript 내에서 실행되는 문법입니다. JSX는 브라우저에서 직접 실행될 수 없으며, Babel과 같은 트랜스파일러를 통해 일반 JavaScript 코드로 변환되어야 합니다.

 

JSX의 장점

1. 가독성: HTML과 유사한 문법으로 인해 UI 구조를 쉽게 이해하고 작성할 수 있습니다.
2. 표현력: JavaScript의 모든 기능을 활용하여 데이터를 UI에 통합할 수 있어, 동적인 컨텐츠 생성이 용이합니다.
3. 컴포넌트 기반: 컴포넌트를 논리적으로 분리하여 재사용 가능한 코드 조각을 만들 수 있습니다.

 

JSX의 기본 사용법

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

위의 코드는 JSX를 사용하여 h1 태그 안에 "Hello, world!"라는 텍스트를 포함하는 간단한 React 요소를 생성합니다. 이 요소는 나중에 DOM에 렌더링될 수 있습니다.

 

JavaScript 표현식과 JSX

JSX 안에서 JavaScript 표현식을 사용하려면, 중괄호 {}를 사용하면 됩니다. 이를 통해 변수의 값이나 함수 호출 결과 등을 JSX 안에 직접 포함시킬 수 있습니다.

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

 

조건부 렌더링과 JSX

JSX는 조건부 렌더링을 구현하는 데에도 유용합니다. JavaScript의 조건문 또는 논리 연산자를 사용하여 특정 조건에 따라 다른 UI를 표시할 수 있습니다.

const isLoggedIn = true;
const element = <h1>{isLoggedIn ? 'Welcome back!' : 'Please sign up.'}</h1>;

 

마무리하며...

JSX는 React 개발을 더욱 직관적이고 효율적으로 만들어 줍니다. HTML과 JavaScript의 조화를 통해, 복잡한 UI도 쉽게 구성할 수 있게 해줍니다. JSX의 도입은 React의 핵심적인 변화 중 하나로, 현대 웹 개발의 패러다임을 바꾸었습니다. JSX를 통해 여러분도 더욱 풍부하고 동적인 웹 애플리케이션을 만들어 보세요!

---

Reference:

Introducing JSX – React

Babel · Babel

JSX In Depth – React