zeroCho[2/8] 숫자야구. 3-1. import와 require 비교
목차
강의 소스: https://github.com/zerocho/react-webgame
[0/8] 구구단 - state, JSX, babel, Fragment, setState, ref
[1/8] 끝말잇기 - useState, class component vs function component, webpack, module, build
[1/8] 끝말잇기 - useState, class component vs function component, webpack, module, build
[2/8] 숫자야구. 3-1. import와 require 비교
[2/8] 숫자야구 - map, key, 컴포넌트분리, props, 메서드바인딩(this), 동작원리, 구조분해, 이벤트
[3/8] 반응속도체크 - createRoot, useEffect, useRef, 조건문, return 내부 for과 if 쓰기
[4/8] Rock Scissors Paper - LifeCycle, closure, 비동기함수, 고차함수, useEffect를 이용한 lifeCycle,
[5/8] Lotto - componentDidUpdate, useEffect, useMemo, useCallback
[6/8] 틱택토 - const [state, dispatch] = useReducer(reducer, initialState), action
강의목차
3-1. import와 require 비교 <- 지금 강의
3-2. 리액트 반복문(map)
3-3. 리액트 반복문(key)
3-4. 컴포넌트 분리와 props
3-5. 주석과 메서드 바인딩
3-6. 숫자야구 만들기
3-7. Q&A
3-8. 숫자야구 Hooks로 전환하기
3-9. React Devtools
3-10. shouldComponentUpdate
3-11. PureComponent와 React.memo
3-12. React.createRef
3-13. props와 state 연결하기
3-1. import와 require 비교
require
- 지금까지 강의를 진행하며 require 모듈 시스템을 사용했다.
const React = require('react')
const { Component, useState, useRef } = require('react')위 처럼 require를 쓰고 module.exports로 내보내고 다른곳에서 불러 쓰는 방식을 썼다.
구조분해 방식으로 작성된 곳은 exports되는 대상이 객체나 배열이면 사용 가능하다.
import
import React, { Compenent, useState, useRef } from 'react';import를 쓰면 한 줄로 작성 가능하다. from 뒤엔 파일 경로 작성
import 로 받로 받는 React는 export default로 내보낸 것을 받아올 때 쓴다.
구조분해 방식으로 내보낼 떄는 아래와 같이 보낸다
//file1.js
export const hi = 'hi'; //내보내기
//file2.js
import { hi } from './file1.js'참고사항
노드에서 import를 쓰면 에러가 난다.
하지만 바벨이 import를 require로 바꿔주기 때문에 사용은 가능하다.
webpack 설정하는 부분은 노드로 돌리기 때문에 require를 사용해야 한다.
그럼 require도 쓸줄 알아야겠지?
최종 정리
- 둘 다 모듈 키워드, 외부 파일이나 라이브러리를 불러올 때 사용한다.
- require는 NodeJS에서 사용되는 CommonJS 키워드, import는 ES2015에서 새로 도입된 키워드
- Babel같은 ES6 코드 변환 도구를 사용할 수 없다면 require 키워드를 사용해야 한다.
출처: https://oizys.tistory.com/10?category=937823 [우당탕탕 개발]
const library = require("library")
import library from "library"최근 ES6(ES2015) 모듈 시스템인 import가 많이 사용되고 있지만,
아직까지는 import 키워드가 100% 대체되어 사용될 수 없다.
<script> 태그를 사용하는 브라우저 환경과, NodeJS에서도 CommonJS를 기본 모듈 시스템으로 채택하기 때문에,
Babel과 같은 ES6 코드를 변환(transpile)해주는 도구를 사용할 수 없는 경우에는 require 키워드를 사용해야 한다.
정리
두 키워드 모두 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있지만 다른 문법구조를 가지고 있고,
Babel과 같은 ES6 코드를 변환해주는 도구 없이는 require 키워드를 사용해야 한다.
출처: https://hsp0418.tistory.com/147
참고 읽기: https://www.daleseo.com/js-module-import/
자바스크립트 ES6 모듈 내보내기/불러오기 (import)
Engineering Blog by Dale Seo
www.daleseo.com