라벨이 super인 게시물 표시

[React] constructor(props){super(props)} 작성이유

이미지
constructor(props){super(props)} 작성이유 React에서  1. 컴포넌트를 생성하거나  2. state 값을 초기화하거나 3.메서드를 바인딩할 때  사용한다. 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 된다.  여기에서 super는 부모클래스 생성자를 가르킨다. 리액트에서는 React.Component를 가리킨다. super(props) 선언전까지 constructor내에서는 this를 사용할 수 없다.  1번 사진 기존에는 state값을 초기화 하기위해서 1번 사진과 같이 작성했는데 클래스필드 문법을 지원하면서  2번 사진 2번 사진과 같이 작성할 수 있게되면서 메서드를 바인딩 하는경우가 아니라면 더 이상 constructor(props){super(props)}를 사용하지 않아도 된다. es6에서 화살표함수의 특성 때문에 더 이상 this를 직접 바인딩해주지 않아도 된다. .

[JavaScript] 객체지향언어 (prototype, inheritance, super, __proto__)

객체 지향 프로그래밍이란 객체를 사용하여 개체를 표현하는 방식을 객체 지향 프로그래밍(OOP)라고 말한다. 객체란  같은 취지의 서로 연관된 변수와 함수들을 grouping 하여 이름을 붙인것이다. prototype 프로토타입은 생성자함수와같이 재사용성을 높히기위한것이다. function Person ( name , first , second ) { this . name = name ; this . first = first ; this . second = second ; } Person . prototype . sum = function () { return "prototype : " + ( this . first + this . second ); }; let kim = new Person ( "kim" , 10 , 20 ); kim . sum = function () { return "this : " + ( this . first + this . second ); }; let lee = new Person ( "lee" , 10 , 10 ); console . log ( kim . sum ()); //this : 30 console . log ( lee . sum ()); //prototype : 20 일단 코드가 동작하는 순서를 설명해보면 맨밑에 console.log를 통해 kim과 lee객체에있는 sum()함수를 호출한다. 이 경우 생성자 함수안에 sum()함수를 일단 찾아보고 없는경우 해당 객체의 생성자인 Person의 prototype에 정의되어있는 sum()메소드를 통해 값을 가져온다. 하지만 kim의 경우 kim객체안에 따로 sum()함수를 지정해주었기 때문에 따로 prototype을 참조하지않고 자신이 소유하고있는 sum()함수를 실행한다. 그러므로 kim객체의 경우 결과값으로 30을 반환하며 lee객체의 경