JSX 문법 - 최상위태그필수, 인라인스타일, 주석

: 자바스크립트의 확장 문법

: 기존의 자바스크립트 문법을 사용자에게 더 명시적이고 명확하게 표현

 

 

- 전체 코드를 감싸주는 최상위 태그가 있어야함

예

- 맞는 코드

function App() {
  return (
    <div className="App">
      <h1>hello react</h1>
      <p>반갑습니다.</p>
    </div>
  );
}

 

- 틀린 코드

function App() {
  return (
    <div className="App">
      <h1>hello react</h1>
      <p>반갑습니다.</p>
    </div>
    <div>
      오류 --> div가 병렬로 존재 >
    </div>
  );
}

 

 

인라인 스타일

: 컴포넌트 안에서 스타일 지정

function App() {
  let name = "리액트";
  const style = {
    backgroundColor: "black",
    color: "white",
    fontSize: "48px",
    fontWeight: "bold",
    padding: "20px",
  };
  return (
    <div style={style}>
      <h1 style={style}>
        hello
        {name === "리액트" ? <h1>YES</h1> : null}
      </h1>
      <p>반갑습니다.</p>
    </div>
  );
}

 

- 이렇게 해도됨

<div
      style={{
        backgroundColor: "black",
        color: "white",
        fontSize: "48px",
        fontWeight: "bold",
        padding: "20px",
      }}
    >
      <h1 style={style}>
        hello
        {name === "리액트" ? <h1>YES</h1> : null}
      </h1>
      <p>반갑습니다.</p>
    </div>

 

 

 

-주석

/* 설명 */