[JS] - Class를 활용해 모듈화하는 방법

 

Class 란?

JavaScript에서 Class 란 다른 언어들에서 쓰이는 Class 와는 다르다.

Class 기반 언어들과 달리, 프로토타입 기반의 객체지향 언어인 JavaScript 에

진입장벽을 느끼는 개발자들이 보다 빠르게 습득할 수 있도록

ES6의 Class 는 단순명료한 새로운 문법을 제시한다.

 

Class 는 객체를 생성하기 위한 틀로, 객체가 아니다.

prototype 과는 달리 constructor 를 포함하며,

Class의 선언이 호이스팅 되거나 메모리에 올라가지 않는다.

 

더 정확히는 호이스팅 되지만 let, const 처럼 TDZ 를 갖는다.

TDZ 설명은 아래 글에서 정리한 바 있다.

 

[JS] - 호이스팅(Hoisting) 이란? TDZ(Temporal Dead Zone) 이해하기

[JS] - 호이스팅(Hoisting) 이란? TDZ(Temporal Dead Zone) 이해하기

 

Class  기본 작성법

기본적인 Class 작성법은 다음과 같다.

생성자 함수와 같이 클래스명을 붙여 생성할 수 있고,

클래스명은 주로 파스칼 케이스로 작성한다.

 

생성자 함수와 비슷하지만, 생성자 함수와 달리

호출시 Class는 new 키워드를 생략할 수 없다.

 

또한 prototype을 붙이지 않아도 메서드를 추가할 수 있으며

# 키워드를 붙여 private 변수를 생성할 수 있다.

//클래스 생성
class Info {
    // # 키워드를 붙이면 private 변수로, 외부 접근을 막는다
    #name = "";

    //생성자
    constructor({name, age}) {
        // this는 클래스가 생성할 인스턴스
        this.name = name;
        this.age = age;
    }

    //함수 생성
    write(){};
}

//클래스 사용 -> 인스턴스 생성
let info = new Info({name: "홍길원", age: 31});
console.log(info.write());

 

앞서 적은 것처럼, class는 일시적 사각지대(TDZ)에 빠지므로,

선언되기 전에 참조할 수 없다.

 

일반적으로 생성자 함수와 같이 선언하지만,

표현식으로도 클래스를 정의할 수 있다.

 

이 때, 클래스가 할당된 변수가 아닌,

클래스의 이름을 사용해 클래스를 생성하면

참조 에러가 발생한다.

const Info = class InfoClass {};

// 클래스를 할당한 변수로 생성
const info = new Info();
console.log(info); // InfoClass {}

// 클래스의 이름으로 생성
new InfoClass(); // ReferenceError: InfoClass is not defined

 

이 외에도, getter / setter 사용법이나

클래스 상속 등 알아야할 내용이 많지만,

여기서는 기본 작성법과 모듈화하는 방법만

간단히 정리하기로 한다.

Class 로 모듈화하는 방법

모듈은 ES6 모듈을 기준으로,

import 와 export 만으로 가능하다.

 

단, 모듈을 사용하는 js 파일로 지정해주어야 한다.

이는 모듈을 import / export 할 js 파일들의

확장자를 .mjs 로 저장해주면 된다.

 

함수나 클래스를 import / export 하는 방법은

동일하고, 메서드 호출 방식 등의 차이만 있다.

 

• function 형태 import / export

// 1. 모듈 내보내기 (export)
export const function = () => {};
export const a=1;

// 2. 모듈 가져오기(import) - CommonJs 에서는 require 로 작성했음
// 2-1) 전체 변수/함수를 담은 객체 참조
Import fileObj from './file.mjs';
fileObj.func(); // 

// 2-2) 특정 변수/클래스만 가져오기 (구조 분해 할당)
Import {func, a} from './file.mjs';
func();

 

• class 형태 import / export  -->  default 사용해보기

import Foo from 'foo.js';

let FooComponent = new Foo();
console.log(FooComponent.render()); 	// 'hello module'

// 현재 파일에서 Foo 클래스 단독으로 내보낼 때 default 사용
class Foo {
  render() {
    return 'hello module!'
  }
}

export default Foo;

 

여러 JavaScript 파일들을 하나의 공간에서 공유하면

각 파일의 변수가 겹치면서 window 객체에 값이 재할당 된다.

 

ES6 모듈은 독자적인 "모듈 스코프"를 갖는다.

html 에서 파일을 불러올 때, type="module" 을 사용하므로써

각 모듈이 독립적으로 작동하도록 스코프를 분리할 수 있다.

<script type="module" src="foo.js"></script>