웹찢남

Component 클래스는 프로퍼티,state와 생명주기 함수가 들어있는 컴포넌트를 만들 때 사용 PureComponent 클래스는 Component 클래스를 상속받은 클래스다. PureComponent로 선언한 컴포넌트는 shouldComponentUpdate() 함수에서 shallowEqual() 함수로 얕은 비교를 하여 데이터의 변경이 있으면 화면을 새로 출력하고 Component클래스로 선언한 컴포넌트는 항상 새로 출력한다. *shallwEqual는 얕은 비교로 같은 요소를 가지면 같다고 본다. *"==="이나 "=="은 요소가 같아도 새롭게 정의된 배열이면 false로 취급한다. -----------------------------------------------------------------..

프로퍼티의 경우 컴포넌트 내부에서 값을 바꿀 수 없다. 하지만 값을 바꿔야하는 경우가 있다. 그 경우 state를 사용한다. state는 보통 버튼을 클릭하거나 입력하는 등의 이벤트와 함께 사용된다. constructor(props){ super(props); this.state={ =>state의 초기값을 객체형태로 정의 loading:true, formData: 'no data', }; this.handleData=this.handleData.bind(this); => 함수로 보냄 setTimeout(this.handleData,4000); => 4초후 함수 호출 } handleData() { const data='new data'; const {formData}=this.state; this.set..

JSX는 JavaScriptXML의 줄임말로 자바스크립트 XML을 추가한 문법이다 JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어 편리하다. src폴더의 App.js를 보면 return() 함수 내에 HTML을 사용하며 HTML이 아니라 XML 마크업 규칙을 따르므로 img 엘리먼트 끝에 />를 사용하는 등 차이가 있다. ---------------------------------------------------- 컴포넌트와 구성요소 컴포넌트는 리액트의 꽃이라 불릴 정도로 리액트에서 가장 중요한 요소다. 리액트로 작성된 화면은 컴포넌트만으로 구성되어 있다. 기존의 웹 프레임워크는 MVC방식으로 정보 화면 구동코드를 분리하여 관리했다. 하지만 컴포넌트는 MVC의 뷰를 독립적으로 구성..

배열 함수 ES6의 forEach() 함수 기존의 javascript var chunk=['banana=10','apple=20','orange=30']; var result = {}; for (var i=0; i { const parts= chunk.split('='); const key=parts[0]; const value=Number.isNaN(Number(parts[1])) ? parts[1] : Number(parts[1]); result[key]=value; }); 간결하게 변환(구조뷴해 할당 방식) const chunks=['banana=10','apple=20','orange=30']; let result = {}; chunks.forEach((chunk) => { const[key,va..

REACT에 필요한 자바스크립트 ES6의 주요 문법에 대한 포스팅입니다. 템플릿 문자열 1. 기존 자바스크립트의 문자열 사용 방법 var string1= '치킨'; var string2= '먹고싶다'; var string3= string1+' '+string2; ->ㄱ var product= {name:'뿌링클', price: '20000원'}; var message='치킨'+product.name+'의 가격은'+product.price+'입니다'; ->ㄴ var multiline='치킨\n뇸!'; ->ㄷ var value1=1; var value2=2; var boolvalue=false; var operator1='곱하면 '+(value1*value2)+'입니다.'; ->ㄹ var operator2=..

웹 해킹은 잠시 접어두고 REACT 공부에 흥미를 느껴 공부를 시작합니다! 1. 노드버전 매니저로 node.js 설치하기 https://github.com/coreybutler/nvm-windows/releases coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com nvm-steup.zip 파일을 다운 후 실헹 2.nvm을 통해 nodejs 설치 nvm install 10.10.0 3. NVM이 설치한 nodejs 사용 설정 nvm use 10.10.0 (+ node -v 와 npm -v를 통한 버전 확인) ---..