JSX 또는 HTML 중 어느 것이 더 좋습니까?

HTML과 JSX의 정의부터 시작하겠습니다.

HTML은 환상적입니다. 웹 페이지의 구조를 관리하는 문서의 표준 언어는 HTML(Hypertext Markup Language)입니다. 자료가 온라인에 표시되는 방식을 규제하고 웹페이지의 구조를 설정합니다. 지금 보고 있는 것은 브라우저가 읽고 처리한 HTML 코드입니다. 그러나 HTML은 프로그래밍 언어가 아닙니다.

반면에 JSX는 JavaScript Syntax Extension 또는 JavaScript XML이라고 부르는 것을 선호합니다.
React.createElement() 에 대한 구문 설탕으로 작성되었습니다. 개발자가 JavaScript 내에서 직접 HTML을 빌드할 수 있도록 하는 JavaScript 플러그인입니다. 따라서 JSX를 작성할 때 실제로는 JavaScript와 HTML을 동시에 작성하는 것입니다. HTML 대신 JSX에 대해 이야기해 봅시다. JSX의 기초를 살펴보고 JSX와 HTML의 주요 차이점을 살펴보고 일반적인 JSX의 어려움과 관련하여 자주 묻는 질문으로 마무리하겠습니다.

HTML은 인터넷의 가장 기본적인 구성 요소입니다. 웹 콘텐츠의 중요성과 구성을 설정합니다. HTML 요소는 ""및 ">"로 둘러싸인 요소 이름인 "태그"로 문서의 다른 텍스트와 구별됩니다. 반면에 JSX는 JavaScript의 구문 확장이며 문자열도 HTML도 아닙니다. JSX는 React에서 HTML 생성 및 추가를 단순화합니다.

HTML과 JSX의 주요 차이점

다음은 HTML과 JSX의 몇 가지 차이점입니다.

1. JSX에서는 단일 부모 요소를 반환해야 합니다.
HTML과 JSX의 가장 중요한 차이점 중 하나는 JSX를 사용하는 경우 단일 부모 요소를 반환해야 하며 그렇지 않으면 코드가 컴파일되지 않는다는 것입니다. 많은 개발자가 <div> ...</div> 를 사용하지만 "조각"< >...</> 은 코드를 더 이해하기 쉽게 만들어주기 때문에 많은 사람들이 선택하는 우수한 옵션입니다. HTML에서 단일 부모 요소를 반환할 필요가 없으므로 원하는 대로 수행할 수 있습니다.

이 경우 상위 요소가 없기 때문에 JSX가 컴파일되지 않는 것을 볼 수 있습니다.

이 경우 부모 요소가 있기 때문에 JSX는 컴파일(조각) 중입니다.

2. JSX에서는 JS를 바로 사용할 수 있습니다.

JSX에서 기본적으로 JavaScript를 작성하는 것이 가능합니다. 이렇게 하려면 JavaScript를 중괄호로 묶어야 합니다{...}. JavaScript를 HTML에 통합하려면 스크립트 요소 또는 외부 JavaScript 파일이 필요합니다.

  export const Article() {
  return (
    <>
      <div>This is Khansa's Article</div>
      <div>Hello There!</div>
      <p> Add two values together, then multiply them. </p>
      Result: {100 + 20 * 2}
    </>
  );
}

3. JSX에서는 자동으로 닫히는 태그가 사용됩니다.

JSX에서 태그는 자동으로 닫힐 수 있습니다. 즉, <div></div>는 <div/>로, <span></span>는 <span/>로 사용될 수 있다. 당신은 원하지 않지만 가능성이 있습니다.

HTML에서 자동 닫힘 태그는 오른쪽 꺾쇠 괄호 앞에 슬래시 없이 닫힐 수 있으므로 <br /> 는 <br> 로 해석될 수 있습니다. 그러나 JSX에서는 슬래시를 추가해야 합니다. 이는 JSX가 HTML 4 구문에 크게 의존하고 있음을 상기시켜줍니다.

줄 바꿈 태그의 오른쪽 꺾쇠 괄호 앞에 슬래시가 없기 때문에 JSX가 컴파일에 실패하는 것을 볼 수 있습니다.

줄 바꿈 태그에 슬래시가 포함되어 있으므로 JSX가 컴파일 중임을 알 수 있습니다.

4. 요소에 스타일을 추가하려면 별도의 구문이 필요합니다.

HTML → <div style='border: 1px solid black; width:'100px' height: '100px' '/>

JSX → <input style={{border: '1px solid black', width: '100px' height: '100px' }}/>

명심해야 할 몇 가지 사항이 있습니다. 시작하려면 인용 부호를 사용하여 모든 스타일을 둘러싸는 대신 이중 중괄호를 사용합니다. 가장 바깥쪽 중괄호 집합은 JavaScript 변수를 나타내고 안쪽 집합은 JavaScript 개체를 나타냅니다. 우리가 사용하는 개체는 요소의 스타일을 지정하는 키-값 쌍의 모음입니다. 개체 값은 JSX에서 따옴표로 묶여 있으며 각 속성은 쉼표로 구분됩니다.

Note: You should avoid using inline style in plain HTML if you don’t want to harm your website’s SEO.

마지막으로 결론은
JSX 구성 요소는 HTML을 나타내므로 여러 구성 요소를 결합하여 더 복잡한 HTML 페이지를 만들 수 있습니다.
JSX가 HTML처럼 보인다는 사실이 사실 HTML과 다르지 않습니다. HTML과 유사한 구문을 전달하여 표준 함수를 계속 빌드할 수 있습니다.

To summarise, JSX is not HTML or a template engine.

그게 다야!
시간을 내어 제 글을 읽어주셔서 감사합니다 :)
곧 뵙겠습니다!