Classes

ES6 in depth

es6Javascript

2017-12-30


개인적인 곡뢀 λ…ΈνŠΈλ‘œ, λ‚΄μš©μ— 였λ₯˜κ°€ μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€.

ES6의 class도 사싀 function이닀.(typeofλ₯Ό 찍으면 "function"으둜 λ‚˜μ˜¨λ‹€.) 단지 prototype 기반 상속보닀 λͺ…ν™•ν•˜κ²Œ ν‘œν˜„ν•˜κΈ° μœ„ν•œ syntatic sugar일 뿐!

class Person {
    // 클래슀 λ°”λ”” μ•ˆμ—λŠ” λ©”μ†Œλ“œλ§Œμ΄ λ“€μ–΄κ°„λ‹€. constructor()도 λ©”μ†Œλ“œμ΄λ‹€.
}
  • class μ•ˆμ—μ„œλŠ” function ν‚€μ›Œλ“œλ₯Ό 쓰지 μ•ŠλŠ”λ‹€. method()은 사싀 method: function ()을 짧게 쀄인 것이닀.

1. constructor λ©”μ†Œλ“œ

class Tea {
  constructor(name, price) {
    this.name = name
    this.price = price
  }
}

// 객체 μƒμ„±ν•˜κΈ°
var earlGray = new Tea("Earl gray", 3000)
  • 객체λ₯Ό μƒμ„±ν•˜λŠ” μ‹œμ μ— ν˜ΈμΆœλ˜λŠ” λ©”μ†Œλ“œμ΄λ‹€. Python 의 μ΄ˆκΈ°ν™” ν•¨μˆ˜ __init__()와 κ°™λ‹€.
  • 객체 생성 μ‹œ ν•„μš”ν•œ parameterλ₯Ό λͺ…μ‹œν•œλ‹€.
  • classμ—μ„œ constructorλŠ” μžˆμ„ μˆ˜λ„, 없을 μˆ˜λ„ μžˆλ‹€.

πŸ‘‰ React μ—μ„œ constructor() μƒλž΅ν•˜κΈ°

  • constructor() μ•ˆμ— this.stateλ₯Ό μ •μ˜ν•˜μ§€ μ•Šκ³  클래슀 λ°”λ”” μ•ˆμ—μ„œ λ°”λ‘œ state둜 μ •μ˜ν•˜λŠ” κ²½μš°κ°€ μžˆλ‹€. babel의 property initializer κΈ°λŠ₯ λ•Œλ¬Έμ΄λ‹€.
  • transform-class-properties babel plugin을 μ‚¬μš©ν•œλ‹€λ©΄ constructor()λ₯Ό ν˜ΈμΆœν•˜μ§€ μ•Šκ³ λ„ this에 μ ‘κ·Όν•  수 μžˆλ‹€. μ΄λŸ¬ν•œ νŒ¨ν„΄μ€ 더 κΉ”λ”ν•œ μ½”λ“œλ₯Ό μœ„ν•΄ ꢌμž₯되며 널리 μ‚¬μš©λ˜κ³  μžˆλ‹€.
// before
class App extends React.Component {
    constructor() {
        super()
        this.state = { ... }
        this.doSomething = this.doSomething.bind(this)
    }
    doSomething() { ... }
    render() {
        return ...
    }
}

// after
class App extends React.Component {
    state = { ... }   // stateλ₯Ό constructor μ•ˆμ— 쓰지 μ•Šμ•„λ„ λœλ‹€!
    doSomething = () => { ... }   // this 바인딩을 ν•˜μ§€ μ•Šμ•„λ„ λœλ‹€!
    render() {
        return ...
    }
}

πŸ‘‰ μ™œ arrow function은 this 바인딩을 ν•˜μ§€ μ•Šμ•„λ„ 될까?


2. super()

  • λΆ€λͺ¨ 객체의 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œ μ‚¬μš©ν•œλ‹€.

    • super(args) : λΆ€λͺ¨ 객체의 μƒμ„±μž ν•¨μˆ˜ 호좜
    • super.func(args) : λΆ€λͺ¨ 객체의 func() λ©”μ†Œλ“œ 호좜
class Polygon {
    constructor(width, height) {
        this.width = width
        this.height = height
    }
    get area() {
        return this.width * this.height
    }
}

