[React]import, export modules | require 와 import 차이 | import 모듈 많이 불러와야 하는 경우 | 계산기 만들기

React를 import 해서 쓰는 이유

이 전 강의들에서 라이브러리를 불러올 때

require를 사용해서 

var react = require("react"); 

이런 식으로 코드를 썼었다. 

이 코드는 import React from "react"와 거의 비슷한 역할을 한다.

 

 

require 와 import의 차이는 뭘까? 

Using Node.js require v.s. ES6 import/export

https://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export

require 함수는 자바스크립트가 아닌 node.js에서 온 함수이다. 

ES6는 모든 브라우저에서 가능해서 import/ export 쓰면 모두가 볼 수 있지만 

Node는 80% 정도의 브라우저에서만 읽을 수 있다.

그래서 require를 썼을 때는 20% 정도의 컴퓨터에서는 볼 수가 없다. 

 

 

---

 

 

시작 파일 

아래와 같은 기본 형태를 만들었다.

index.js

 

 

 Export 

export 하나만 하는 경우 

math.js 로 또 다른 자바스크립트 파일을 만든다

그리고서 pi 를 저장하고 export 한다. 

 

 

index.js에서 이 pi를 불러보자 

math.js에서 export 할 것이 하나 밖에 없기 때문에

이름을 바꿔써도 상관 없긴하다 

 

import React from "react"

코드의 경우도 react 파일에서 디폴트는 React 이다.

 

 

 

여러 개를 export하는 경우 

math.js에서 여러 개를 export 해보자.

export 할 게 여러 개인 경우 { } 안에 이름을 넣는다. 

math.js

 

 

 import 

필요한 만큼 import 하는 경우 

이 경우에도 default에 해당하는 이름은 변경이 가능하지만 

나머지 이름은 변경이 불가하다

double.pi 와 triple.Pi는 함수라서 ()를 붙여줘야 실행이 된다. 

 

 

 import 

파일 전체 import 하기 

파일에서 불러와 이름을 하나씩 적어주지 않고 

* 를 써서 일단 전체를 import 해 올 수 있다.

 

이렇게만 쓰면 에러가 나고 이 파일의 이름을 정해줘야 한다

 

이름을 pi로 지정하고서 

 

콘솔로그로 pi 내용을 살펴보면 

 

안에 든 내용이 doublePi, triplePi, default가 있다고 나온다

 

 

 

이 전 코드를 그대로 두면 에러가 뜨는데 이유는 

pi.default 이런 형식으로 써주어야 한다.

index.js

불러올 때 이름은 똑같이 써야하고 

순서는 상관없다. 

 

브라우저

---

 

계산기 만들기 

 

export 파일 만들기 

math.js 파일에 계산 함수 넣기 

math.js

 

import 해서 쓰기 

index.js

 

 

브라우저