class 사용하기

객체의 표현

• 객체는 상속을 통해 코드를 재사용할 수 있게 해준다.
• ES5 자바스크립트에서는 객체를 구현하기 위해 prototype을 사용한다.
• ES6에서 등장한 class는 prototype과 같은 개념인데, 쉽게 읽고 표현하기 위해 고안된 문법이다.
• 자바스크립트에서는 함수를 객체로 사용할 수 있다.

 

예제코드

App.js

import React from 'react';
import './App.css';
import ClassPrototype from './R012_Class&Prototype';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <ClassPrototype/>
    </div>
  );
}

export default App;

R012_Class&Prototype.js

import React, {Component} from "react";

class ClassPrototype extends Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    //ES5 prototype
    var ExamCountFunc = (function () {
      function ExamCount(num){
        this.number = num;
      }
      ExamCount.prototype.showNum = function () {
        console.log('1. react_' + this.number);
      };
      return ExamCount;
    }());
    
    var cnt = new ExamCountFunc('200');
    cnt.showNum();

    //ES6 class
    class ExamCountClass {
      constructor(num2){
        this.number2 = num2;
      }
      showNum() {
        console.log(`2. react_${this.number2}`);
      }
    }

    var cnt2 = new ExamCountClass('2hundred');
    cnt2.showNum();
  }

  render(){
    return(
      <h2>[THIS IS Class]</h2>
    )
  }
}

export default ClassPrototype;

코드 해설

• ExamCountFunc() 함수(객체)를 실행한 후 return되는 결과값(객체)을 cnt라는 변수에 저장한다.
• 생성자 함수를 실행하는데, 파라미터로 전달받은 num 변수의 값(200)을 객체 변수 number에 저장한다.
• 객체 안에 선언된 showNum() 함수를 실행한다.
• 생성자 함수명.prototype.함수명 형태로 선언해주면, 객체 외부에서 함수(cnt.showNum();)를 실행해 객체 내부에 선언된 함수로 사용할 수 있다. 함수가 실행되면, 생성자 함수에서 ‘200’으로 할당된 객체 변수 number를 사용한다.
• ExamCountClass 객체를 생성한 후 객체를 cnt2라는 변수에 저장한다.
• ES6에서는 객체를 class로 선언한다.
• constructor()라는 생성샂 함수가 실행되고 파라미터로 전달받은 num2라는 변숫값(2hundred)을 변수 number2에 저장한다.
• 객체 안에 선언된 showNum() 함수를 실행한다.
• 객체에 접근할 때 실행할 함수(showNum)는 class의 {}괄호(scope)안에 간단하게 선언할 수 있다. 함수가 실행되면, 생성자 함수에서 ‘2hundred’로 할당된 객체 변수 number2를 사용한다.

결과화면