💡 class에 대해 알아보기
class는 객체를 생성하기 위한 일종의 템플릿이다.
즉, class는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위한 변수와 메서드를 정의하는 큰 틀로, 객체를 정의하기 위한 상태와 메서드들로 구성이 되어있다.
쉽게 풀어서 설명하자면, 함수를 통해서 객체를 생성한다고 이해하면 될 것 같다. 객체 안에 여러 프로퍼티와 메서드들이 있는 것처럼 개발자가 의도한 대로 특정 객체를 만들어 사용하는 것이
class다.
class는 함수 종류 중 하나로, 특별한 함수라고 생각하면 된다.
즉, 객체를 생성하는 특별한 함수인 것이다.
🔗 class 기본 문법 알아보기
class는 class라는 키워드와 함께 class 이름을 선언하면서 생성하게 된다.
이렇게 생성된 class 안에는 객체의 기본 상태를 설정해 주는 생성자 메서드인 construtor이 있고 여러 메서드들이 함께 포함된다.
class Person {
construtor() {...}
메서드1() {...}
메서드2() {...}
메서드3() {...}
....
}construtor의 경우 해당 객체의 기본 상태를 담고 있는 부분이라고 생각하면 되고, 메서드들은 객체에서의 메서드와 같이 프로퍼티를 참조하여 조작 과정을 거쳐 특정한 동작을 하는 일종의 함수라고 생각하면 된다.
이렇게 class를 생성하고 이를 new 키워드와 함께 호출하면 내부에서 정의한 메서드들이 들어있는 객체가 생성이 된다.
let onePerson = new Person(...)위의 코드와 같이 new 키워드를 사용해서 새로운 객체가 생성이 되고 이렇게 생성된 객체는 onePerson이라는 변수에 할당이 되었다.
🔗 class 사용해보기
그렇다면 실제 간단한 예시를 통해서 class를 어떻게 활용하는지 함께 알아보자!
// class 만들기
class MakePerson {
// 기본 상태 설정
constructor(name, age) {
this.name = name;
this.age = age;
// this는 해당 객체를 의미한다.
}
// method1 만들기
PrintHello() {
console.log(`My name is ${this.name}!`)
// 여기서 this는 해당 함수를 호출하는 객체를 의미한다.
}
// mwthod2 만들기
PrintAge() {
console.log(`${this.name} : ${this.age}`)
}
}MakePerson이라는 이름으로 class를 하나 만들었고 이 class에는 2개의 메서드가 포함되어 있다.
// 새로운 객체 생성
const person1 = new MakePerson("HAN SE BIN", 25);MakePerson class를 활용해서 새롭게 생성된 객체를 변수 person1에 할당해 주었다.
// 객체 실제 사용해보기
console.log(person1);
// 출력 -> MakePerson { name: 'HAN SE BIN', age: 25 }
person1.PrintHello();
// 출력 -> My name is HAN SE BIN!
person1.PrintAge();
// 출력 -> HAN SE BIN : 25
const person2 = new MakePerson("HA HA HA", 28);
// MakePerson { name: 'HA HA HA', age: 28 }
const person3 = new MakePerson("HI HI HI", 26);
// MakePerson { name: 'HI HI HI', age: 26 }
이렇듯, class를 하나 만들어 놓으면 각각 다른 인수들을 할당하여 여러 객체를 생성할 수 있게 된다.
💡 class 모듈화 하기
앞서 class를 통해 객체를 생성하고 이를 활용하는 것을 알아봤다.
마지막으로, 기능별로 생성한 객체들을 서로 조합해서 사용하는 방법을 살펴보려고 한다.
흔히 프로젝트를 진행할 때, 하나의 파일에 모든 코드들을 작성하는 것이 아닌 기능별로 나누어 파일을 작성하고 이를 하나씩 조합하는 식으로 코드를 작성하게 되는데 이것을 모듈화라고 한다.
즉, 모듈화(Modularity)란, 어떤 시스템의 구성요소가 분리되고 재결합할 수 있는 정도를 의미한다.
기능별로 나눠서 코드를 작성하게 되면 가독성 측면에서도 훨씬 좋고 나중에 유지 / 보수할 때도 유용하기 때문에 대부분의 프로젝트(작업)는 모듈화를 통해 진행이 된다.
그렇다면, 위의 class를 통해서 각각의 기능에 맞는 객체를 생성했다면 이를 어떻게 조합해서 코드를 작성할 수 있을까?
여러 가지 방법이 있을 수 있지만 가장 일반적인 방법은 ES6에서 도입된 import 및 export를 사용하는 것이다.
[ export / import 사용하기 ]
- 클래스를 작성하고 해당 클래스를 모듈로 만들기 위해서 export를 사용한다. 아래의 코드는 export default를 사용했는데, 이는 해당 모듈에서 기본적으로 내보내는 클래스나 함수를 의미한다.
// export default 사용해서 모듈로 만들기
export default class MakePerson {
constructor(name, age) {
this.name = name;
this.age = age;
}
PrintHello() {
console.log(`My name is ${this.name}!`)
// 여기서 this는 해당 함수를 호출하는 객체를 의미한다.
}
}- 각각의 모듈을 조합하기 위해 import를 사용하게 되는데, 사용하려는 클래스가 모듈에서 기본적으로 내보내는 클래스일 경우(= export default) import 문에서 중괄호 { }를 사용하지 않아도 된다.
// import로 모듈 불러오기
import MakePerson from './MakePerson.js'(파일 경로);
// person1 객체 생성
const person1 = new MakePerson("HAN SE BIN", 25);- 만약, import 문에서 클래스의 이름이 충돌하는 경우, 별칭(alias)을 사용해서 import를 할 때 클래스 이름을 변경할 수 있다.
// import로 모듈 불러오기 -> as사용
import { MakePerson as Person } from './MakePerson.js'(파일 경로);
// person1 객체 생성
const person1 = new Person("HAN SE BIN", 25);이처럼, 독립적으로 존재하는 각각의 기능별 모듈들을 export와 import를 사용해서 조합할 수 있다.
물론 이외에도 다양한 방법이 있지만, 본 글에서는 많이 사용되고 있는 대표적인 예시로 export와 import를 사용한 것이다.
사실 이 글을 작성하는 지금도 class가 무엇인지, 언제 어떻게 사용해야 하는지 잘 모르겠다...💧
class를 이해하기 위해서는 다른 추가적인 학습이 많이 필요하기 때문에 공부를 계속하면서 좀 더 자세하고 명확한 설명으로 수정을 해나갈 생각이다!
✅ 참고 사이트
https://ko.javascript.info/class
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes
