본문 바로가기

분류 전체보기

(123)
connect API connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) connect는 react-redux의 내장 API 이다. 이 함수는 React Component를 Redux Store에 '연결' 해준다. 이 함수의 리턴값은 특정 컴포넌트 클래스의 props를 store의 데이터에 연결시켜주는 또 다른 함수를 리턴한다. 리턴된 함수에 컴포넌트를 인수로 넣어 실행하면, 기존 컴포넌트를 수정하는게 아니라 새로운 컴포넌트를 return 한다. 인수 : mapStateToProps(state, [ownProps]): (Function) store의 state를 컴포넌트의 props에 매핑 시켜준다. ownProps 인수가 명시될 경우, 이를 통..
객체지향(OOP) 프로그래밍 객체지향 프로그래밍이란 캡슐화, 다형성, 상속 등을 이용하여 코드 재사용을 증가시키고유지보수를 감소시키는 장점을 얻기 위해서 객체들을 연결 시켜 프로그래밍 하는 것 1. 추상화(Abstraction)공통의 속성이나 기능을 묶어 이름을 붙이는 것 2. 캡슐화(Encapsulation)데이터 구조와 데이터를 다루는 방법들을 결합 시켜 묶는 것객체가 맡은 역할을 수행하기 위한 하나의 목적을 한데 묶는다외부에서 직접 접근을 하면 안되고 오로지 함수를 통해서만 접근 3. 상속성, 재사용(Inheritance)상위 개념의 특징을 하위 개념을 물려받는 것 4. 다형성(Polymorphism)부모클래스에서 물려받은 가상 함수를 자식 클래스 내에서 오버라이딩 되어 사용하는 것
CLASS Class : 공통적인 속성을 모아 한데 묶은 덩어리 또는 명세 Instance : 해당 클래스의 속성을 지닌 구체적인 객체 예시(실생활) 과일을 예로 들면 배, 사과, 바나나, 감, 오렌지 등은 과일이라는 분류, 집합, 집단에 속함 여기서 과일은 클래스이고 배, 사과, 바나나 등은 과일이라는 클래스에 속한 인스턴스 이다 또한 과일은 음식이라는 범주에 속하기 때문에 과일 클래스는 음식클래스의 하위클래스가 된다 배, 사과, 바나나 등은 과일이면서 음식이기도 한데 과일과 음식은 추상적이고 배, 사과, 바나나 등은 눈으로 볼 수 있고 만질 수 있는 구체적인 물체이다 이렇게 공통된 속성을 지닌 구체적인 대상을 인스턴스라고 한다 이 인스턴스들의 공통속성을 모은 추상적인 개념이 클래스이다 음식 : super cla..
PROTOTYPE 메소드 상속 및 동작원리 prototype으로 메소드 작성시 new연산자로 인스턴스를 생성하면 각 인스턴스에서 __proto__라는 프로퍼티를 통해 메소드로 접근할 수 있다 function Person(n, a) { this.name = n; this.age = a; } Person.prototype.setOlder = function() { this.age += 1; } Person.prototype.getAge = function() { return this.age; } var jiwon = new Person('지원', 30); var suji = new Person('수지', 25); 이 때 __proto__는 생략이 가능하기 때문에 마치 자신의 것처럼 메소드를 호출할 수 있게 해준다 jiwon...
클로저(CLOSURE) Lexical environment 선언 당시의 환경에 대한 정보를 담는 객체(구성 환경) '이 함수는 이러이러한 것들로 구성되어 있다' 같은 정보 클로저(CLOSURE) 함수 내부에서 생성한 데이터와 그 유효범위로 인해 발생하는 특수한 현상 / 상태 외부에 정보를 제공할 수 있는 유일한 수단은 Return 함수내부에서 다시 함수를 return 한다고 해도 최초 선언시에 생성된 스코프와 환경정보는 변하지 않고 최초 선언시의 정보를 유지한다. 스코프(유효범위)는 정의될 때 결정된다. 그렇기 때문에 정의됐을 때 당시에 들고있던 정보를 그대로 유지할 수 있는 것이다. 클로저의 이점 접근 권한 제어 지역변수 보호 데이터 보존 및 활용 function a() { var x = 1; return function b..
CALL, APPLY, BIND 메소드 call, apply, bind 메소드 func.call(thisArg[, arg1[, arg2[, ...]]]) func.apply(thisArg, [argsArray]) func.bind(tihsArg[, arg1[, arg2[, ...]]]) 첫번째 인자는 this가 될 대상을 지정 두번째 인자부터는 매개변수가 된다. call 과 apply의 차이는 두번째부터 쭉 나열해서 매개변수를 받느냐 아니면 두번째 인자 하나에 배열로 합쳐서 하나의 인자로 받느냐의 차이일 뿐이다. call과 apply는 즉시 호출하는 명령이다. 반면 bind는 새로운 함수를 생성 할 뿐 호출을 하지는 않는다. function a(x, y, z) { console.log(this, x, y, z); } var b = { c: '..
THIS this 전역공간에서 : window / global함수 내부에서 : window / global ( 함수는 전역객체의 메소드 )메소드 호출시 : 메소드 호출 주체 ( 메소드명 앞 )callback에서 : 기본적으로는 함수내부에서와 동일제어권을 가진 함수가 callback의 this를 명시한 경우 그에 따른다개발자가 this를 바인딩한 채로 callback을 넘기면 그에 따른다.생성자함수에서 : 인스턴스
함수 호이스팅 끌어올린다. 변수 '선언' 함수 '선언' - 호이스팅 전 console.log( a() ); console.log( b() ); console.log( c() ); function a() { // 함수 선언문 return 'a'; } var b = function bb() { // 기명 함수표현식 return 'bb'; } var c = function() { // (익명) 함수표현식 return 'c'; } - 호이스팅 후 function a() { return 'a'; } var b; var c; console.log( a() ); console.log( b() ); console.log( c() ); b = function bb() { return 'bb'; } c = function() ..