인프런 커뮤니티 질문&답변

안녕하세요 선생님 Ref를 알아보는 과정에서

import React from "react";
import CartPage from "./pages/CartPage";
import OrderPage from "./pages/OrderPage";
import ProductPage from "./pages/ProductPage";

const App = () => (
  <>
    {/* <ProductPage /> */}
    {/* <OrderPage /> */}
    <CartPage />
  </>
);

// export default App;


class MyComponent extends React.Component {
  divRef = React.createRef();
  render() {
    return (
      <div ref={this.divRef}>
        
      </div>
    )
  }

  componentDidMount() {
    console.log(this.divRef)
  }
}

export default MyComponent

이렇게 MyComponent가 export 되었길레

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import MyComponent from "./App";

const { worker } = require("../../shared/mocks/browser");
worker.start({
  onUnhandledRequest: "bypass",
});

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);
// root.render(<MyComponent />);

main.js에서 root.render를 변경해야될줄 알았는데 변경을 하지 않아도 정상동작을 하는데 이것은 왜 그런것인가요?