반응 - JSX 소개

JSX란 무엇입니까?

아래 예를 살펴보십시오.

import React from "react";

function App(){
    return (
       <div> 
          <Nav />
          <h3>This is a header</h3>
          <p>This is some text</p>
       </div>
    );
};

export default App;

JSX는 'JavaScript XML'을 나타내며 JavaScript의 구문 확장입니다. React DOM에서 렌더링되는 DOM 요소를 생성하는 데 사용됩니다. HTML처럼 보이지만 실제로는 React에서 사용하기 위해 특별히 작성된 XML과 유사한 구문입니다. 흥미롭게도 JSX는 유효한 JavaScript도 아닙니다. JSX는 브라우저가 이해할 수 있는 일반 JavaScript로 변환되기 위해 Babel과 같은 도구로 컴파일되어야 합니다. 간단히 말해서 JSX는 UI가 어떻게 보여야 하는지 설명하고 React는 이를 적절하게 렌더링합니다.

그러나 이것은 HTML처럼 보입니다!

<div> , <span> , <h1> - <h6> , <p> , <a> 등 HTML 문서에서 찾을 수 있는 모든 요소를 ​​JSX에서 사용할 수 있습니다. id 및 className와 같은 JSX 속성을 추가할 수도 있습니다. 이것은 HTML이 아니며 브라우저에서 HTML로 읽을 수 없다는 점을 기억하는 것이 중요합니다.

주요 컨셉

최상위 요소 및 반응 조각

위의 코드 예제에서 className가 여러 하위 요소를 포함하고 있음을 알 수 있습니다. JSX는 하나의 최상위 요소만 반환할 수 있습니다. 최상위 요소는 class , <div> , <div> 태그 또는 반응 조각으로 알려진 것의 모든 것이 될 수 있습니다. 프래그먼트를 사용하면 빈 여는 태그<span>와 닫는 태그<a>에 반환하려는 항목을 간단히 묶습니다. 프래그먼트를 사용하면 DOM에 불필요한 노드를 추가하지 않고도 자식 목록을 그룹화할 수 있습니다.

조각을 사용하기 위해 위의 예를 리팩터링할 수 있습니다.

import React from "react";

function App(){
    return (
       <> 
          <Nav />
          <h3 id="example">This is a header</h3>
          <p className="shortP">This is some text</p>
       </>
    );
};

export default App;

이렇게 하면 위의 예와 동일한 요소가 DOM에 렌더링되지만 중요한<> 노드는 없습니다.

자바스크립트와 JSX

JavaScript 표현식은 JSX 표현식 내에 포함될 수 있으며 { 중괄호 } 사이에 있어야 합니다. 예를 들어:

let sum = <p>{20 + 20}</p>;

모든 JavaScript 코드는 중괄호 안에 있어야 합니다. 이것은 JSX 표현식 구문으로 알려져 있습니다. 다음은 JSX 표현식 내부에 포함할 수 있는 몇 가지 유효한 항목입니다.

끈

숫자

어레이

일부 값으로 평가되는 객체 속성

맵 메서드(새 배열을 반환함)

더 많은 JSX

그리고 JSX Expression에는 가질 수 없는 것들이 있습니다.

모든 루프

변수 선언

함수 선언

If/else 조건문

JSX 조건

포함된 JavaScript에서는 if/else 구문을 사용할 수 없습니다. 다른 방법으로 조건을 표현할 수 있습니다.

중괄호 안의 삼항

JSX 요소 외부의 if 문

논리적 단락 && 연산자

// Using a ternary operator

const toggleMode = (
   <button> 
        { isDarkMode ? 'Set Light Mode' : 'Set Dark Mode' }
   </button>
);

// Using an if statement outside of the JSX element

let option;

if (isDarkMode) { option = 'Set Light Mode' }
else { option = 'Set Dark Mode' }

const toggleMode = <button>{ option }</button>

// Using the && operator
<p>{isTrue && "This is also true"}</p>

기능 구성 요소 및 JSX

함수 구성 요소는 JSX를 반환해야 합니다. React 앱의 모든 함수 구성 요소는 하나의 JSX 요소를 반환해야 합니다. 여기서 단일 최상위 요소(또는 프래그먼트)가 작동합니다.

JSX를 사용하는 이유

JSX를 사용하면 개발자가 더 깨끗하고 읽기 쉬운 코드를 작성할 수 있습니다. 꼭 JSX를 사용할 필요는 없지만 프로그래머가 HTML과 같은 구문을 사용하여 UI의 모양을 설명할 수 있으므로 React 애플리케이션을 더 쉽게 만들 수 있습니다.

JSX는 객체를 나타냅니다. React docs은 두 가지 예를 제공하며 둘 다 동일하게 렌더링됩니다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

이는 다음과 정확히 동일한 출력을 갖게 됩니다.

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

제 생각에는 JSX가 쓰기도 쉽고 읽기도 쉽습니다. JSX는 선언적 스타일의 프로그래밍을 사용하는데, 이는 Vanilla JavaScript가 렌더링하려는 간단한 JSX 표현식으로 수행하기 위해 여러 단계를 수행하는 것을 추상화합니다. 그런 다음 React는 배후에서 상황을 파악합니다(위에서 언급한 Babel의 약간의 도움으로).

자세한 내용은 다음 링크를 참조하십시오.
React Docs
Why use className instead of class?