[React]JSX란?

JSX란?

• JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 이런 형식으로 작성한 코드는 브라우저에서 실행되게 전에 코드가 번들링 되는 과정에서 Babel을 사용하여 일반 자바스크립트의 형태의 코드로 변환됩니다.
• JSX는 자바스크립트 문법이 아닙니다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아닙니다. 바벨에서 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정합니다. 바벨을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법들을 사용할 수 있습니다.

JSX의 장점

보기 쉽고 익숙하다

• 일반 자바스크립트만 사용한 코드보다 JSX로 작성한 코드의 가독성이 높습니다. 사실상 이것이 JSX를 사용하는 이유입니다.

더욱 높은 활용도

• JSX에서는 우리가 알고 있는 HTML태그 뿐만 아니라 컴포넌트도 작성할 수 있습니다.

JSX문법

여러 요소를 return할 때

import React from "react;

function App() {
  return (
    <h1>Hello</h1>
    <h1>JSX></h1>
  )
}

• 이런 형태의 코드는 제대로 작동하지 않습니다. 여러 요소들을 사용할 때는 아래와 같이 하나의 요소로 감싸줘야 합니다.

import React from "react;

function App() {
  return (
    <div>
    	<h1>Hello</h1>
    	<h1>JSX</h1>
    <div>
  )
}

• 리액트 컴포넌트에서 요소 여러개를 하나의 요소로 감싸야하는 이유는 Vitual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.
• 그러나 꼭 <div>태그만을 이용해야 하는 것은 아닙니다. react 16.0 버전부터는 Fragment라는 기능을 사용할 수 있습니다.

import React from "react;

function App() {
  return (
    <React.Fragment>
    	<h1>Hello</h1>
    	<h1>JSX</h1>
    </React.Fragment>
  )
}

자바스크립트 표현

• JSX에서는 자바스크립트 표현식을 사용할 수 있습니다.

import React from "react;

function App() {
  const name = "JSX";
  return (
    <React.Fragment>
    	<h1>Hello</h1>
    	<h1>{ name }</h1>
    </React.Fragment>
  )
}

• 이런 식으로 작성해도 이전의 코드와 같은 결과가 나옵니다.

조건부 연산자

• JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없습니다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX밖에서 사전에 값을 설정하거나 { } 안에 조건부 연산자를 사용하면 됩니다.

import React from "react;

function App() {
  const name = "JSX";
  return (
    <React.Fragment>
    	{name === "JSX" ? (
         <h1>Hello I`m JSX</h1>
         ) : (
  		 <h1>Hello I`m not JSX</h1>
		)}
    </React.Fragment>
  )
}

인라인 스타일링

• 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열이 아닌 객체 형태로 넣어야 합니다.
• 스타일 이름 중 background-color처럼 "-"문자가 포함된 경우에는 "-"를 없애고 카멜 표기법(camelCase)로 작성해야 합니다.

import React from "react";

function App() {
  const name = "JSX";
  const style = {
    backgroundColor: "black",
    color: "red",
    fontSize: "42px",
    fontWeight: "bold",
    padding: 16,
  };

  return (
    <React.Fragment>
      <h1>{name}</h1>
      <h1 style={style}>{name}</h1>
    </React.Fragment>
  );
}

export default App;

• 위와 같이 코드를 작성하게 되면 두번째 h1태그에 스타일이 적용된걸 확인할 수 있습니다.