Web/Script

리액트 불변성

불변성에 대해 알아보자.그 이유는, 우리가 불변성을 지켜줬기 때문입니다.만약에 우리가 배열을 직접 건들여서 수정해줬다고 가정해봅시다.. 그럴때는 이렇게 !== 하나로 비교를 끝낼수가 없습니다.const array = [1,2,3,4]; const sameArray = array; sameArray.push(5); console.log(array !== sameArray); // false 우리가 sameArray = array 를 했다고 해서 기존에 있던 배열이 복사되는것이 아니라 똑같은 배열을 가르키고 있는 레퍼런스가 하나 만들어진 것이기 때문에, 우리가 sameArray 에 push 를 하게 된다고 해서 array 와 sameArray 가 달라지지 않습니다.하지만, 우리가 불변성을 유지하면const ..

자바스크립트 람다식

자바스크립트의 람다식? 람다식이라, 어디에서 들어봤는가? 아마 자바 공부를 하던 사람이라면 어쩌다 한번은 들어봤을 것이다. 자바에서의 람다식은 주로 쓰레드(한번에 여러 작업을 처리)작업을 할 때 필요한 Runnable 객체(실행코드, JS에서는 익명함수)를 편리하게 생성하기 위해 쓰인다. 그런데 이런 기능이 JS에도 있다는 것, 들어봤는가? 목적이 거의 비슷하고, 문법도 비슷하다. 하지만 자바스크립트에서의 이런 기능은 자바의 "람다식" 과는 명칭이 별개로 붙어 있다. (그리고 무엇보다 매일매일 function(){}을 적느라 고생할 필요가 없다는 것이다!) 바로 '화살표 함수'다. 풀네임으로는 화살표 함수 표현, arrow function expression 정도 되겠다. 주로 쓰이는 방식은 위와 같다...

react input data 컨트롤

// file: src/App.jsimport React, { Component } from 'react';import PhoneForm from './components/PhoneForm'; class App extends Component { handleCreate = (data) => { console.log(data); } render() { return ( ); }} export default App;- 콘솔에 부모로부터 받은 props- 자식컴포넌트 // file: src/components/PhoneForm.jsimport React, { Component } from 'react'; class PhoneForm extends Component { state = { name: '', phon..

Computed property

// Computed property names (ES2015) var i = 0; var a = { ['foo' + ++i]: i, ['foo' + ++i]: i, ['foo' + ++i]: i }; console.log(a.foo1); // 1 console.log(a.foo2); // 2 console.log(a.foo3); // 3 var param = 'size'; var config = { [param]: 12, ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4 };