class Square extends Polygon {
    constructor(sideLength, color) {
        super(sideLength, sideLength)   // Polygon 의 constructorλ₯Ό κ·ΈλŒ€λ‘œ μ‚¬μš©ν•œλ‹€.
        this.color = color  // Polygon 의 constructor에 λ”ν•΄μ„œ μƒˆλ‘œμš΄ propertyλ₯Ό μ •ν•  μˆ˜λ„ μžˆλ‹€.
    }
}

var square = new Square(2)
console.log(square.area)  // 4 => Polygon의 get area() λ©”μ†Œλ“œλ₯Ό μ‚¬μš©ν•  수 μžˆλ‹€.
  • μžμ‹ 클래슀의 constructor()μ•ˆμ—μ„œλŠ” super()λ₯Ό ν˜ΈμΆœν•˜κΈ° μ „κΉŒμ§€ this에 μ ‘κ·Όν•  수 μ—†λ‹€. (좜처) super()λ₯Ό 써주지 μ•Šκ³  this에 μ ‘κ·Όν•˜λ©΄ μ•„λž˜μ™€ 같은 였λ₯˜κ°€ λ°œμƒν•œλ‹€.
> Must call super constructor in derived class before accessing 'this' or returning from derived constructor

3. 멀버 λ©”μ†Œλ“œμ™€ static λ©”μ†Œλ“œ

  • 클래슀 λ‹¨μ—μ„œ λ°”λ‘œ ν˜ΈμΆœν•˜λŠ” λ©”μ†Œλ“œ.

    • μΈμŠ€ν„΄μŠ€λ³„λ‘œ 달라지지 μ•Šκ³  클래슀 λ‹¨μ—μ„œ μ“°λŠ” utility λ₯Ό λ§Œλ“€κ³  싢을 λ•Œ μ‚¬μš©ν•œλ‹€.
  • μΈμŠ€ν„΄μŠ€λŠ” static λ©”μ†Œλ“œλ₯Ό μ‚¬μš©ν•  수 μ—†λ‹€. λ°˜λŒ€λ‘œ ν΄λž˜μŠ€λŠ” 멀버 ν•¨μˆ˜λ₯Ό λ°”λ‘œ μ“Έ 수 μ—†λ‹€. (μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•˜κ³  μΈμŠ€ν„΄μŠ€ λ‹¨μ—μ„œ μ‹€ν–‰ν•΄μ•Ό ν•œλ‹€.)
class A {
    static sum(a, b) {
        return a + b;
    }
    sub(a, b) {
        return a - b;
    }
}

// 멀버 λ©”μ†Œλ“œ
var a = new A()
a.sub(2, 1)

// static λ©”μ†Œλ“œ
A.sum(1, 2)

4. extends

  • λΆ€λͺ¨ 클래슀λ₯Ό 상속받을 수 μžˆλŠ” ν‚€μ›Œλ“œμ΄λ‹€.
class Tea {
  constructor(name, price) {
    this.name = name
    this.price = price
  }
}

class Coffee extends Tea {
    constructor(name, price) {
        this.name   // Uncaught ReferenceError 였λ₯˜ λ°œμƒ (Must call super constructor in derived class before accessing 'this' or returning from derived constructor)
        super(name, price, color)  // super() 둜 μƒμ„±μž ν•¨μˆ˜ ν˜ΈμΆœν•΄μ•Ό this에 μ ‘κ·Όν•  수 있음.
        this.color = color
    }   
}

πŸ‘‰ 더 읽을 거리 - μƒμ„±μž ν•¨μˆ˜λ‘œ 상속 κ΅¬ν˜„ν•˜κΈ°


Reactμ—μ„œ extends

class App extends React.Component {
    constructor() {
        super() // Reactμ—μ„œ `constructor() {}` λ©”μ†Œλ“œλŠ” μ–Έμ œλ‚˜ κ·Έ μ•ˆμ—μ„œ `super()`λ©”μ†Œλ“œλ₯Ό λΆˆλŸ¬μ•Ό ν•œλ‹€. 이걸 쓰지 μ•ŠμœΌλ©΄ `missing super() call in constructor` μ—λŸ¬κ°€ λ‚œλ‹€.
        this.state = {...}
    }
    componentDidMount() {
        this.setState({...}) // `React.Component`λ₯Ό μƒμ†λ°›μ•˜κΈ° λ•Œλ¬Έμ— κ·Έ μ•ˆμ— μ •μ˜λ˜μ–΄ μžˆλŠ” `.setState()`λ©”μ†Œλ“œλ₯Ό μ‚¬μš©ν•  수 μžˆλ‹€.
    }
    render() {
        return ...
    }
}

μ°Έκ³