[React] 기초 문법

1. className

---

원래 HTML Element에 클래스명을 설정하기 위해서는 class 속성을 사용해야하지만, React에서는 class가 아닌className이라는 속성을 사용하여 클래스명을 지정한다.

class 속성을 사용하여 클래스명을 지정하면 프로젝트 실행 시, 콘솔에 오류가 출력되니 올바르게 클래스명을 지정하자.

import React from "react";
import "./App.css";

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

export default App;

2. 최상위 Element는 단 한개

---

React Component에서 반환하는 HTML 코드에서의 최상위 Element는 단 한 개여야 한다.

import React from "react";
import "./App.css";

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

export default App;

이런식으로 해도 큰 문제는 없지만, 프로젝트의 규모가 커진다면 아무 쓸모 없는 div element가 여러 개 생긴다는 문제가 발생한다. 이에 대한 해결책으로 React에서는 빈 태그를 사용할 수 있도록 지원을 해주고 있다. 아래의 예시를 확인!

// No Problem!

import React from "react";
import "./App.css";

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

export default App;

이렇게 빈 태그를 사용하게 되면, React 상에서는 정상적으로 하나의 최상위 Element만 존재하는 것으로 인식하기 때문에 오류가 발생하지 않는다. 게다가 실제 브라우저에서 확인해봐도 저 빈태그는 HTML 코드에서는 존재하지 않는 것으로 보인다.

따라서 의미 없는 div의 남용을 방지할 수 있다 ❗