[React] JSX 사용하기

React에서는 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다.

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 컴포넌트라는 느슨하게 연결된 유닛으로 관심사를 분리한다.

JSX란?

JSX는 JavaScript XML의 줄임말로 XML 형태로 작성되며, 아래 문법은 JavaScript에 XML을 확장한 JSX의 문법이다.

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

JSX 사용이 필수가 아니지만,

• JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다.
• 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다.

---

JSX 문법

• 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

function App(){
	return(
    	<div>
          <h1>Hello</h1>
          <h2>Is it working well?</h2>
        </div>
    );
}

하나인 요소로 감싸주어야 하는 이유는 virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.

• JSX가 내부에서 코드를 {} 로 감싸면 자바스크립트 표현식을 작성할 수 있다.

function App() {
	const name = '리액트';
    return (
    <div>
    	<h1>{name}</h1>
        <h2>test</h2>
    </div>
    );
}

---

JSX 사용하기

예시로 click event 가 발생했을 때 console에 메세지가 출력되는 button을 만들어보자.

기존 React 코드

const Button = () =>
      React.createElement(
        "button",
        {
          style: {
            backgroundColor: "tomato",
          },
          onClick: () => console.log("CLICKED!"),
        },
        "Click me!"
      );

JSX를 사용해서 변환한 코드

const Button = () => (
      <button
        style={{ backgroundColor: "tomato" }}
        onClick={() => console.log("CLICKED!")}

      	CLICK ME!
      </button>
);