[REACT] REACT의 기초문법 JSX

JSX는 자바스크립트의 확장 문법으로 XML과 유사하게 생겼다. JSX는 브라우저에서 실행되기 전 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

ReactDOM.render란?

컴포넌트를 페이지에 렌더링하는 역할을 하며 react-dom 모듈을 불러와 사용할 수 있다. 첫 번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성하고 두 번째 파라미터에는 해당 JSX를 렌더링할 document 내부 요소를 설정한다. 기본적으로는 id가 root인 요소 안에 렌더링 하도록 설정되어 있으며 이 요소는 public/index.html 파일에 존재한다.

React.StrictMode란?

리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못하게 하는 기능으로 이를 사용할 경우 옛날 기능을 사용했을 때 경고를 출력한다.

JSX 문법 규칙

감싸인 요소

React Component에서 반환하는 HTML 코드에서의 최상위 Element는 단 한 개여야 한다. 해서 React에서는 빈 태그를 제공한다. 이는 Virtual DOM의 효율성을 위해 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 때문이다.

function App() {
  return <></>;
}

export default App;

class 대신 calssName

React에서는 class가 아닌 className이라는 속성을 사용하여 클래스명을 지정해야 한다.

function App() {
  return (
    <>
      <div className="container1">abc</div>
      <div className="container2">abc</div>
    </>
  );
}

자바스크립트 표현

자바스크립트 표현식을 작성할 때는 JSX 내부에서 코드를 {}로 감싼다.

function App() {
  let post = "insert";
  return (
    <div className="App">
      <div className={post}>{post}</div>
      <button onClick={() => {{}}>버튼</button>
    </div>
  );
}

주석

JSX 내부에서 주석을 작성할 때는 {/* */} 와 같은 형식으로 작성한다. 시작 태그를 여러 줄로 작성할 때는 그 내부에서 //와 같은 형태의 주석을 작성할 수 있다.

function App() {
  return (
    <>
      {/* 주석 */}
      <div
        className="react" // 이 경우 주석을 사용할 수 있다.
      ></div>
    </>
  );
}

if문 대신 조건부 연산자 또는 AND 연산자(&&)를 사용한 조건부 렌더링

JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없다. 그 대신 삼항연산자 등을 사용한다.

function App() {
  const modal = true;
  return (
    <>
      {modal === true ? true : false}
      {modal === true && true}
    </>
  );
}

인라인 스타일링

style을 사용할 때는 {}안에 {}자료형으로 작성해야 한다. 대쉬기호- 대신 카멜케이스를 사용한다.

<div style={{ color: "blue", fontSize: "30px" }}> Style </div>