super에 대해서

super는 자식클래스 안에서 부모클래스의 생성자를 호출할 때 사용한다. - (3)

super는 자식클래스 안에서 부모클래스의 메소드를 호출할 때 사용한다. - (6)

class Car {
(3)	constructor(brand) {
    	this.carname = brand;
    }
(6)    present() {
    	return 'I have a ' + this.carname;
    }
}

class Model extends Car {
(2)	constructor(brand, mod) {
    	super(brand);
        this.model = mod;
    }
(5) show() {
    	return super.present() + ', it is a ' + this.model;
    }
}

(1)let mycar = new Model("Ford", "Mustang");
(4)mycar.show();

super([arguments]); // 부모 생성자 호출

super.functionOnParend([arguments]);

 

- super 이후에 this키워드를 사용해야 되는데. 생성자에서는 super가 하나만 사용되거나 사용되기 전에 호출되야 한다. 

class Square extends React.Component {
	constructor(props) {
    	// Can't user 'this' yet
        super(props);
        // Now it's okay though
        this.state = { a: true };
    }
}

부모클래스의 생성자를 호출하기 전에 this.name을 사용하면 문제가된다. 

React에서도 this.state를 생성자에서 정의할 때 super가 먼저와야된다. 

class Person {
	constructor(name) {
    	this.name = name;
    }
}

class PolitePerson extends Person {
	contructor(name) {
    	this.greetCollegues();
        super(name);
    }
    greetColleagues() {
    	alert('My name is ' + this.name + ', nice to meet you!');
    }
}

React에서 super에 props(property)를 인자로 전달하는데 React Component 객체가 생성될때 props의 속성을 초기화하기위해 부모컴포넌트에게 props를 전달한다. (생성자 내부에서도 this.props를 정상적으로 사용하게 하기위해서)

// Inside React
class Component {
	constructor(props) {
    	this.props = props;
        // ...
    }
}

// Inside your code
class Button extends React.Component {
	constructor(props) {
    	super(); // We forgot to pass props
        console.log(props); // {}
        console.log(this.props); // undefined
    }
    // ...
}

class Button extends React.Component {
	constructor(props) {
    	super(props) // We passed props
        console.log(props_; // {}
        console.log(this.props); // {}
    }
}

 

# State와 Props에 대해서 

Props: 

1. Properties의 줄임말.

2. Props는 상속하는 부모 컴포넌트에서 자녀 컴포넌트에 데이터를 전달하는 방법이다. 

3. Props는 읽기 전용(immutable)로 자녀 컴포넌트 입장에선 변하지 않는다. 

(변하게 할려면 부모 컴포넌트에서 state를 변경해야한다.)

A 부모 컴포넌트
	state = (a: "a")
    
<B컴포넌트 aProps=(this.state.a) />
B 자식 컴포넌트
	a state 필요
    this.props.aProps
    
<ChatMessages
	messages={messages}
    currentMember={member}
/>

State: 

1. 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 안에서 데이터를 전달하려면 State를 사용해야한다. 

예: 검색할때 글이 변하는건 state를 바꾸는거다. 

2. State는 변경이 가능하다(mutable)

3. State가 변하면 re-render가 된다. 

A 컴포넌트
	state = {a: "a"}
    
    this.state.a
    				this.state.a
    this.state.a
    
    

state = {
	message:'',
    attachFile: undefined,
    openMenu: false,
};