JSX

JSX란?

리액트의 생김새를 정의할 때, 사용하는 문법이다. 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel이 JSX를 JavaScript로 변환을 해준다.

babel은 자바스크립트의 문법을 확장해주는 도구이다.

JSX에서 지켜야하는 규칙

꼭 닫혀야 하는 태그

import React from 'react';
import Hello from './Hello';

const App = () => {
	return(
      <div>
      	<Hello/> //오류가 없다.
      	<Hello> //Parsing error
      </div>
    );
}

• 태그를 열었으면 꼭 닫아주어야 한다. html에서는 input이나 br같은 경우는 태그를 닫지 않고 사용하기도 하나, 리액트에서는 허용되지 않는다.
• 태그와 태그 사이에 내용이 들어가지 않을 때는 위의 내용처럼 Self Closing 태그를 사용하면 된다.

꼭 감싸져야 하는 태그

import React from 'react';
import Hello from './Hello';

const App = () => {
	return(
      <Hello/> //오류가 없다.
      <Hello> //Parsing error
    );
}

• 두개 이상의 태그는 무조건 하나의 태그로 감싸져야 한다.

import React from 'react';
import Hello from './Hello';

const App = () => {
	return(
      <>
      	<Hello/> //오류가 없다.
      	<Hello> //Parsing error
      </>
    );
}

• 단순히 감싸기 위한 용도로 불필요한 div를 쓰는게 별로 좋지 않은 상황일 때는 리액트의 Fragment를 사용한다.

  태그를 작성할 때 이름 없이 작성을 하게 되면 Fragment가 만들어진다. 브라우저 상에서 별로의 엘리먼트로 나타나진 않는다.

JSX안에 자바스크립트 값 이용하기

import React from 'react';
import Hello from './Hello';

const App = () => {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

• JSX 내부에 자바스크립트 변수를 보여줄 때는 중괄호{}로 감싸서 보여준다.

style 작성과 class 작성

import React from 'react';
import Hello from './Hello';

const App = () => {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
	  <div className="gray-box"></div>
    </>
  );
}

• style은 객체 형태로 작성 해야 한다.
• background-color 처럼 -를 사용하는 이름들은 카멜케이스 형태로 네이밍 해줘야 한다.
• class를 설정할때는 class가 아닌 className으로 설정 해줘야 한다.

강의출처 - 벨로퍼트와 함께하는 모던 리액트