JSX 초보자 기초

이번 호의 앞의 두 편의 게시물에서 우리는 이미 깊이 토론했다.우리는 이미 React 응용 프로그램이 실제로는 JSX로 작성되었다고 말했다.React의 모든 구성 요소가 JSX로 되돌아오고 컴파일러가 브라우저가 이해할 수 있는 일반적인 JavaScript로 변환합니다.본문의 세 번째 문장으로서 나는 JSX-React의 언어를 이야기하고 싶다.
만약 당신이 ReactJS 초보자라면, 나는 당신이 본문을 읽기 전에 앞의 두 편의 문장을 먼저 읽는 것을 건의합니다.
따라서 JSX와 그 존재 원인을 이해하는 가장 좋은 방법은 그것이 없으면 우리가 React를 어떻게 사용하는지 이해하는 것이다.
JSX가 없으면 ReactJS는 JavaScript로 작성해야 합니다.HTML에서 JavaScript를 작성할 때 <script></script> 태그를 사용할 수 있습니다.
그러나 JavaScript를 작성하고 둘 사이에 HTML을 작성해야 하는 경우 선택의 여지가 없으며 HTML 요소는 JS 함수로만 만들 수 있습니다.
이 함수는 React.createElement() 방법이다.
예를 들어 h1이라는 제목의 Hello World을 만들고 싶습니다.일반 HTML에서는

<h1>Hello World</h1>

그러나 JavaScript를 사용하여 동일한 작업을 수행해야 하는 경우 다음과 같이 해야 합니다.

React.createElement("h1", null, "Hello World");

첫 번째 값은 HTML 요소 h1 자체입니다.마지막 값은 HTML 태그의 컨텐트입니다.
중간에 나는 null의 값을 제시했다.HTML 요소에는 속성이 없기 때문입니다.속성을 추가하고 다시 봅시다.이번에 우리의 코드는:

<h1 id="first">Hello World</h1>

JavaScript를 사용하여 다시 만들려면 다음과 같이 작성해야 합니다.

React.createElement("h1", {
  id: "first"
}, "Hello World");

{ id: "first" }이 두 번째 값으로 추가되었음을 알 수 있습니다.두 번째 값의 주위가 {}이라는 것을 반드시 주의하십시오.HTML 요소는 여러 속성을 사용할 수 있기 때문입니다.그래서 괄호 {}에서 쉼표로 구분해야 한다.동일한 HTML 요소에 더 많은 속성을 추가합니다.

<h1 id="first" type="text" random="random">Hello World</h1>

같은 문장의 JavaScript 대안은 다음과 같습니다.

React.createElement("h1", {
  id: "first",
  type: "text",
  random: "random"
}, "Hello World");

이제 간단한 HTML 요소의 생성이 매우 복잡해진 것을 볼 수 있다.이것이 바로 JSX가 왜 매우 중요한지, React에서 프로그램을 작성하는 표준이다.
직접 해보고 싶으면 언제든지 link을 방문하세요.왼쪽 상자에 일반 HTML을 입력하고 오른쪽에 JavaScript 대체 항목을 표시합니다.참고로, 이것은 JSX로 작성된 일반 HTML을 자바스크립트로 변환할 때 사용한 babel 컴파일러/transpiler와 같습니다.

클래스를 속성으로 사용할 수 없는 이유

HTML 태그에 속성을 지정하면 해당 속성이 값으로 JavaScript 함수에 전달됩니다.JavaScript에서 class은 클래스를 만드는 데 사용되는 정의 키워드입니다.따라서 HTML에서 class을 속성으로 사용하면 같은 키워드가 함수에 나타나 JavaScript 오류가 발생합니다.그래서 우리는 class을 className으로 대체한다.
지금까지 JavaScript 함수를 사용하여 HTML 요소를 만드는 방법을 배웠습니다.우리는 또 이것이 복잡한 과정이라는 것을 알게 되었다.하지만 우리는 도대체 어떻게 대응할 계획일까?이것이 JSX의 용무지다.JSX는 JavaScript 변수에 HTML 요소만 할당합니다.

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

여기서 JavaScript 변수 element을 만들고 그 값을 <h1>Hello World</h1>으로 지정했습니다.이를 JSX 또는 JavaScript XML이라고 합니다.이것은 결코 어렵지 않다.
다음과 같은 방법으로 출력할 수 있습니다.

ReactDOM.render( element, document.getElementById('root'));

