[React] JSX 01

JSX란? 🌰

자바스크립트와 HTML 태그를 섞어 사용하는 문법을 JSX(자바스크립트 XML)라고 합니다.
JSX는 자바 스크립트의 확장 문법입니다.
공식 자바스크립트 문법은 아니지만 대다수 리액트 개발자가 사용하는 문법입니다.
JSX 문법을 이용하면 HTML 태그에서 자바스크립트의 표현식을 직접 사용할 수 있습니다.

function Body(){
    const number=1;
    return(
      <header>
      <h1>body</h1>
      <h2>{number}</h2>
      </header>
    );
  }

export default Body;

JSX와 자바스크립트 표현식 😌

• 표현식이란?

  표현식이란 갑승로 평가되는 식입니다.
  JSX는 자바스크립트 표현식을 HTML 태그와 함께 사용할 수 있어 가독성 있는 코드를 작성할 수 있습니다.
  
  

• 산술 표현식: 숫자로 표현되는 식

  function Body(){
     const numA=1;
     const numB=2;
     return(
         <div>
             <h1>body</h1>
             <h2>{numA+numB}</h2>
         </div>
     );
  }
  export default Body;

  
  

• 문자열 표현식: 문자열 또는 문자열로 평가되는 식

  function Body(){
     const strA="안녕";
     const strB="리액트";
     return(
         <div>
             <h1>body</h1>
             <h2>{strA+strB}</h2>
         </div>
     );
  }
  export default Body;

  
  

• 논리 표현식: 참이나 거짓으로 평가되는 식

  function Body(){
     const boolA=true;
     const boolB=false;
     return(
         <div>
             <h1>body</h1>
             <h2>{boolA || boolB}</h2>
         </div>
     );
  }
  export default Body;

💡

• XML

  데이터를 정의하는 규칙을 제공하는 마크업 언어입니다.