전체 글90 [생활코딩] 객체지향 - super / 객체상속 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{ avg(){ return (this.first + this.second)/2; } } var kim = new PersonPlus('kim',10 ,20); console.log('kim.sum()', kim.sum()); console.log('kim.avg()', kim.avg()); 코드에서 아쉬운 부분이 있다. PersonPlus 클래스에 first와 second 외에.. 2020. 8. 1. 5. state와 클래스형 컴포넌트 state는 동적 데이터를 다룰 때 사용한다. props는 그런 데이터를 다루지 못하기 때문에. 우리는 state를 사용하기 위해서 클래스형 컴포넌트를 사용할 것이다. import React from 'react'; class App extends React.Component { render() { return I'm a class component } } export default App; class컴포넌트는 클래스라서 return문을 사용할 수가 없어서, JSX를 반환하려면 render()함수를 사용해서 그 안에 return을 작성한다. 함수형 컴포넌트 : return 문이 JSX를 반환 클래스형 컴포넌트 : render() 함수가 JSX를 반환한다. 리액트는 state를 직접 변경하지 못한다. st.. 2020. 8. 1. [생활코딩] 객체지향 - 메소드 구현 / 상속 전통적인 방법에서는 생성자 함수에서의 prototype 객체에 sum이라는 프로퍼티를 함수로 지정하는것을 통해서 Person이라는 생성자로 만들어진 모든 객체가 공유할수있는 함수를 만들수있었다. 우리가 class에서는 어떻게할까? 첫 번째는 저 방법은 그대로 사용하는것이다.(class는 이미 있는것에서 문법만 좀 추가된것이므로) 두 번째 저렇게 안에 넣어서 사용가능하다. (clasas는 function을 안붙인다.) kim이라고 하는 객체만은 다르게 동작하는 함수를 정의하고 싶다면 전에 사용했던 같은 방법으로 정의하면 된다. 자바스크립트는 우선 kim이라는 객체가 sum이라는 함수를 가지고 있는지를 확인해보고, 없다면 kim이라는 객체의 person이라는 객체에 sum이라는 메소드가 정의되었는지 보고 있.. 2020. 7. 31. [생활코딩] 객체지향 - Classes 객체를 찍어내는 공장 constructor의 대체제 class를 살펴보겠다. class는 ES6 문법인데, 통계를 기반으로 해당 문법이 어느 환경에서 가능한지 아래 사이트에서 확인 가능하다. https://caniuse.com/ IE 에서는 사용이 안된다고 나오는데, https://babeljs.io/ 최신 문법의 코드를 과거의 코드로 변환해주는 사이트가 있다. Compiler , Transpiler 라고 부른다. function Person만 놓고 본다면 그냥 함수이지만 저 함수가 사용될 때 new를 붙이게 되면 객체를 return하게 된다. 객체가 return되기전에 this.name = name; 같은 코드로 인해서 그 객체의 속성이 기본적으로 셋팅이 된 객체가 return 되는거다. new가 붙게.. 2020. 7. 31. 이전 1 ··· 9 10 11 12 13 14 15 ··· 23 다음
