[React] JSX 여러분.

9604 단어 JavaScriptReact초학자tech
리액트 튜토리얼에도 JSX가 무엇인지 기사가 나왔다.

JSX는 JavaScript XML입니다.


우선 무엇이 생략되는지 신경 쓰이는 것은 인성이다.여기.에 답이 있다.
JSX stands for JavaScript XML.

JSX는 JavaScript XMLJSX는 JavaScript XML의 약칭!


이제 "XML"은
Extensible Markup Language의 생략입니다.데이터를 설명하는 데 사용되는 표기 언어입니다.

JSX의 특징


그 다음에 계속 설명문은 이쪽이야.
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods
JSX는 Rails가 말하는 보조 방법입니다.
HTML에 루비를 삽입할 수 있도록 Javascript에 HTML 요소 같은 것을 기술할 수 있습니다.
HTML 요소가 아니라 HTML 요소 같은 것으로 명언을 피한다.왜?

JSX 무개미 비교


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>Christmas</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>
의 html 파일ReactDOM에서 변수를 렌더링합니다.
다음 두 가지 상황에서 출력은 같다.
// jsxアリ
const xmas = <h1>Snow is really comming down!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));
jsx를 사용하면 xmas의 변수 정의에서''라벨을 직접 기술할 수 있습니다.
// jsxナシ
const xmas = React.createElement('h1', {}, 'Snow is really comming down!');

ReactDOM.render(myelement, document.getElementById('root'));
jsx 출력을 사용하지 않는 변수를 정의할 때React의 createElement() 방법을 사용해야 합니다.
JSX로 쓴 코드가 이createElement () 를 사용하는 코드로 변환된 것 같습니다.

JSX의 장점


속성 지정 가능


html 라벨과 같이 속성의 기술을 추가할 수 있습니다.
//ストリングを属性に指定するときは""
const element = <div tabIndex="0"></div>;
//変数を属性に指定するときは{}
const element = <img src={user.avatarUrl}></img>;
React DOM은 JS의 낙타 껍질(camelCase)에 대한 속성 명명 규칙을 사용합니다.

의식을 펼칠 수 있다


> 태그 내{ }에서 변수와 공식을 직접 기술할 수 있습니다.
const santa = <h1>Santa is {10 * 10} times larger than me</h1>;

XSS(교차 필터링) 대책


JSX에 포함된 React DOM의 값은 모두 렌더기 앞에서 문자열로 변환되며 악성코드가 응답으로 반환될 때도 코드로 읽히지 않습니다.
Cross-site scripting(XSS)
취약한 웹 애플리케이션에 악의적인 JS 프로그램(스크립트)을 삽입해 그 사이트 이용자를 공격하는 수법

SOTD


JSX와 관련해 조사한 결과 리액트가 태그와 논리가 모두 포함된 어셈블리 단위로 구성된다는 점을 이해했다는 프롬프트가 나왔다.JSX처럼 확장된 타입 스크립트, TSX도 있어서 이번에도 만져보고 싶어요.
오리온에서 Docker 생명주기 배우기
[CF1076F] Summer Practice Report

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage