React에서 JSX 문법이 어떻게 사용되는가?

김인기·2022년 12월 27일

JSX란 무엇인가?

JSX(JAVA Script XML)는 Java Script에 XML을 추가한 확장형 문법입니다.
JSX는 React로 프로젝트를 개발할 때 사용되므로 공식적인 문법은 아닙니다.
브라우저에서 실행하기 전에 바벨을 사용하여 Java script 형태의 코드로 변환합니다.

장점:
(1) JSX는 하나의 파일에 JS와 HTML을 동시에 작성할 수 있어서 편리합니다.
(2) JS에서 HTML를 작성하듯이 가독성이 높고 작성하기 쉽습니다.

JSX문법?

1.반드시 부모요소 하나가 감싸는 형태여야 합니다.

function App() {
   return (
       <h1>제목1</h1>
       <h2>제목2</h2>
   )
}

위같은 코드는 에러가 발생합니다.
위처럼 요소가 두 개 이상 존재하기 때문입니다. 해결하기 위해서는 감싸는 요소가 필요합니다.

function App() {
  return (
    <div>
      <h1>테스트1</h1>
      <h2>테스트2</h2>
    </div>
  );
}

로 감싸는 이유는, React가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 내부는 하나의 DOM구조로 이루어져야한다는 규칙이 있기 때문입니다.

Java Script 표현식

JSX 안에서도 Java Script 표현식을 사용할 수 있습니다. JSX내부에서 코드를 {}로 감싸주면 됩니다.
방법은 링크를 걸어두겠습니다.

if문(for문) 대신 삼항 연산자(조건부 연산자) 사용합니다.

if와 for은 Java Script 표현식이 아니기 때문에 내부 JSX에서도 사용할 수 없습니다.

사용하기 위한 방법은 외부에서 사용하는 방법과 AND연산자(&&)를 사용해야 합니다.

JSX 스타일링

JSX에서 JS 문법을 쓰려면 {}를 써야하기 때문에, 스타일을 적용할 때에도 객체 형탸로 넣어줘야 합니다.
(주의! 카멜 표기법으로 작성해야합니다. ex) font-size => fontSize )
Ex) CSS Style

function App() {
const style = {
  backgroundColor: "green",
  fontSize: "12px",
};
return <div style={style}>Hello, GodDaeHee!</div>;
}
##해석
background-color를 backgroundColor
font-size를 fontSize