분류 Reactjs

React강좌 - 12 - JSX는 HTML 요소를 어떻게 작성합니까?

컨텐츠 정보

  • 조회 313 (작성일 )

본문

JSX는 React 구성 요소를 더 쉽게 만듭니다. 어떤 사람들은 JSX가 높은 학습 곡선을 가지며 완전히 이해할 수 있다고 생각합니다. 정확히 HTML이 아니며 정확하게 자바 스크립트가 아니므로 익숙해 져야 합니다.


우리는 JSX없이 React 애플리케이션을 만들 수 있습니다. 


우리는 JSX없이 모든 React 애플리케이션의 코드를 만들 수 있습니다. 다음은 JSX 코드의 데모이며 Babel (변환 도구)이 변환하여 DOM 요소를 만드는 방법을 보여줍니다.


// JSX
const myElement = <h1>WHOA I am some JSX</h1>;

// Converted to plain JavaScript
var myElement = React.createElement("h1", null, "WHOA I am some JSX");

이 코드를 babeljs.io에서 테스트하십시오. 코드를 가지고 바벨이 우리의 코드를 모든 브라우저가 이해할 수 있는 것으로 변환시키는 방법을 확인하십시오.


Babel은 JSX 코드를 일반 JavaScript로 변환합니다. JSX를 건너 뛰고 이 JavaScript를 직접 작성할 수 있습니다. 


Babel은 JSX를 JavaScript 코드로 변환하여 React가 애플리케이션을 렌더링 할 수 있도록 처리합니다. 우리는 transpilers와 같은 현재 도구를 사용하여 깨끗하고 읽기 쉬운 코드를 작성할 수 있습니다.


도구 (바벨)가 우리의 코드를 브라우저가 이해할 수 있는 것으로 변환하게 하십시오. 


이는 이전 ES5 JavaScript 구문에 모든 코드를 작성하지 않으려는 방식과 유사합니다. 우리는 ES6에서 쓸 수 있으며 브라우저가 이전 버전과의 호환성을 처리 할 수 ​​있도록 합니다.


React 애플리케이션의 일반 JavaScript 버전을 작성하고 싶지는 않습니다. JSX가 코드를 작성하는 시간을 절약하고 코드를 훨씬 쉽게 읽을 수 있게 해주는 작업은 많습니다.


우리가 JSX 대신에 평범한 JavaScript를 작성했다면 얼마나 많은 코드를 작성해야 하는지 살펴 보겠습니다.


클래스 추가하기 


위의 예제를 업데이트하고 이 <h1> 클래스에 className을 추가해 보겠습니다.


// JSX
const myElement = <h1 className="whoa">WHOA I am some JSX</h1>;

// Converted to plain JavaScript by Babel
var myElement = React.createElement("h1", {
  className: "whoa"
}, "WHOA I am some JSX");

className을 추가 한 이후로 두 번째 매개 변수가 어떻게 표시되는지 주목하십시오. JSX를 사용하면 React 템플릿을 깔끔하게 작성할 수 있습니다!


표현식 추가하기 


변수를 생성하고 JSX 템플릿에 변수를 표시해 봅시다.


// JSX
const name = 'Chris';
const myElement = <h1>I am {name}</h1>;

// Converted to plain JavaScript by Babel
var name = 'Chris';
var myElement = React.createElement("h1", null, "I am ", name);

중첩 요소 및 표현식 


이제 {name}을 <span>로 감싸고 요소를 중첩 할 때 JSX가 얼마나 많은 일을 할 수 있는지 보겠습니다.


// JSX
const name = 'Chris';
const myElement = <h1>I am <span>{name}</span></h1>;

// Converted to plain JavaScript by Babel
var name = 'Chris';
var myElement = React.createElement("h1", null, "I am ", React.createElement("span", null, name));

결론


이 몇 가지 예에서 JSX가 React 구성 요소를 만드는 측면에서 우리에게 많은 도움이 된다는 것을 분명히 알 수 있습니다.


ES6 및 JSX와 같은 최신 코딩 기술을 활용합시다. 우리는 Babel이 모든 브라우저가 이해할 수있는 JavaScript로 넘어 가게 할 것입니다.


JSX는 인간에게 더 읽기 쉽습니다. 그것은 인간의 팀을 위해 더 읽기 쉽습니다. 


JSX없이 React를 작성하는 데 필요한 것이 무엇인지 살펴 보는 것이 좋습니다. JSX도 학습 곡선의 가치가 있다는 것을 깨닫는 좋은 방법이라고 생각합니다.



JSX