2. JSX의 기본 규칙

JSX는 리액트에서 생김새를 정의할 때 사용하는 문법이다.

HTML+JavaScript가 합쳐진 형태를 띈다

return <div>hello<div>

JSX의 규칙을 알아보자

1. 태그는 꼭 닫혀야한다.

import React from 'react';
import Hello from './Hello';
​
function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
      <div> // 해당 부분 div가 닫혀있지 않아서 컴파일오류가 발생
    </div>
  );
}

export default App;

2.꼭 감싸져야 한다.

import React from 'react';
import Hello from './Hello';
​
function App(){
    return(
        <Hello /> // 해당 Hello가 감싸지지 않았다.
        <div>text<div>
    );
}

export default App;

3. JSX안에 자바스크립트 값을 쓰려면 {}를 사용해야한다.

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

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

name이라는 변수를 선언 해주고 jsx에서 사용하려면 {}안에 넣어서 사용해야한다.

4.Style과 ClassName

jsx에서 html태그에 class를 설정해주려면

<div className="boxbox"></div>

className으로 설정을 해줘야 한다.

이후 css파일에서

.boxbox{
    background-color:red;
   }

이렇게 작성해주면 된다.