React ES6 (2) - 클래스, 화살표 함수

클래스

• 기존 자바스크립트 문법은 클래스 표현식이 없어서 prototype으로 클래스를 표현하였음
• ES6는 클래스를 정의하여 사용할 수 있음

 

• 기존 자바스크립트의 클래스 :
  • 함수를 생성자 형태로 선언한 다음 상속이 필요한 변수나 함수를 prototype 객체에 할당하는 방법을 사용했음
  • prototype 객체는 new 연산자로 생성되는 객체 안에서 this 연산자의 함수 및 변수 선언 위치를 참조할 수 있는 요소임
• 예시 1 :

  function Shape (x, y) {
      this.name = 'Shape';
      this.move(x, y);
  }
  
  // static 함수를 선언
  Shape.create = function(x, y) { return new Shape(x, y); };
  
  // 인스턴스 함수를 선언
  Shape. prototype.move = function(x, y) {
      this.x = x;
      this.y = y;
  }
  
  Shape.prototype.area = function() {
      return 0;
  };
  
  Shape.prototype = {
      move: function(x, y) {
          this.x = x;
          this.y = y;
      },
      area: function() {
          return 0;
      }
  };
  
  var s = new Shape(0, 0);
  s.area();

   └ new Shape(0, 0)과 같이 함수를 호출하면 this 객체에 해당하는 변수 및 함수가
      prototype 객체에 선언된 변수와 함수를 함께 참조함
      Shape() 함수에는 this.move에 함수를 정의하지 않았지만 prototype 객체에 move() 함수가 정의되어 있으므로
      prototype 선언 이후 new 연산자로 Shape() 함수를 호출하여 Shape 객체 s를 만듦
      객체 s는 prototype 객체 안에 있는 move() 함수를 참조할 수 있음
      또한 s는 prototype에 추가로 정의된 area() 함수도 참조할 수 있음
  
  
• 예시 2 (위 코드에서 이어짐) :

  function Circle(x, y, radius) {
      Shape.call(this, x, y);
      this.name = 'Circle';
      this.radius = radius;
  }
  Object.assign(Circle.prototype, shape.prototype, {
      area: function() {
          return this.radius * this.radius;
      }
  });
  var c = new Circle(0, 0, 10);
  c.area();  // 100

  └ Circle() 함수를 만드는 방법으로 자식 클래스를 생성한 것을 보여줌
      자식 클래스 Circle은 내장 함수 call()을 통해 부모의 생성자를 호출하여 초기값을 상속 받음
      부모 클래스 함수를 상속하는 방법으로 Object에 내장 된 assign() 함수를 이용하였음
      assign() 함수에 전달한 area() 함수는 shape.prototype에 정의된 area() 함수를 덮어씌움

 

• ES6의 클래스 :
  • ES6에서는 class 키워드로 클래스를 정의하므로 코드가 훨씬 간결해짐
• 예시 3 (예시 1을 ES6 클래스 표현식으로 변환) :

  class Shape {
      static create(x, y) { return new Shape(x, y); }
      name = 'Shape';  // ⓐ
      constructor(x, y) {
          this.move(x, y);
      }
      move(x, y) {
          this.x = x;
          this.y = y;
      }
      area() {
          return 0;
      }
  }
  var s = new Shape(0, 0);
  s.area();  // 0

  └ ⓐ : constructor() 함수 안에 this.name = 'Shape'로 클래스 변수를 선언하는 것과 동일한 작업을 수행함
  └ class 키워드로 Shape 클래스를 정의하였으며, Shape 클래스 안에 생성자 함수도 추가되었음
      클래스 정의 표현식에는 객체가 생성될 때 함께 만들어질 변수나 클래스 변수를 클래스 선언 블록 안에 같이
      정의할 수 있게 변경되었음
      생성자, 클래스 변수, 클래스 함수 정의에는 변수 선언을 위한 키워드(var, let, const, ...)를 사용하지 않음

 

• 예시 4 (예시2의 코드를 간결하게) :

  class Circle extends Shape {
      constructor(x, y, radius) {
          super(x, y);
          this.radius = radius;
      }
      area() {
          if(this.radius === 0 ) return super.area();
          return this.radius * this.radius;
      }
  }
  var c = new Circle(0, 0, 10);
  c.area();  // 100​

  └ Circle 클래스는 extends 키워드를 사용하여 Shape 클래스를 상속함
      부모의 함수를 참조할 경우 super()를 사용함
      ES6는 다중 상속이나 인터페이스는 지원하지 않음
  
  

---

 

화살표 함수

• 화살표 함수는 추가된 표현식을 사용하는 함수이다
• 화살표 기호인 => 로 함수를 선언한다
• 함수 표현식을 간결하게 함
• 커링과 같은 디자인 패턴에서 사용되는 함수를 반환할 때 '계단형 함수 선언'과 같은 구조가 만들어지지 않게 해준다는 장점이 있음

 

• 기존 자바스크립트의 함수 사용 예시 :

  function plus(a, b) {
      return a + b;
  }
  
  var plus = function(a, b) {
      return a + b;
  };

  
  
  
• ES6의 화살표 함수 사용 예시 :

  var plus = (a, b) => {  // ⓐ
      return a + b;
  };
  var plus = (a, b) => a + b;  // ⓑ
  var plus_multp = (a, b) => ({plus: a+ b, multp : a * b });  // ⓒ
  
  
  function addNum(num) {
      return function(val) {
          return num + val;
      };
  }
  
  var addNum = num => val => num + val;  // ⓓ
  // a = 3; b = 10; addNum(a)(b)의 값은 13

  ┌ ⓐ : 기존의 함수 표현식을 화살표 함수로 변경하였음
  ├ ⓑ : 결과값을 바로 반환하는 경우에는 중괄호를 생략하고 => 뒤에 반환 표현식을 넣을 수 있음
  ├ ⓒ : 반환값이 객체라면 괄호로 결과값을 감싸 간결하게 표현 가능
  └ ⓓ : 화살표 함수를 사용하여 코드를 간결하게 만듦
  
  
  
• ES6의 화살표 함수 사용 예시 2:

  class New {
      val = 1;
      constructor() {
          var plus = function(a, b) {
              return this.val + a + b;
          }.bind(this);
          
          var plus_2 = (a, b) => this.val + a + b;
      }
  }

  └ 콜백 함수의 this 범위로 생기는 오류를 피하기 위해 bind()함수를 사용하여 this 객체를 전달하는 과정도 포함함