수민정의 기술블로그

props 는 값을 변경할 수 없으나 state 는 값을 바꾸는 작업에 사용된다. state 는 하나의 객체로서 값을 저장하고 변경한다. 반드시 생성자에서 state 를 초기화 해야함 state 를 변경시킬 때에는 setState 함수를 사용해야함.(리엑트 엔진 구동이 됨) setState 는 비동기식으로 호출됨 import React, { Component } from 'react'; class StateExample extends Component { constructor(props) { super(props); this.state = { loading: true, formData: 'no data', }; this.handleData = this.handleData.bind(this); setTim..

자료형 선언은 'props-types' 를 import 해 사용한다. 이름은 PropsType이다. import React from 'react'; import PropsType from 'prop-types'; // prop-type 임포트 해야함 class PropsComponent extends React.Component { render() { return {this.props.name}; } } // PropsComponent 의 prototype 에 props 에대한 자료형 선언 PropsComponent.PropsType = { name: PropsType.string, }; // 상수선언 export default PropsComponent; 단방향 데이터 흐름에서 상위 에서 데이터를 내려..

의존 : 파일, 코드가 다른 파일이나 코드를 필요로 하는 것. 스프링의 그 의존이다. 자바스크립트는 라이브러리, 모듈을 관리하는 방법이 굉장히 불편했다고 한다. // 선언 순서로 인해 app.js 에서 jquery를 사용할 수 있게 됨. 단순히 statement 선언 순서 문제이다. 이것을 ES6에서는 import 구문으로 해결한다. import MyModule from './MyModule.js'// 기본으로 공유하는 모듈을 부릅니다. import { ModuleName } from './MyModule.js' // 모듈안의 특정 함수, 변수를 참조합니다. import { ModuleName as RenameModuleName } from '.MyModule.js' // 이름 충돌 이슈가 있을경우 다른..

클래스 기본의 JavaScript 는 클래스 표현식이 없어 prototype 을 사용했다. 상속 관계에서 사용되어 해당 타입의 객체들이 공유하도록 하게 끔 사용한다. new 연산자로 생성자 함수를 호출하면 , this 는 prototype 객체의 함수와 변수를 함께 참조한다. //생성자 함수 function Shape(x,y) { this.name = 'Shape', this.move(x,y) } //static 함수 Shape.create = function (x,y) {return new Shape(x,y)}; ƒ (x,y) {return new Shape(x,y)} //인스턴스 함수 Shape.prototype.move = function(x,y) { this.x = x; this.y = y; } ..

템플릿 문자열 ` (백틱) 안에 변수와 연산식, 문자열을 혼용한다. var string1 = '안녕하세요'; var string2 = '반갑습니다.'; var greeting = string1 + ' ' + string2; greeting "안녕하세요 반갑습니다." var product = {name : '도서', price:'4200'}; var message = '제품'+ product.name + ' 의 가격은 ' + product.price +' 입니다.'; message "제품도서 의 가격은 4200 입니다." var multiLine = '문자열1\n문자열2'; multiLine "문자열1 문자열2" var value = 1; var value1 = 2; var bool = false; var..

App.css 를 수정한다. .title { font-style: italic; } 이후 App.js 에서 사용할때에는 클래스를 임포트하듯 import '파일경로' 해당 스타일 적용시킬 수 있다. import React, { Component } from 'react'; import './App.css'; //

리엑트는 화면 출력에 특화되었다. 컴포넌트 구성의 프레임 워크로 여러 컴포넌트를 조합해 화면을 구성한다. 제이쿼리는 부모노드가 수정시 자식노드 까지 새로 그리지만, 리엑트는 다음에 나타날 화면의 노드를 미리 그려놓고 변경된 화면의 노드만 수정하는 가상 돔 기술을 사용한다. NPM(노드 패키지 매니저) http://www.npmjs.com 에서 필요한 자바스크립트 라이브러리를 받아 설치하고 삭제하는 중앙 저장소이다. node_modules 폴더에 라이브러리를 저장하고 , package.json 파일에 의존 파일을 설정한다. yarn 은 npm의 단점을 보완해 속도와 성능을 개선한 중앙저장소이다. WebPack (번들러) 사용된 파일을 분석, 웹 문서파일로 변환하는 도구이다. 프레임 워크가 .js .css ..