여기서 element은 render() 방법을 통해 HTMLDOM에 추가한 다음에 div 표기와 id="root"으로 돌아간다.
나는 나의 문장과 게시물에서 그것의 작업 원리를 상세하게 토론했다.

{} 을 사용하여 JSX에 JS 표현식 추가

다음은 간단한 JavaScript 표현식입니다.

const name = 'Mark Twain`;

다음과 같이 JSX에 포함할 수 있습니다.

const name = `Mark Twain`;
const element = <h1>Hello, {name}</h1>;

첫 번째 행은 간단한 JavaScript 표현식으로 문자열 Mark Twain을 JavaScript 변수 name에 할당합니다.
두 번째 줄은 JSX입니다. HTML 요소 h1을 JS 변수 element에 분배하려고 합니다.이곳의 name은 JS 변수이기 때문에 우리는 {}을 사용하여 그것을 작성하기 때문에 컴파일러는 실제적으로 이를 JSX의 HTML 부분이 아닌 실제 JS로 식별할 것이다.
만약 우리가 {}을 제공할 수 없다면, 그것은 Hello, name만 돌아올 것이다.
작동 방식을 이해하는 가장 좋은 방법은 위 코드를 JS로 번역하는 것입니다.

const name = `Mark Twain`;
const element = React.createElement("h1", null, "Hello, ", name);

여기서 name이 React.createElement 함수의 매개 변수로 변한 것을 볼 수 있다.그러나 이곳의 name은 ""에 둘러싸이지 않았기 때문에 변수 name의 실제 값을 되돌려준다.
함수, 직접 표현식(예: 2+2), 점 연산자를 사용하여 JS 객체 내부에 액세스하는 등의 모든 JavaScript 표현식을 자유롭게 사용할 수 있습니다.
다음은 몇 가지 예입니다.

const name= {
  firstName: 'Mark',
  lastName: 'Twain'
};

/*Here we create a JS Object "name" with property "firstName" and "lastName" having property value "Mark" and "Twain" respectively.*/

function fullName(name) {
  return name.firstName + ' ' + name.lastName;
}

/*Here we create a function called "fullName" that returns the full name of individual by adding "firstName" and "lastName" strings.*/

const fullname = (
  <h1>
    Hello, {fullName(user)}!
  </h1>
);

/*Showing that we can insert an entire function into JSX using {}.*/

const firstname = (
  <h1>
    Hello, {name.firstName}!
  </h1>
);
/*Showing that we can access a property inside an object using the dot operator which is also a JS expression hence works inside {}*/

const two = <p>The sum is {1+1}</p>;

/*Just to show you can enter direct expressions like 1+1 inside the {}*/

속성에 JS 표현식을 추가할 수도 있습니다.

const element = <img src={user.profileUrl}></img>

여기서 profileUrl 객체의 user 속성은 프로파일 이미지의 URL인 값을 가질 수 있습니다.
따라서 JSX 내부의 JavaScript에 액세스하려면 {}을 사용하십시오.
본문을 끝내기 전에 저는 JSX 기초 지식의 몇 가지 요점을 간단하게 소개하고 싶습니다.
if 표현식은 JSX를 사용할 수 있음

const greaterthan = () => {
if(a > b) {
return (<p> a is greater </p>);
}
return (<p> b is greater </p>);
}

for 순환도 마찬가지다.너는 안에서 JSX를 자유롭게 사용할 수 있다.
여기에 사용된 함수는 ES6 개념인 화살표 함수입니다.

JSX 태그의 값을 Childrens라고 합니다.
예를 들면 다음과 같습니다.

const element = (
  <div>
    <h1>Hello World!</h1>
    <h2>Hello Internet!</h2>
  </div>
);

여기 <h1>Hello World!</h1>과 <h2>Hello Internet!</h2>은 div 라벨의 하위 항목입니다.
다른 곳에서 사용할 수 있도록 props.children을 사용하여 어린이를 방문할 수 있다는 것을 기억하세요.나는 다음 문장에서 이 점을 더욱 상세하게 토론할 것이다.

하위 항목이 없으면 JSX 태그가 자동으로 닫힙니다.

const element = <img src={user.profileUrl} />

그게 기본이야.시간 내주셔서 감사합니다.다음 글에서는 props이라는 더 높은 JSX 개념을 논의할 예정이다.
업데이트: 다음 게시물은.아니면 이 시리즈 좀 봐.