[node.js] 생성자/ super(props) / props

Hyo Kyun Lee·2021년 7월 29일
0

node.js

목록 보기
29/34

1. class 생성자

class나 객체의 instance를 생성하는 인자로, 최초 생성자 실행시에 instance가 생성된다.

class foo(){
  constructor(){
    this.init
  }
}

2. class 생성자에 대한 super()

super() 이용하면 생성자를 상속받을 수 있다.

super의 인자에는 상속받는 생성자의 인자를 모두 포함하고 있어야 하며,
생성자를 상속받았기 때문에 다른 객체라도 해당 생성자에 접근이 가능하다.

super()로 상속받는 시점부터 this가 참조하는 instance는 부모 class이다.

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return this.first+this.second;
    }
}
class PersonPlus extends Person{
    constructor(name, first, second, third){
        super(name, first, second);
        this.third = third;
    }
    sum(){
        return super.sum()+this.third;
    }
    avg(){
        return (this.first+this.second+this.third)/3;
    }
}
 
var kim = new PersonPlus('kim', 10, 20, 30);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());
kim.sum() 60
kim.avg() 20

3. props

반환자, 데이터에 접근하기 위해 사용하는 parameter

props 개념은 React에서 사용하는 개념이지만, node.js와 React는 백엔드/프론트엔드 구현관점에서 빈번히 사용하는 프레임워크로 알아두어야 할 개념이다.

React는 기본적으로 Component class의 서브클래스를 활용하는 component 프로그래밍을 기반으로 logic을 구현한다.

우리가 node.js에서 promise를 사용하여 resolve 및 reject 파라미터를 반환받는 것처럼, React component에서 반환하는 값을 props parameter를 통해 접근하여 얻을 수 있다.

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

위 코드는 super와 props 개념을 이해할 수 있는 가장 기초적인 코드이다.

  • React module의 Component class를 상속받아 해당 method를 사용할 수 있다.
  • 해당 class를 상속받은 후, super를 통해 class 생성자 내부의 logic을 모두 상속받았다.
  • Square라는 별도의 class 객체는 자신만의 생성자가 존재(이 역시 props를 받음), 이 상태에서 상위 클래스의 생성자를 상속받아 사용이 가능하다.
  • props parameter를 전달받아, props 내부의 data와 함께 해당 class method를 활용할 수 있다.
  • this는 React.Component class를 참조한다.

4. 참조링크

super()
https://opentutorials.org/module/4047/24620

props
https://reactjs-kr.firebaseapp.com/tutorial/tutorial.html

0개의 댓글