JSX 문법 정리

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

두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 한다.

    return (

<div className="gnb"> //gnb 박스 시작

  <Paper className="root">
    
    <IconButton className="iconButton" aria-label="menu">
      <MenuIcon /> 
    </IconButton>

    <InputBase
      className="input"
      placeholder="Search Maps"
      inputProps={{ 'aria-label': 'search maps' }}
    />
    <IconButton type="submit" className="iconButton" aria-label="search">
      <SearchIcon />
    </IconButton>

  </Paper>
  
  </div> //gnb 박스 마지막 부분


  );
  

2. 변수의 차이

var
쓰지마

const
한번 선언 후 고정적인 값

let
유동적인 값

3. JSX 안에 자바스크립트 값 사용하기

class test extends Component {

    render() {

const name = 'react';

return (
<> hello {name}! </>
);

   }
}

export default test;

4. 함수는 화살표로

 script.onload = () => {

      kakao.maps.load(() => {

        let container = document.getElementById("Mymap");
        
        let options = {
          center: new kakao.maps.LatLng(38.506502, 127.053617),
          level: 13 //비율 조정

  };