핵심 반응 개념: JSX

10103 단어 reactcodenewbiejavascriptbeginners
안녕하세요 코드뉴비 여러분 👋,

DOM에 아직 존재하지 않는 요소를 만들고 ID가 "root"인 div에 추가하려고 한다고 가정해 보겠습니다.
그러면 이것이 우리가 바닐라 자바스크립트에서 할 일입니다:

HTML:

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


자바스크립트:

const root = document.getElementById('root')
const h1 = document.createElement("h1")

h1.innerHTML = "Hello World"
root.appendChild(h1)


React에는 JSX라는 고유한 구문이 있어 위와 같이 긴 코드를 작성하는 데 도움이 됩니다.


JSX 란 무엇입니까?



JSX은 JavaScript에 대한 구문 확장입니다.
Javascript 파일에서 UI와 Javascript 논리를 결합할 수 있습니다.

ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"))


위의 예에서 우리는 Javascript의 메소드 내부에 <h1> 태그를 가지고 있습니다.
"ID가 <h1>인 요소에서 root 렌더링"이라고 표시됩니다.

✏ 참고:
the previous post, 읽지 않았다면 ReactDOM.render() 작동 방식을 이해하십시오.

JSX는 HTML과 Javascript의 조합이므로 JSX를 번역하고 HTML을 페이지에 렌더링하려면 Babel이 필요합니다.

  • CDN을 사용할 때 Babel의 CDN을 포함해야 합니다.

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>



  • create-react-app 패키지를 사용할 때 Babel을 활성화하려면 React 라이브러리를 가져와야 합니다.

    import React from 'react'



    • ✏ 참고:
    선택 사항이지만 JSX 코드가 포함된 파일을 .jsx 대신 .js로 저장할 수 있습니다(예: Header.jsx ). 그렇게 하면 파일에 JSX 코드가 있다는 것을 알 수 있습니다.

    JSX의 많은 요소



    JSX에서 서로 옆에 하나 이상의 요소를 가질 수 없다는 점에 유의하는 것이 중요합니다.
    렌더링할 요소가 많으면 해당 요소를 여는 태그와 닫는 태그 안에 래핑해야 합니다.
    일부 개발자는 조각( <></> )을 사용하고 일부 개발자는 <div></div>를 래퍼로 사용합니다.
    접근성을 위해 프래그먼트는 추가<div>를 제공하지 않으므로 프래그먼트를 사용하는 것이 좋습니다. 따라서 스크린 리더를 사용하는 사람들에게는 덜 혼란스럽습니다.

    const element = (
  <>
    <h1>Hello World</h1>
    <p>How are you?</p>
  </>
)

ReactDOM.render(element, document.getElementById("root"))


    읽기 좋은 목적을 위해 반환 JSX 코드를 () 로 래핑하는 것이 일반적입니다.

    열기 및 닫기 래퍼 태그 내부에 있는 모든 항목을 children property 이라고 합니다.

    닫는 태그



    JSX는 HTML보다 더 엄격합니다.
    JSX의 기본 규칙 중 하나는 모든 요소에 닫는 태그가 있어야 한다는 것입니다.<input> , <img> , <br> , <hr> 등과 같은 HTML 태그를 생각해 보십시오.
    JSX에서는 해당 태그를 닫아야 합니다. 그렇지 않으면 구문 오류가 발생합니다.

    const element = (
  <>
    <h1>Hello World</h1>
    <br />
    <p>How are you?</p>
    <input type="text" placeholder="Type your message" />
    <button>Submit</button>
  </>
)

ReactDOM.render(element, document.getElementById("root"))


    JSX에 자바스크립트 포함



    이전 예에서 우리는 머리글과 단락을 하드코딩했습니다.
    값을 동적으로 변경하려면 어떻게 해야 할까요?
    내부에 Javascript를 작성하면{} Javascript 기능과 메소드를 실행할 수 있습니다.
    우리는 그것을 자바스크립트와 HTML 사이의 구분자로 볼 수 있습니다.

    const title = "Random Number"
function randomNum() {
  return Math.floor((Math.random() * 10) + 1)
}

const myNum = (
  <div>
      <h1>{title}</h1>
      <h2>My number is: {randomNum()}</h2>
  </div>
)

ReactDOM.render(myNum, document.getElementById("root"))


    이제 제목을 변경하면 <h1>가 업데이트됩니다. 그리고 페이지를 새로 고칠 때마다 임의의 숫자가 생성됩니다.

    ✏ 중요 참고 사항:{} 안에 들어오는 것은 무엇이든 Javascript expression 이어야 합니다.

    결론


  • JSX는 HTML과 유사한 코드를 Javascript에 직접 입력할 수 있게 해주는 구문입니다.
  • JSX의 기본 규칙:
  • 명시적 닫는 태그가 있습니다: <p></p> .
  • 자체 폐쇄: <input /> .
  • JSX 요소가 많은 경우 래퍼가 있어야 합니다.<></> 또는 <div></div>
  • 내부에 Javascript를 작성하면{} JSX에서 Javascript 논리를 사용할 수 있습니다. 그리고 내부 로직{}은 자바스크립트 표현식이어야 합니다.




    • 읽어 주셔서 감사합니다!
    마지막으로 에서 저를 찾을 수 있습니다. 연결하자! 😊
    [AWS] Transfer Family를 통해 사용자별로 루트 변경
    제1장: Policy - Based Class Design 독서 노트

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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