리액트에서 HTML을 자바스크립트처럼 쓰는 법: JSX 이해하기

자바스크립트는 웹 페이지를 동적으로 만들 때 매우 중요한 역할을 하지만, HTML 태그 자체를 자바스크립트 코드로 직접 리턴할 수 없다. 그래서 JSX라는 특별한 문법을 사용하는데, 이것이 리액트에서 자바스크립트로 HTML과 비슷한 구문을 작성할 수 있게 도와준다.

자바스크립트가 HTML 태그를 직접 리턴할 수 없는 이유
https://sodol-dotcom.tistory.com/75

 

 

1. 기본 개념 이해:

• 자바스크립트는 프로그래밍 언어로, 웹 페이지에서 여러 작업을 처리하고 데이터를 다루는 데 주로 사용된다. 자바스크립트로 HTML 태그를 만들려면 주로 `document.createElement` 같은 메서드를 사용해야 한다. 하지만 이 방식은 복잡하고 코드가 길어질 수 있다.
• HTML은 웹 페이지를 구조화하는 언어로, `<div>`, `<h1>`, `<p>` 같은 태그를 사용하여 페이지에 텍스트나 이미지를 배치할 수 있다. 자바스크립트로 HTML을 다루려면 이런 태그들을 코드로 작성해야 한다.

 

 

2. JSX란?

JSX는 "JavaScript XML"의 줄임말로, 리액트에서 HTML과 비슷하게 생긴 코드를 자바스크립트 안에서 쉽게 쓸 수 있게 도와준다. 리액트는 컴포넌트 기반의 라이브러리로, 화면에 나타날 내용을 컴포넌트로 나누어 관리한다. 이때, HTML 태그를 쓰고 싶을 때 JSX를 사용한다.

 

 

3. 예시로 이해하기

• 자바스크립트로 HTML을 리턴하지 않는 이유:
  자바스크립트는 HTML을 직접 리턴하지 못한다. 아래 코드에서 `<h1>` 태그는 자바스크립트 코드에서 바로 인식되지 않는다. 그래서 자바스크립트는 HTML을 리턴할 수 없다. 그래서 다음과 같은 코드는 오류를 발생시킨다.

function renderHTML() {
    return <h1>Hello, World!</h1>;  // 오류 발생
}

 

 

• JSX 사용 시:
  JSX를 사용하면 위와 같은 문제를 해결할 수 있다. JSX를 쓰면 자바스크립트 안에서 HTML을 바로 작성하는 것 처럼 보이지만, 실제로는 자바스크립트 코드로 변환된다. (리액트가 JSX를 변환해 자바스크립트 함수로 바꿔주는 과정이다.)

function renderHTML() {
    return <h1>Hello, World!</h1>;  // JSX를 사용한 리턴
}


// 리액트는 이 JSX 코드를 자바스크립트 코드로 변환하여 브라우저가 이해할 수 있는 HTML로 바꿔준다.
// 그래서 위의 JSX 코드는 아래처럼 바뀌게 된다.
function renderHTML() {
    return React.createElement('h1', null, 'Hello, World!');
}

 

 

4. JSX가 필요한 이유

• 코드가 더 직관적: JSX를 사용하면 마치 HTML을 작성하는 것처럼 코드를 쓸 수 있어 직관적이고 코드 가독성이 좋다.
• 컴포넌트 기반 개발: 리액트는 화면을 작은 컴포넌트로 나누어 개발하는 방식이므로, 각 컴포넌트에서 JSX를 사용하여 UI를 쉽게 정의할 수 있다.
• HTML과 자바스크립트 결합: JSX를 사용하면 자바스크립트 코드 안에서 HTML을 손쉽게 결합할 수 있어, 동적인 웹 페이지를 만들 때 편리하다.

 

 

5. 정리

• 자바스크립트는 HTML을 직접 리턴하지 못하지만, 리액트에서 JSX를 사용하면 HTML과 비슷한 문법을 자바스크립트 안에서 사용할 수 있다.
• JSX는 리액트가 브라우저에 표시될 UI를 정의하는 매우 강력한 도구이다.
• 리액트가 JSX를 자바스크립트 코드로 변환해 브라우저에 전달하기 때문에, 우리는 HTML 태그를 사용하는 것처럼 직관적으로 코드를 작성할 수 있다.