[React] JSX (JavaScript + XML) 문법

📌 JSX 란??

: JavaScript를 확장한 문법으로, React element를 생성한다.
즉, 쉽게 말해 HTML을 품은 JS 문법이라고 생각하자.

▶️ UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장하고 있습니다.

const element = <h1>Hello, world!</h1>;

JSX 소개 링크 참고

 

✅ 컴포넌트에서 반환 할 수 있는 element는 단 1개!!
= 즉, 모든 요소들을 묶어 줄 수 있는 최상위 요소가 무조건 필요하다!!

/* 최상위 element가 없는 경우, ERROR*/
return (
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
  );

/* 최상위 요소 <div></div> 로 하나로 묶어줘야만 한다. */
return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
    </div>
  );

🚨 <div>...</div>는 DOM 요소가 아니라, React 요소이다! (나중에 더 자세하게 배울 예정.)

1. className

: class를 사용하고 싶을 때는, className=" "으로 작성

 <div className="App">

2. {중괄호} 안에 javascript 문법을 쓴다.

: 변수의 값을 가져오는 것 뿐만 아니라, 메소드, 연산자 등 JS 문법을 {중괄호} 안에서 사용 가능!!

ex 1) 산술 연산자 사용

import React from "react";

export default function App() {
  const a = 7;
  const b = 10;

  return 
    <div>
        안녕하세요. {a + b}세 입니다. // 17
    </div>;
}

ex 2) 삼항 연산자도 이용 가능

import React from "react";

export default function App() {
    const number = 1;

  return (
    <div className="test-class">
      <p>안녕하세요. 리엑트입니다. </p>
         <p>
        {number > 10 ? number + "는 10보다 크다" : number + "는 10보다 작다"}
      </p>
    </div>
  );
}

3. 인라인으로 style 주기

기존 HTML

<p style="color : red; font-size : 20px;" >안녕하세요</p>

JSX
: {} 중괄호 안에 > {} 중괄호로 객체 형태(key-value pair)로 작성한다!

<p style={{color : 'red', font-size : '20px'}} >안녕하세요</p>

• 또는 style을 따로 변수로 사용함으로써, 재사용이 가능해진다!!

  const pTagStyle = {
    color: "red",
  };

 return(
   <p>안녕하세요. 리엑트입니다. </p>
   <p style={pTagStyle}> // pTagStyle 변수를 불러와서 사용
 );