module 시스템

DEOKJIN JEONG·2023년 7월 3일

React | 리액트

목록 보기
1/5

모듈 시스템 이란 ?

'코드' 를 '여러 파일로 분할' 한다. 
그래서, 필요할 때, 해당 파일을 로드 한다. 
이렇게, 쪼개진 파일을 어떻게 '내보내고', '가져올 수 있는가!'' 에 대한 방식을 제공하는 것이 모듈 시스템

모듈 시스템의 핵심은 '가져오기' 와 '내보내기' 임. 

ES5 모듈 시스템 방식

  • 예시
1. 기본 문법 
	1.1 내보낼 때 
		module.exports
	1.2 가져올 때 
		require

2. 예시 
	[testA.js 에서 내보내는 경우] 
        const text = "하이하이";
        module.exports = text;
    
    [testB.js 에서 가져오는 경우]  
        const {text} = require ("a.js")
        console.log(text);

ES6 모듈시스템 방식

  • 예시
1. 내보내기 
	1.1 내보내는게 여러개 일 때 
	export {text}

	1.2 내보내는게 한 개 일 때 | '단일' 로 내보낼 때  
	export default text

2. 예시 
	[testA.js 에서 내보내는 경우]
	const text = "하이하이";

	export {text};   // '여러개' 내보내는 경우 
	export default text;   // '단일' 로 내보내는 경우
	
	[testB.js 에서 받는, 가져오는 경우]
	import {text} from "a.js"
		// export {text} 로 내보내는 경우
		// ⭐이름은 내보낼 때의 이름과 일치 해야 함⭐
	
	import test2 from "a.js"   
		// export default 로 내보내는 경우	
		// ⭐test2 대신 다른 이름으로 변경해서 사용해도 됨
profile
으랏찻차

0개의 댓글