JSX(JavaScript + XML)

2023.02.04

JSX란 무엇일까요?

// JavaScript를 확장한 문법
// JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법
const element = <h1>Hello, world!</h1>;

리액트에서는 딱 하나의 html 파일만 존재합니다.
(public 폴더 아래에 있는 index.html)

JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다.

HTML을 품은 JS ⇒ JSX!

자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있다

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

ex)예시
(1) 태그는 꼭 닫아주기
(2) 무조건 1개의 엘리먼트를 반환하기

// 컴포넌트에서 반환할 수 있는 엘리먼트는 1개

return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>   // input 타입 태그를 '/>' 로 닫아주어야 한다.
    </div>
  );

(3)JSX에서 javascript 값을 가져오려면?

function App() {
	const cat_name = 'perl';
  return (
    <div>
      hello {cat_name}!  // 중괄호를 사용해주자
    </div>
  );
}	

function App() {
  const number = 1;

  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      {/* JSX 내에서 코드 주석은 이렇게 쓴다 :) */}
      {/* map,삼항 연산자를 사용할때도 마찬가지 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

(4) class 대신 className!

<div className="App">

(5) 인라인으로 style 주기
HTML

<p style="color: orange; font-size: 20px;">orange</p>

JSX

// 중괄호를 두 번 쓰는 이유? 객체도 자바스크립트
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 객체를 변수로 만들고 쓴다.(재사용에 용이하다)
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}