해결된 질문
작성
·
150
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는 같은 값을 가지고 있기 때문에 아무것이나 사용해도 결과는 같습니다.