본문 바로가기

Web

 (104)
state 정의 1. class fields 문법 사용 (https://babeljs.io/docs/plugins/transform-class-properties/) class Counter extends Component { state = { number: 0 } } 2. class fields 사용하지 않을 때 class Counter extends Component { constructor(props) { super(props); this.state = { number: 0 } } }
JSX 조건부 렌더링 1. 삼항연산자 class App extends Component { render() { return ( { 1 + 1 === 2 ? (맞아요!) : (틀려요!) } ); } } 2. AND 연산자 class App extends Component { render() { return ( { 1 + 1 === 2 && (맞아요!) } ); } } 3. IF문 또는 Switch문 - IIFE(즉시 실행 함수 표현) class App extends Component { render() { const value = 1; return ( { (function() { if (value === 1) return (하나); if (value === 2) return (둘); if (value === 3) return ..
portals portals portals는 리액트 root 밖에 리액트를 넣을 수 있도록 해준다 iframe이나 html을 변경하지 못할 때 혹은 리액트 플러그인 내에서 렌더를 해야할 때 유용하다 리액트 루트 밖에서 렌더를 할때 사용할 수 있는 것이 portal이다 import React, { Component, Fragment } from 'react'; import { createPortal } from 'react-dom'; class Portals extends Component { render() { return createPortal(, document.getElementById("touchMe")); } } const Message = () => "Just touched it!"; class App ex..
Return Types Strings and Fragments Fragment 리액트가 여러 컴포넌트를 한번에 return을 못하기 때문에 div, span, [] 등으로 그룹핑을 하게되는데 이렇게 작업할 시 필요없는 코드가 많아지게 된다.이 때 Fragment를 사용할 수 있다 import React, { Component, Fragment } from 'react'; class ReturnTypes extends Component { render() { return ( ) } } class ReturnTypes extends Component { render() { return ( ) } } return strings return string도 가능하다 import React, { Component, Fragment } from 'react'; class Ret..
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...

티스토리툴바