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% 정도의 컴퓨터에서는 볼 수가 없다.
시작 파일
아래와 같은 기본 형태를 만들었다.
Export
export 하나만 하는 경우
math.js 로 또 다른 자바스크립트 파일을 만든다
그리고서 pi 를 저장하고 export 한다.
index.js에서 이 pi를 불러보자
math.js에서 export 할 것이 하나 밖에 없기 때문에
이름을 바꿔써도 상관 없긴하다
import React from "react"
코드의 경우도 react 파일에서 디폴트는 React 이다.
여러 개를 export하는 경우
math.js에서 여러 개를 export 해보자.
export 할 게 여러 개인 경우 { } 안에 이름을 넣는다.
import
필요한 만큼 import 하는 경우
이 경우에도 default에 해당하는 이름은 변경이 가능하지만
나머지 이름은 변경이 불가하다
double.pi 와 triple.Pi는 함수라서 ()를 붙여줘야 실행이 된다.
import
파일 전체 import 하기
파일에서 불러와 이름을 하나씩 적어주지 않고
* 를 써서 일단 전체를 import 해 올 수 있다.
이렇게만 쓰면 에러가 나고 이 파일의 이름을 정해줘야 한다
이름을 pi로 지정하고서
콘솔로그로 pi 내용을 살펴보면
안에 든 내용이 doublePi, triplePi, default가 있다고 나온다
이 전 코드를 그대로 두면 에러가 뜨는데 이유는
pi.default 이런 형식으로 써주어야 한다.
불러올 때 이름은 똑같이 써야하고
순서는 상관없다.
계산기 만들기
export 파일 만들기
math.js 파일에 계산 함수 넣기
import 해서 쓰기
브라우저
'React > React Basic' 카테고리의 다른 글
[React] Props | 연락처 카드 만들기 (0) | 2022.02.21 |
---|---|
[React] 시작하기 | 맥 node 업데이트 | VScode |npx (0) | 2022.02.20 |
[React] Components (0) | 2022.02.16 |
[React] CSS Inline Styling for React Elements (0) | 2022.02.14 |
[React] Styling React Elements | Image (0) | 2022.02.14 |
댓글