October 02, 2019

asset import vs src

// 1.import
import logo from "./logo.jpeg";
<img src={logo} />

// 2.require
const logo = require("./logo.jpeg");
<img src={logo} />

<img src={require("./logo.jpeg")} />

문대디님의 의견

(실명을 거론해도 좋을지 모르겠어서 닉네임만 언급했습니다.)

import로 asset을 import하는 건 webpack을 품은 react-script가 번들링 해주는겁니다. img src로 불러오는건 dom에서 img 태그를 리액트가 그려서 api든 origin에 request해서 그려주는거구요. 내 서버에 에셋을 품을거면 첫번째, 원격 origin에서 불러올 이미지면 두번째가 나을 거 같아요.

20191002
  • require은 CommonJS문법이고 import는 ES6문법으로, 자바스크립트 엔진이 지원하지 않는 브라우저는 import syntax를 사용해도 babel을 통해서 require로 전환된다.
  • require 키워드를 사용하면 런타임 중 코드에서 필요한 시점에 의존성 모듈을 로드(동적 로드)한다.
  • require 키워드는 동기식으로 로딩하기 때문에 require을 여러개 사용하면, 하나 하나씩 처리 된다(블로킹 문제와 속도가 느림).
  • import 키워드를 사용하면 import된 modules은 우선-파싱 되어 처음에 실행되지만 파일 안에 있는 코드는 나중에 실행된다.
  • import 키워드는 비동기식으로 로딩하기 때문에 빠르게 처리 할 수 있다(논블로킹)

모듈 정의하기

ES6

export에는 named exportsdefault exports 두가지가 있다

  • named exports: 모듈 하나에서 하나만 내보낼 때 사용
  • default exports: 모듈 하나에서 여러개 내보낼 때 사용
// 모듈에서 하나를 export, 파일내 한번만 사용가능하다.
export default function() {}
export default class {}

// 모든 속성을 export
export *;

// 모듈에서 여러개를 export
export function moduleFunc() {};
var property = "some property";
export { property };

// 모듈 전체를 import
import "my-module.js";
import myModule from "my-module.js";

// 모든 속성 import
import * as myModule from "my-module.js";

// 특정 멤버만 import
import { myMember } from "my-module.js";
import { reallyReallyLongModuleMemberName as shortName } from "my-module.js";

CommonJs

// 모듈 전체를 export
module.exports = module

// 함수를 직접 export
exports.moduleFunc = function() {}
모듈 가져오기 (import)

// 모듈 전체를 import
var module = require('./someModule.js')

// 특정 멤버(함수 등)만 import, 위의 module을 이용한다.
module.moduleFunc

Reference