• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

컴포넌트 분리

22.03.19 10:46 작성 조회수 178

1

안녕하세요, 유림님!

올려주신 강의를 완강하고, 말씀해주신대로 컴포넌트를 각각의 js 파일로 쪼개서 import 하는 과정을 거치고 있습니다!

cra 같은 경우는 react 를 스크립트로 들고오는게 아니라 모듈 방식으로 사용해야하기 때문에 import 해주는 과정을 거쳐야한다고 영상에서 말씀해주셨는데요! 조금 바보같은 질문일 수 있겠으나,  react를 사용하는 것들은 개개의 컴포넌트마다  import React from "react" 를 작성해야하는지 궁금합니다!

저희 프로젝트에서는 React.useState를 Form과 App 컴포넌트에서 사용하기에, 컴포넌트를 개개로 분리한다면  import React from "react" 를 Form 컴포넌트에서 한 번, App 컴포넌트에서 한 번 총 두 번 React를 불러와야 실행이 되는걸로 알고있습니다! 

해당 과정을 거치면서 react를 불러와서 사용해야하는 컴포넌트가 많아지면 각각의 컴포넌트마다 상단에 React 모듈을 불러오는 코드를 일일이 전부 작성해야하는건가? 하는 궁금증이 들어서요! 다수의 컴포넌트가 import 해서 사용해야 하는 모듈은 불러오는 코드를 딱 한번만 작성하여 사용할 수는 없나요?

좋은 강의 올려주셔서 너무너무 감사드리고, 언제나 건강 유의하시길 바랍니다:)

답변 1

답변을 작성해보세요.

0

"모듈 임포트를 파일마다 하면 파일 여러개에서 중복으로 모듈을 불러와서 용량이 커지거나 하는 비효율이 있지 않나?"

란 의문이 들 수 있겠네요 ㅎㅎ

 

컴포넌트마다 모듈 임포트를 한다기보단

이 파일에서 React를 모듈로 쓰기 위해서 `import React from "react"` 를 해주는거라 이해하시면 되어요.

웹팩으로 컴파일 할 때 웹팩이 최적화해서 쓰는 모듈들만 예쁘게 말아줍니다.

 

사실 import React 매번 하는게 귀찮으니까

react 17부터는 import react를 생략할 수 있긴 해요 ㅋㅋ

그런데 eslint룰에 ignore룰을 추가하지 않으면 린트 에러로 인식해서 강의에선 그냥 넣었습니다.

(react/react-in-jsx-scope 룰을 끄면 됩니다)

 

더 궁금하시면 'import react 생략' 키워드로 구글링해보시면 됩니다.

화이팅!