JSX - HTML + 자바스크립트

정혜인·2024년 9월 24일

react

목록 보기

11/14

💡 JSX(JavaScript XML)라는 JavaScript에 XML을 추가하여 확장한 문법

❗ JSX는 ReactElement 를 생성

❗ ReactElement는 브라우저 DOM 엘리먼트와 달리 일반 객체

❗ 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 js문법은 아님 ❌

❗ 브라우저에서 실행하기 전에 바벨을 사용하여 일반 js 형태의 코드로 변환됨

가독성 : JSX를 사용하면 HTML과 유사한 문법을 통해 UI 구조를 직관적으로 파악 가능, 이는 특히 컴포넌트가 복잡해질수록 코드의 가독성을 크게 높여줌
JS와의 호환 : JSX는 자바스크립트의 기능을 그대로 사용할 수 있음. 예를 들어, JSX 안에서 조건부 렌더링이나 반복문을 손쉽게 사용할 수 있어 동적인 UI를 쉽게 구현할 수 있음.
```
function Hello(props) {
  if (props.isLoggedIn) {
    return <h1>안녕하세요.</h1>;
  } else {
    return <h1>로그인이 안 되었다고요.</h1>;
  }
}
```
위 코드처럼 JSX 안에서 조건문을 통해 컴포넌트의 출력 결과를 동적으로 제어 가능
컴포넌트 기반 구조 : JSX는 React의 컴포넌트 구조와 자연스럽게 통합되어 컴포넌트를 작성할 때 JSX를 사용하면, 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있음

JSX는 실제로는 자바스크립트 함수 호출로 변환됨.

<h1>Hello, World!</h1>

위 코드는

 React.createElement('h1', null, 'Hello, World!')

로 변환되며, 이 함수는 다음과 같이 ReactElement 타입으로 반환

const element = {
  type: 'h1',
  props: {
    children: 'Hello, World!'
  }
};

React는 이 객체를 기반으로 가상 DOM에 엘리먼트를 추가하고, 변경 사항이 있을 때마다 효율적으로 실제 DOM에 반영

이에 대한 자세한 내용은 벨로그 글 참고

단일 루트 요소: JSX 문법에서 모든 JSX 표현식은 단일한 루트 요소로 감싸져야 함.

(여러 엘리먼트를 하나의 부모 요소로 감싸는 구조가 필요)

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

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

대문자로 시작하는 컴포넌트 이름: JSX에서 컴포넌트는 반드시 대문자로 시작해야 함.

(소문자로 시작하면 HTML 태그로 인식되기 때문)