자바스크립트 - 클래스와 모듈

 

자바스크립트의 클래스

자바스크립트엔 원래 클래스가 없었다.

하지만 클래스를 이용한 프로그래밍의 유용성이 너무 좋았기 때문에 ES5 부터 함수를 이용해 클래스를 흉내내는 방식으로 자바스크립트 만의 클래스가 만들어졌다.

 

* 자바스크립트 에서의 객체지향 프로그래밍(OOP)

다음과 같이 Person 클래스를 정의해보자.

class Person {
    // 생성자 선언
    constructor(name){
        this.name = name;
    }

    // method
    sayHello(){
        console.log(`안녕하세요, ${this.name} 입니다.`);
    }
}

// 객체 인스턴스 생성
const hojun = new Person(`hojun`);
hojun.sayHello();

결과 : 안녕하세요, hojun 입니다.

 

클래스를 정의하는데 있어 자바와 자바스크립트의 차이점은 생성자에 있는 듯 하다.

자바의 경우 생성자를 만들 때 해당 클래스의 이름으로 생성자 메소드를 만드는데 반해, 자바스크립트의 경우 constructor 라는 키워드를 통해 생성자를 만드는 것을 확인할 수 있다.

 

이제 여기서 클래스를 상속 받아보자.

class Student extends Person{
    
    constructor(name, school, major){
        super(name); // 부모 생성자를 먼저 만들어준다.
        this.school = school;
        this.major = major;
    }

    // function 을 붙여야 하지 않나...?
     getMajor(params) {
        console.log(`저는 ${this.name} 이며, ${this.school} 학교에 다니고 있고, ${this.major} 입니다.`);
    }
}

const hojun = new Student(`서호준`, '경성대', '소프트웨어 공학과');
hojun.getMajor();

 

상속 또한 자바에서 OOP 에 대해 공부한 대로, 자식 클래스 생성자를 호출할 때 super() 메소드를 통해 부모 클래스의 생성자를 먼저 만들어주고 있는 것을 확인할 수 있다.

 

 

모듈이란?

자바스크립트는 여러 파일로 나누어서 모듈 별로 나누어 작업할 수 있다.

이때, 파일 사이에 코드를 주고받을 수 있기 때문에 파일을 나눠서 코드를 작성하는 것이 가능하다.

여기서 파일 간에 주고받을 수 있는 코드 조각, 코드 단위를 '모듈' 이라고 한다.

즉, 재사용 가능한 코드 단위이자 파일간에 주고받을 수 있는 코드 단위를 모듈 이라고 보면 된다.

이 모듈은 함수가 될 수도, 클래스가 될 수도, 배열이나 객체가 될 수도 있고, 심지어는 상수가 될 수도 있다.

 

* import, export 를 다루기 전에 주의할 점

- babel 과 같은 개발 환경을 미리 세팅해 두도록 하자.

- https://poiemaweb.com/es6-babel-webpack-1

Babel | PoiemaWeb

 

다른 파일로 나누어 작업할 수 있는 원리

1. 내보내는 코드는 모듈이다.

2. 내보낸 코드는 다른 파일에서 가져다 쓸 수 있다.

이때 내보내는 건 export, 가지고 오는 건 import 라고 한다.

 

export 의 기본 사용

다른 파일에서 코드를 가져다 쓰기 위해서는 모듈을 내보내줘야 한다.

아래의 코드를 보자.

const sayHello = name => console.log(`내 이름은 ${name} 이야`);

예를 들어 위와 같은 함수를 다른 자바스크립트 파일에 가져와서 쓰고 싶다고 해보자. 그러면 이 함수를 export 해야 한다.

어떻게 내보내면 될 까?

export const sayHello;

위와 같이 내보내면 된다.

 

아니면 함수를 정의할 때 "이 함수는 모듈로서 내보낼 함수입니다." 를 명시해주어도 된다.

export const sayHello = name => console.log(`내 이름은 ${name} 이야`);

 

함수 뿐 아니라 상수, 배열, 객체, 클래스 등도 export 한 뒤 다른 파일에서 사용할 수 있다.

아래 코드를 참조해보자.

// 상수 내보내기
export const NAME = "서호준"

// 배열 내보내기
export let oddNumbers = [1,3,5,7,9]

// 클래스 내보내기
export class Student{
    constructor(name){
        this.name = name;
    }
}

 

export default

우리는 export 를 이용하여 하나 이상의 모듈을 내보낼 수 있다.

즉, 여러개의 모듈을 export 해줄수가 있는 것이다.

만일 그냥 export 가 아닌 export default 로 내보낸다면 "저는 이 파일에서 이 모듈 딱 하나만 내보낼 겁니다" 라고 하는 의미가 된다.

만일 팔일 전체에서 내보낼 모듈이 하나 뿐이라면 export default 로 내보내길 권장한다.

실제로 프레임워크나 라이브러리 등에서도 굉장히 자주 쓰인다.

 

export as

내보낼 모듈의 이름을 모듈의 이름이 아닌 내가 지정한 이름으로 내보내고 싶다면 'export 모듈 as 직접 정한 모듈 이름' 형식으로 내보낼 수 있다.

예를 들어 sayHello 함수를 myName 이라는 이름으로 내보내고 싶다면 아래와 같이 내보낼 수 있다.

const sayHello = name => console.log(`제 이름은 ${name} 입니다.`);
export {sayHello as myName};

 

여러 모듈을 다른 이름으로 보내고 싶을 때는 아래와 같이 내보낼 수 있다.

const sayHello = name => console.log(`제 이름은 ${name} 입니다.`);
const sayBye = () => console.log(`안녕히 계세요`);

export {sayHello as hihi, sayBye as goodBye};

import {hihi, goodBye} from './module.js';

hihi(`서호준`);
goodBye();

결과 :

제 이름은 서호준 입니다.
안녕히 계세요

 

import

export 를 이용해 내보내준 모듈을 다른 파일에서 가지고 올 때는 import 를 사용한다.

사용법은 다음과 같다.

import {모듈(들)} from '모듈을 보낸 파일'

 

위와 같은 형식으로 가져오면 된다.

예를 들어 module.js 파일에서 내보낸 sayHello 모듈을 가져오고 싶을 땐 아래와 같이 가지고 올 수 있다.

import {sayHello} from './module.js';

참고로 ./ 는 module.js 의 경로를 명시해준 것이다.

 

여러 모듈을 가지고 올 때는 다음과 같이 하면 된다.

import {sayHello, sayBye} from './module.js';

 

모듈들을 다른 이름으로 이용하고 싶다면 export as 처럼 import as 를 이용해 다른 이름으로 가져올 수 있다.

export {sayHello, sayBye};

import {sayHello as hihi, sayBye as goodBye} from './module.js';

hihi(`서호준`);
goodBye();

결과 :

제 이름은 서호준 입니다.
안녕히 계세요

 

 

참고 : https://edu.goorm.io/learn/lecture/19879/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EB%A5%BC-%EC%9C%84%ED%95%9C-javascript-es6

프레임워크를 위한 JavaScript ES6 - 구름EDU