한 입 크기로 잘라먹는 리액트Table Of Contents
지금까지 Node.js로 하나의 파일을 제어하는 간단한 실습을 해보았습니다. 그러나 복잡한 애플리케이션을 만들려면 파일 하나로는 부족합니다. 이번 절에서는 여러개의 파일로 이루어진 패키지에서 각각의 파일이 다른 파일을 불러와 사용하는 모듈 시스템에 대해 알아보겠습니다.
모듈과 모듈 시스템
모듈이란 독립적으로 존재하는 프로그램의 일부로 재사용이 가능한 것들을 말합니다. 모듈은 모니터나 마우스 같은 컴퓨터의 주변장치에 비유할 수 있습니다. 모니터나 마우스는 독립적으로 존재할 수 있기 때문에 사용자의 컴퓨터에서 분리해 다른 컴퓨터에 연결할 수 있습니다. 마찬가지로 프로그래밍에서 모듈은 마치 컴퓨터 부품처럼 독립적으로 존재하는 것으로, 다른 프로그램의 부품으로 활용할 수 있습니다.
앞서 언급한 웹 쇼핑몰 구축 상황을 다시 떠올려 보겠습니다. 대다수 웹 쇼핑몰 프로그램에는 로그인, 장바구니, 상품 구매 기능이 있습니다. 이 기능들은 역할별로 분리되어 있으며, 모듈로 구성하면 다른 웹 서비스를 구축할 때 언제든지 재 사용할 수 있습니다. 이렇듯 재사용할 수 있고 독립적으로 존재하는 프로그램의 일부를 모듈이라 합니다.
자바스크립트에서는 독립된 하나의 파일을 ‘모듈’이라고 부릅니다. 자바스크립트 모듈은 대개 특정 정보를 담은 하나의 객체거나 특정 목적을 지닌 복수의 함수로 구성하는 경우가 많습니다.
모듈을 사용하는 방법을 ‘모듈 시스템’이라고 합니다. 자바스크립트에는 다양한 모듈 시스템이 있습니다. 이 책에서는 리액트에서 사용하는 ES 모듈 시스템을 중심으로 살펴보겠습니다.
ES 모듈 시스템
ES 모듈 시스템은 ECMAScript 모듈 시스템의 약자로, 줄여서 ESM이라고 합니다. ESM은 가장 최근에 개발된 모듈 시스템으로, 리액트, Vue와 같은 최신 프론트엔드 기술은 모두 ESM을 채택하고 있습니다.
ESM 사용 설정하기
Node.js는 기본적으로 ESM이 아닌 CJS 모듈 시스템을 사용합니다. 따라서 ESM 모듈 시스템을 사용하려면, package.json에서 설정을 변경해야 합니다.
CJS(CommonJS)의 약자로 Node.js의 기본 모듈 시스템 입니다.
문법 내용이 ESM과 약간 차이가 있습니다.
①"type": "module"항목을 추가하면, Node.js 패키지는 모듈 시스템으로 ESM을 사용하게 됩니다.
package.json에서 설정을 변경하지 않고 ESM 문법을 사용하면 오류가 발생합니다.
json 파일은 콤마가 중요합니다.
package.json과 같이 json 확장자가 있는 파일은 마지막 항목 외에는 항목 끝에 반드시 콤마(,)를 입력해야 합니다. 따라서 "type":"module"을 추가하려면, 윗 줄에 있는 "license":"ISC" 항목 뒤에 콤마(,)를 추가해야 합니다.
개별 내보내기
자바스크립트에서 모듈은 단지 하나의 파일일 뿐입니다. 그래서 모듈의 정의처럼 ‘독립적이고 재사용이 가능’한 자바스크립트 파일은 다른 파일에서 불러와 사용할 수 있습니다.
모듈이 필요한 이유는 특정 파일의 값이나 함수를 다른 파일에서 공유하기 위함 입니다. 그런데 특정 값이나 함수를 다른 파일에서 공유하려면, 먼저 해당 파일에서 내보내(export)는 공유 설정 작업이 선행되어야 합니다.
chapter3 루트 폴더에 circle.js 파일을 생성하고 다음 코드를 입력합니다.
코드를 불러오는 중 입니다 ...① 수학에서 원주율을 뜻하는 PI를 상수 3.141592로 선언했습니다. ② 함수 getArea는 매개변수 radius에 저장한 반지름으로 원의 넓이를 계산해 반환합니다. ③ 함수 getCircumference는 매개변수 radius에 저장한 반지름으로 원의 둘레 길이를 계산해 반환합니다.
circle.js에 선언한 한개의 상수와 두 개의 함수를 내보내겠습니다. ESM에서는 다음과 같이 export 키워드를 변수나 함수 선언 앞에 붙이면 해당 값을 모듈에서 내보낼 수 있습니다.
코드를 불러오는 중 입니다 ...한 번에 여러 값을 내보낼 때는 export를 다음과 같이 사용합니다.
코드를 불러오는 중 입니다 ...① 모듈에서 상수 PI와 함수 getArea, getCircumference를 한번에 내보냅니다.
이렇게 필요한 값이나 함수를 내보내면 이제 다른 파일(모듈)에서 불러와 사용할수 있습니다.
개별 불러오기
ESM은 C, 자바, 파이썬처럼 import 문으로 모듈에서 값을 불러옵니다. import 문을 이용해 index.js에서 circle.js가 내보낸 값을 불러옵니다.
index.js에서 앞서 작성한 내용은 삭제하고 다음과 같이 코드를 작성합니다.
코드를 불러오는 중 입니다 ...① 모듈 circle.js에서 3개의 값 PI, getArea, getCircumference를 불러옵니다
터미널에서 npm run start 명령어로 index.js를 실행하면 해당 값을 정상적으로 불러오는지 확인할 수 있습니다.
전부 불러오기
ESM에서는 불러올 값이 많다면, import * as A from B 형식으로 모듈이 내보낸 값을 한 번에 불러올 수 있습니다.
index.js에서 import * as A from B 형식으로 모듈을 불러오도록 수정하겠습니다.
코드를 불러오는 중 입니다 ...① 모듈 circle.js가 내보낸 값을 모두 불러와 변수 circle에 프로퍼티로 저장합니다. ② circle.PI와 같이 점 표기법으로 특정 모듈에 접근합니다.
npm run start 명령으로 출력 결과를 확인할 수 있습니다.
기본값으로 내보내기
ESM에서는 export 키워드 다음에 default를 붙여 모듈의 기본값으로 내보낼 수 있습니다.
코드를 불러오는 중 입니다 ...모듈에서 기본값으로 내보내면 다른 모듈이 이 값을 불러올 때 다른 이름을 붙여도 상관없습니다.
코드를 불러오는 중 입니다 ...지금까지 export로 내보낸 값은 중괄호로 내보낸 이름과 동일한 이름으로 불러와야 했습니다. 반면 export default 명령으로 기본값으로 내보내면 자유롭게 이름을 지정해 불러올 수 있습니다.
circle.js를 다음과 같이 수정합니다.
코드를 불러오는 중 입니다 ...① PI, getArea, getCircumference를 프로퍼티로 하는 객체를 기본값으로 내보냅니다.
circle.js에서 기본값으로 내보낸 값들을 index.js에서 불러옵니다.
코드를 불러오는 중 입니다 ...모듈의 기본값으로 불러올 때는 중괄호를 이용해 이름을 명시하지 않아도 되며, 이름도 자유롭게 지정할 수 있습니다. 다만 기본값으로 내보내지 않은 모듈에서 값을 불러오면 오류가 발생합니다.
다음과 같이 circle.js에서 기본으로 내보내는 값이 않도록 수정합니다.
코드를 불러오는 중 입니다 ...모듈 circle.js는 export default로 내보낸 기본값이 없습니다. 따라서 index.js에서 중괄호 없이 기본값으로 내보낸 값을 불러오면 오류가 발생합니다.