• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

[1.4장 장바구니 화면] 1.4.9 레프와 돔 / export에 관한 질문입니다.

24.02.28 14:14 작성 조회수 83

1

안녕하세요 선생님 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를 변경해야될줄 알았는데 변경을 하지 않아도 정상동작을 하는데 이것은 왜 그런것인가요?

 

답변 1

답변을 작성해보세요.

1

App.jsx가 모듈을 노출할때 기본 모듈로 노출하는데요. export default 를 사용한 부분.

모듈을 가져올 때 이름을 지정할 수 있습니다.

  • import App from "./App"; // App 이란 변수로 가져옴

  • import MyComponent from "./App"; // MyComponent 이란 변수로 가져옴

위 두 줄은 같은 코드를 다른 이름으로 불러온 경우에요. App과 MyComponent는 같은 값을 가지고 있기 때문에 아무것이나 사용해도 결과는 같습니다.