리액트 코드 작성 방식 JSX - React

React JS

React - Code 작성 방식 JSX

---

JSX란?

리액트에서는 html이 아닌 자바스크립트에서 코드를 작성합니다. 자바스크립트를 html로 변환해줄 도구가 필요합니다. 이때 babel을 사용하게 됩니다. XML 형태로 코드를 작성하면 babel 이 JSX를 JavaScript로 변환을 해줍니다.

 

BABEL에 대한 내용은 https://mxxcode.tistory.com/entry/Webpack과-Babel-JavaScript

 

JSX의 형태 - 컴포넌트에 return 값을 JSX를 통해 구현한다.

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

function App() {
  return (
    <div>
      <Hello />
      <h1>안녕하세요<h1/>
    </div>
  );
}

export default App;

다른 형태를 이용하는 만큼 몇가지 다른 규칙이 존재한다.

JSX의 규칙

1. 꼭 닫혀야 하는 태그
   • 태그가 닫혀있지 않으면 오류가 발생합니다.
   • input이나 br태그에서도 <input />, <br />로 작성해야 오류가 발생하지 않습니다.
2. 꼭 감싸져야하는 태그
   • 두 개 이상의 태그는 무조건 하나의 태그로 감싸 져있어야 합니다.
   • Fragment ( <> </> )
     • 무조건 div로 감싸지 않고 Fragment를 이용해도 된다.
3. JSX 안에 자바스크립트 값 사용하기
   • JSX안에서 자바스크립트 변수를 이용할때에는 { }로 감싸서 보여줘야 한다.
4. style과 className
   • style을 사용할 때에는 background-color처럼 - 로 구분되어있는 이름을 backgroundColor로 작성해야 한다.
   • 클래스를 설정할 때에는 단순히 class가 아닌 className으로 설정해야 한다.
5. 주석
   • 열리는 태그 내부에서는 //로 주석 작성이 가능하다.
   • {/* 이런 식으로 /*} 주석을 작성해야 한다.