JSX 노출

복잡해 보이는 것이 복잡할 필요는 없습니다 😲

❤️에서 나와 연결

그 전에 죄송합니다. 전화를 여는 것보다 먼저 읽으세요. 그렇지 않으면 결국 스크롤하게 될 것입니다. 우리 모두 그렇게 해요 😆 😝 😄

ReactJs는 JSX를 사용하여 UI를 생성합니다. 이제 당신은 오! 이제 도대체 이게 뭐야. 😩😩

JSX = 자바스크립트 + XML 😕
그리고 예, 이것을 위해 XML을 배울 필요가 없습니다!😛

몇 가지 포인트를 말씀드리겠습니다.

JSX란? 🍄

JSX는 JavaScript의 구문 확장일 뿐입니다.

React Code에서 HTML + JavaScript를 함께 작성할 수 있습니다.

EcmaScript를 확장하는 HTML 유사 구문입니다.

React 코드를 작성하는 더 간단하고 우아한 방법입니다.

var marvelHeroes= (
    <ul id="marvelHeroes">
      <li>Iron-Man</li>
      <li>Thor</li>
      <li>Doctor Strange (My fav)</li>
      <li>Captain America</li>
      <li>Spiderman</li>
    </ul>
)

위의 코드는 JSX입니다. 나는 그것이 당신에게 완전한 외계인 구문이 아니라고 확신합니다. 😄

그것이 당신에게 완전히 외계인이라고 말하지 마십시오.

여기에서 구문을 이해하려고 하면 정렬되지 않은 목록 태그 및 목록 태그와 같은 일부 HTML 요소를 추가하는 JavaScript입니다 😄

이제 우리가 JSX를 사용하는 이유를 생각하고 계실 것입니다???? 🙆‍♀️

우리는 JSX를 사용하여 코드를 더 단순하고 우아하며 읽기 쉽게 만듭니다. 🙆‍♀️

어떻게? 🙀🙀

방법과 이유를 모두 이해합시다.

React는 자체 DOM을 생성합니다. Real DOM의 정확한 복제본이며 JavaScript 객체를 보유하는 가상 DOM. 실제 DOM보다 빠릅니다.

DOM은 문서 객체 모델을 의미합니다. 노드의 모든 요소와 속성을 보유합니다. 코드에 일부 요소를 추가할 때 백그라운드에서 트리와 같은 구조를 생성합니다.



따라서 React 프로젝트에 일부 요소를 추가하려면 영웅 목록을 가정합니다. 이를 위해 반응 가상 DOM에 들어갈 목록 태그 요소를 추가해야 합니다.

해당 요소를 추가하거나 생성하려면 React가 DOM에 요소를 생성하도록 명령을 작성해야 합니다.

이에 대한 구문은 다음과 같습니다.

React.createElement(type,{props},children); 

어디
유형: HTML 요소의 유형
props: 컴포넌트가 취할 객체의 속성
children: UI에 표시되는 모든 데이터.

이제 방금 JSX를 사용하여 만든 것과 동일한 영웅 목록을 만들어 보겠습니다. 이번에는 React.createElement 구문을 사용합니다.

var marvelHeores= React.createElement(
   "ul",
   { id: "marvelHeores" },
   React.createElement(
      "li",
      null,
      "Iron-Man"
   ),
   React.createElement(
      "li",
      null,
      "Thor"
   ),
   React.createElement(
      "li",
      null,
      "Doctor-Strange"
   ),
   React.createElement(
      "li",
      null,
      "Captain America"
   ),
   React.createElement(
      "li",
      null,
      "Spiderman"
   )
)

이제 우리는 투쟁을 느끼고 있습니다. 오른쪽? 😆 😹

구문은 React.createElement()를 사용할 때 매우 길고 중첩된 요소를 사용하려는 경우 더 복잡해집니다.

따라서 이러한 모든 부담을 처리하기 위해 JSX를 사용합니다. ❤️

JSX는 React.createElement() 사용의 어려움을 줄이기 위한 SYNATICAL SUGAR입니다.

우리는 여기에서 거의 끝났습니다. 첫 번째 JSX를 작성하기 전에 몇 가지 사항을 알고 싶습니다. 👼

일부 JavaScript 또는 일부 의사 결정 코드를 추가하려는 경우 중괄호로 묶기만 하면 됩니다{}

JSX에서 onclick은 onClick이고 클래스는 className입니다.

JSX의 모든 HTML 요소는 소문자로 시작하지만 구성 요소 이름은 대문자로 시작합니다

.

이 시리즈의 이전 블로그에서 저와 함께 방금 만든 프로젝트에서 App.js 파일을 확인하세요. 🐾🐾

해피빌딩!!

❤️에서 나와 연결

이제 여기에 블로그를 완성했습니다. 트위터 링크를 클릭하고 저와 연결하세요 😁😁