-
Javascript Import에 대하여 - import React from 'react'javascript 2020. 11. 23. 22:14
Import 용법
Created: Nov 23, 2020 9:50 PM
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import
mdn은 javascript의 교과서당
module을 통째로 가져오는 경우
// something.jsx import React from 'react';
React 소스코드를 보면 'react' package는 main으로 index.js를 내보낸다(export).
코드에서 가져다 쓸 땐, 기본적으로 export 결과물인 아래와 같은 Object(map, 혹은 key, value로 이루어진 자료구조)를 받게 된다.// react source index.js export { Children, createRef, Component, PureComponent, createContext, forwardRef, lazy, memo, ... } from './src/React'
여기서 {에서 시작하고 }로 끝나는 덩어리가 import 바로 뒤에 선언한 "이름"으로 지칭되는 것이다.
결국 import React from 'react'는 호출한 코드 안에서 아래와 같은 코드로 바뀐다고 생각하면 쉽다.
(거기에 javascript 문법을 살짝 더하면_ 링크의 단축속성명 참고)// something.jsx const React = { Children: Children, createRef: createRef, Component: Component, PureComponent: PureComponent, ... }
따라서 코드 안에서 React.Component와 같이 접근할 수 있고, 위와 같은 경우는 꼭 앞에 React.을 붙여야만 한다.
module에서 필요한 것만 가져오고 싶은 경우
React와 같이 그 module에서 내보내고 있는 것들이 "거의 모두 - 귀찮은 것을 이겨낼 정도의" 필요하지않는 경우는 보통 필요한 것만 module에서 가져온다.
아무래도 module에서 필요없는것도 가져오게되면 그 코드가 무거워지고 → 결국 결과물이 무거워져서 웹 로딩시간이 느려지게 만든다.// something.jsx import { Component, Children } from 'react';
위와 같은 표현방식으로 module의 export 중 필요한것만 가져올 수 있는데 이것은 아래 코드와 같은 의미이다.
// something.jsx const { Component, Children } = { Children: Children, createRef: createRef, Component: Component, PureComponent: PureComponent, ... }
물론 실제로 위 케이스와 같이 react가 export하는 모든걸 코드로 들고오진 않지만 저런 식으로 Component와 Children이 가리키는 값이 지정된다는 뜻이다.
Component는 "react module이 내보내는 것 중 Component"로 mapping되고,
Children은 "react module이 내보내는 것 중 Children"으로 mapping된다.여기서 javascript 문법_destructing_assignment를 참고하면 더 이해가 잘 될것이다.
'javascript' 카테고리의 다른 글
Chrome Extension 개발 이제 여기에 react를 끼얹은... (0) 2021.02.12 Chrome Extension 개발 해보기 - Getting Started 따라하기 (0) 2021.02.11 [typescript] nodejs 서버 구축하기 - 1 (0) 2020.12.07 Javascript class의 내부 함수, method (0) 2020.11.26 javascript를 쓰지만 내가 잘 몰랐던 것들 (0) 2020.10.20