자바스크립트가 HTML 태그를 직접 리턴할 수 없는 이유

HTML 태그 자체를 자바스크립트 코드로 직접 리턴할 수 없는 이유는 주로 자바스크립트의 문법 구조와 HTML의 문법 구조가 서로 다르기 때문이라고 한다.

 

1. 문법 차이

자바스크립트는 프로그래밍 언어로, 특정한 문법 규칙을 따른다. 반면 HTML은 마크업 언어로, 웹 페이지의 구조를 정의하는 데 사용된다. 자바스크립트 코드 안에서 HTML 태그를 직접 사용할 경우, 자바스크립트의 문법에 맞지 않게 된다.

예를 들어:

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

 

위 코드는 자바스크립트 문법으로서는 올바르지 않기 때문에 오류를 발생시킨다. 자바스크립트는 HTML 태그를 인식하지 않으며, 이러한 문법은 자바스크립트 코드로 해석되지 않는다.

 

 

2. 자바스크립트의 실행 컨텍스트

자바스크립트는 브라우저에서 실행될 때, HTML 문서의 구조와 내용을 이해하고 해석할 수 있는 맥락(Context)에서 실행된다. 하지만 HTML 태그는 자바스크립트 코드 내에서 일반적인 코드와는 다른 형식으로 처리되기 때문에, 다음과 같은 이유로 HTML 태그를 직접 사용할 수 없다.

다른 말로, 실행 컨텍스트는 자바스크립트 코드의 실행 환경을 정의하는데, 이 환경에서는 HTML 태그가 존재하지 않기 때문에 HTML를 직접 사용하거나 리턴할 수 없다. 이 때문에, 자바스크립트 코드를 통해 HTML을 생성하려면 문자열로 표현하거나 DOM API를 활용해야 한다

 

 

3. HTML을 문자열로 처리해야 함

자바스크립트에서는 HTML을 문자열로 처리해야 하고, 이를 위해 HTML 태그를 문자열로 감싼다.

 

예를 들어:

function render() {
    return '<h1>Hello, World!</h1>'; // 문자열로 리턴
}

 

이렇게 하면 HTML 태그를 문자열로 감싸면 HTML 형식이 된다. 그러나 브라우저가 이 문자열을 HTML로 해석하지 않기 때문에 페이지에 표시되지 않는다.

 

 

4. DOM 조작을 통한 HTML 생성

자바스크립트에서 HTML을 생성하려면, DOM(Document Object Model) API를 사용하여 HTML 요소를 생성해야 한다. 이를 위해  일반적으로 `document.createElement`와 같은 메서드를 사용한다.

 

예를 들면:

function render() {
    const element = document.createElement('h1');
    element.textContent = 'Hello, World!';
    return element; // DOM 요소를 리턴
}

 

이렇게 작성하면 브라우저는 DOM 요소를 생성하고 이를 웹 페이지에 추가할 수 있다.

 

 

5. 결론

이러한 이유로, 자바스크립트 코드 안에서 HTML 태그를 직접 리턴하는 것이 불가능하다. 이 문제를 해결하기 위해 JSX를 사용한다. JSX는 자바스크립트 코드 안에서 HTML과 유사한 문법을 사용하게 해주며, 최종적으로는 자바스크립트로 변환되어 브라우저가 이해할 수 있는 는 HTML로 처리되고 UI를 더 쉽게 작성할 수 있도록 도와준다.