inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[React 2부] 고급 주제와 훅

[1.4장 장바구니 화면] 1.4.9 레프와 돔

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

해결된 질문

207

dohyun_lim

작성한 질문수 67

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

 

react React-Context react-hooks react-router react-component

답변 1

1

김정환

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

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

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

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

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

 

 

 

잘못된 useEffect 사용?

1

65

2

useEffect 의존성 질문

1

58

2

orderableProductItem 에 관하여...

0

57

2

강의 자료, 블로그, 깃 주소

0

63

1

React 훅 구현 원리와 실무 패턴 관련 질문 (useState, useEffect 순서 및 핸들러 구조)

1

104

2

pushState로 주소를 바꾸면 렌더링이 안 되는 이유가 궁금합니다.

1

87

2

FormControl 컴포넌트 사용시 htmlFor prop 값 넘길 때 중괄호 이유

1

123

1

dispatch 함수도 리렌더링 유발하지 않나요?

1

203

2

ProductItem에서 onClick = {onClick}을 달지 않아도 되는 이유

1

160

2

replaceState를 쓰지 않는 대안

1

196

2

setValue 메서드를 바인딩 해야 하는 이유

1

163

2

MyReact를 IIFE(즉시실행함수)로 설계하신 이유

0

209

2

[4.4장 메모이제이션 훅] 4.4.3 memo 참조 비교

0

129

1

useRef 관련하여 질문드립니다

0

152

2

렌더 프롭 관련하여 질문드립니다

0

183

2

[1.2장 상품목록 화면] 1.2.3 Button ...rest 관련 질문 드립니다.

1

395

2

[4.4장 메모이제이션 훅] 4.4.4 useCallback curried function에 관한 질문입니다.

1

317

2

[4.4장 메모이제이션 훅] 4.4.2 useMemo 에서 every 함수에 관한 질문입니다.

1

355

2

[4.3장 리듀서 훅] 4.3.7 활용 MyForm(풀이) 오타 제보 및 질문이 있습니다.

1

281

2

[4.1장 레프 훅] useRef관련 질문이있습니다.

1

334

1

[1.3장 주문 내역 화면] 1.3.5 Card 조합 질문 있습니다

2

284

1

[3.5장 컨택스트 훅] 3.5.2 useContenxt 에서 질문이 있습니다.

1

432

2

[1.3.6 상태정의] state 관련

1

259

1

[2.4장 다이얼로그 1] 2.4.5 withLayout(풀이) 에 관한 질문입니다.

1

272

1