useEffect와 DOM의 관계

import React, { useEffect } from "react";

const App = () => {
  // 여기다 그냥 하고 실행하면 에러가 난다
  // DOM이 로드 되기전에 실행이 되서 에러가 난다
  // useEffect 안에 넣어줘야한다
  // const main = document.querySelector(".main__container");
  // main.style.backgroundColor = "#000";

  useEffect(() => {
    const main = document.querySelector(".main__container");
    main.style.backgroundColor = "#000";
  }, []);

  return (
    <div
      className="main__container"
      style={{
        display: "flex",
        margin: "50px",
        width: "100px",
        height: "100px",
      }}
    >
      asdasd
    </div>
  );
};
export default App;