초보자를 위한 JSX(및 HTML과의 차이점)

JSX란?

JSX 또는 JavaScript XML은 구성 요소를 작성하는 데 사용되는 JavaScript의 확장입니다React.

예를 들어, 아래의 코드 스니펫은 JSX가 일반적으로 어떻게 생겼는지 보여줍니다.

const greet = <h1>Hello World</h1>;

따라서 JSX를 사용하면 Javascript와 HTML을 함께 작성할 수 있습니다. 그러나 HTML 및 Javascript와 달리 JSX는 브라우저에서 해석할 수 없으므로 Javascript로 변환하려면 컴파일러(Babel 또는 Webpack)가 필요합니다.

JSX를 사용하는 이유

가장 먼저 알아야 할 것은 JSX가 필수가 아니라는 것입니다. 그것 없이도 React 코드를 작성할 수 있습니다.

그럼 왜 사용합니까? 논리와 마크업을 혼합하는 이유는 무엇입니까? JSX는 구문 설탕입니다. 보다 쉽게 ​​읽고 표현할 수 있도록 설계되었습니다.

예: JSX 표현식을 고려하십시오.

<p color="red" shadowSize={2}>I'm a random sentence</p>

Babel에 의해 컴파일되어

React.createElement(
  "p",
  {color: 'red', shadowSize: 2},
  "I'm a random sentence"
)

나중 스 니펫은 분명히 덜 예쁘다 😀

JSX와 HTML의 차이점

1. 자동 닫힘 태그

HTML에서는 태그를 닫지 않고 자동으로 닫히는 태그를 작성하는 것이 좋습니다. <hr />는 <hr>일 수 있습니다. 이것은 JSX에서 허용되지 않습니다. 모든 태그는 닫아야 합니다.

또한 모든 태그는 자동으로 닫힐 수 있습니다. <div />

2. JavaScript 표현식 추가

중괄호 {...}를 사용하여 JavaScript를 JSX 마크업에 직접 추가할 수 있습니다.

{/* Output: Everybody knows 1 + 1 = 2 */}
<p> Everybody knows 1 + 1 = {1+1}<p>

따라서 <script> 태그 HTML이 필요하지 않습니다.

3. HTML 속성은 명명 규칙을 변경합니다.

JSX는 JavaScript에서 HTML을 작성하므로 JavaScript의 키워드인 class 및 for와 같은 특정 HTML 속성은 각각 className 및 hmtlFor로 변경되어야 합니다. 명명 규칙에서 camelCasing 사용에 유의하십시오.

모든 JSX 속성은 camelCase 명명 규칙을 따릅니다. 따라서 background-color는 backgroundColor가 됩니다.

4. 인라인 CSS는 객체입니다.

HTML에서는 여는 태그에 인라인 CSS 스타일을 직접 추가할 수 있습니다. 그러나 JSX에서는 그렇지 않습니다. 여기에서 객체를 전달합니다.
예를 들어 이 HTML 스니펫을 고려하십시오.

<p style="color:red;font-size:14px">Hello there!</p>

JSX에서는 다음과 같이 작성할 수 있습니다.

cont Greet = function() {
  const myStyles = {
    color:"red";
    fontSize:"14px";
    }
  return <p style={myStyles}>Hello there!</p>;
}

또는

return <p style={{color:"red", fontSize:"14px"}}>Hello there!</p>;
}

현재 React를 배우고 있습니다. HTML 작성에서 JSX로 전환하는 동안 모든 사람이 알아야 할 몇 가지 주요 개념과 차이점을 발견했습니다. 이것은 내 노트를 문서화하는 것입니다. 도움이 되었기를 바랍니다 😊


헤더 이미지 크레딧: patterns.dev