📆 날짜

2023/12/14(목)

📚 챕터

클래스와 함수의 관계

---

👨🏻‍💻 학습 내용

🎯 클래스와 함수의 관계

클래스는 ES6에서 나온 개념으로,ES6 이전에는 프로토타입을 활용해
클래스의 작동 방식을 동일하게 구현할 수 있었다.
클래스가 작동하는 방식은 자바스크립트의 프로토타입을 활용하는 것이라고 볼 수 있다.클래스의 코드를 바벨 에서 트랜스파일하면 클래스 작동을 생성자 함수로
매우 유사하게 재현할 수 있다.
즉, 클래스는 객체지향 언어를 사용하던 다른 프로그래머가 좀 더 자바스크립트 에 접근하기 쉽게 만들어주는, 일종의 문법적 설탕(Syntacic sugar)의 역할을 한다고 볼 수 있다.또한 자바스크립트 클래스가 프로토타입을 기반으로 작동한다. 아래 예제코드는 클래스의 코드를 바벨에서 생성자 함수로 변환한 코드다.

<script>

class Car {
  constructor(name) {
    this.name = name
  }

  honk() {
    console.log(`${this.name}이 경적을 울립니다!`)
  }

  static hello() {
    console.log('저는 자동차입니다')
  }

  set age(value) {
    this.carAge = value
  }

  get age() {
    return this.carAge
  }
}
'use strict'

//클래스가 함수처럼 호출되는 것을 방지
function _classCallCheck(instance, Constructor) { 
if (!(instance instanceof Constructor)) { 
throw new TypeError("Cannot call a class as a function"); 
  } 
}


// 프로퍼티를 할당하는 코드
function _defineProperties(target, props) { 
for (var i = 0; i < props.length; i++) { 
var descriptor = props[i]
descriptor.enumerable = descriptor.enumerable || false
descriptor.configurable = true
if ("value" in descriptor) descriptor.writable = true
Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor)
 } 
}

// 프로토타입 메서드와 정적 메서드를 선언하는 코드
function _createClass(Constructor, protoProps, staticProps) { 
if (protoProps) _defineProperties(Constructor.prototype, protoProps) 
if (staticProps) _defineProperties(Constructor, staticProps) 
Object.defineProperty(Constructor, "prototype", { writable: false }) 
return Constructor 
}

var Car = /*#__PURE__*/function () {
  function Car(name) {
    _classCallCheck(this, Car);
    this.name = name;
  }
  _createClass(Car, [{
    key: "honk",
    value: function honk() {
      console.log("".concat(this.name, "\uC774 \uACBD\uC801\uC744 \uC6B8\uB9BD\uB2C8\uB2E4!"));
    }
  }, {
    key: "age",
    get: function get() {
      return this.carAge;
    },
    set: function set(value) {
      this.carAge = value;
    }
  }], [{
    key: "hello",
    value: function hello() {
      console.log('저는 자동차입니다');
    }
  }]);
  return Car;
}();

</script>

🎯 클래스 챕터 정리

클래스는 객체를 생성하기 위해 도움이 되는 여러 기능을 제공하고 있다.
리액트의 많은 코드들이 클래스형 컴포넌트로 생성됐으므로 클래스를 이해하고 나면 클래스형 컴포넌트에 어떻게 생명주기를 구현할 수 있는지, 왜 클래스형 컴포넌트 생성을 위해 React.Component나 React.PureComponent를 상속하는지,메서드가 화살표 함수와 일반 함수일 때 어떤 차이가 있는지 등을 이해할 수 있을것이다.

➡️ 다음 글 에서는 클로저에 대해 살펴보자.