The document discusses React, Redux, and ES6/7 features. It begins with an overview of React lifecycles and class components. It then provides a brief introduction to Redux, including core concepts like actions, reducers, and unidirectional data flow. The document also includes an example to demonstrate how React and Redux can work together, with Redux managing application state in the store and React components interacting via container components.
39. VAR VS LET/CONST
* var의문제점
http://chanlee.github.io/2013/12/10/javascript-variable-scope-and-hoisting
var
함수범위변수를선언및초기화
const
읽기전용상수를선언
let
블록범위지역변수를선언및초기화
40. VAR VS LET/CONST
var office = 'coupang';
var office = 'forward ventures'; // do not error occurred
console.log(office); // forward ventures
let color = 'blue';
let color = 'black'; // TypeError
let count = 0;
count = 1;
console.log(count); // 1
const apple = 'apple';
apple = 'samsung'; // error
const comic = { name: 'DragonBall', author: ‘Akira Toriyama' };
comic = { name: ‘One Piece', author: ‘Oda Eiichiro‘ }; // error
comic.name = ‘One Piece';
comic.author = ‘Oda Eiichiro';
console.log(comic); // name: One Piece, author: Oda Eiichiro
es6에서는 var 대신 let을 사용하고, 가급적이면 const를 사용하는 것을 추천
배열이나 객체의 변경도 막겠다면 immutablejs 등을 사용하는 것도 고려
41. ARROW FUNCTION
// function
[ 1, 3, 7 ].map(function(value) {
return value * 2;
});
// arrow function
[ 1, 3, 7 ].map(value => value * 2);
// object를 반환하는 arrow function
const toMap = name => {
return { name: name };
};
// object를 반환하는 arrow function 간략 표기
const toMap = name => ({ name: name });
// compare ‘this’ with arrow function and function
const object = {
f1: function() {
console.log('f1', this);
function f1_1() { console.log('f1_1', this) }
setTimeout(f1_1, 1000);
setTimeout(() => { console.log('f1_2', this) }, 1000);
},
f2: () => {
console.log('f2', this);
function f2_1() { console.log('f2_1', this) }
setTimeout(f2_1, 1000);
setTimeout(() => { console.log('f2_2', this) }, 1000);
}
};
object.f1(); // Object, Window, Window
object.f2(); // Window, Window, Window
arrowfunction에서의this는arrowfunction이정의된지점의this값과같다
42. DEFAULT PARAMETERS
// 파라미터 기본값이 없는 경우
function increase(number) {
if (typeof number === 'undefined') return '[ERROR] number is undefined’;
return number + 1;
}
console.log(increase()); // [ERROR] number is undefined
console.log(increase(undefined)); // [ERROR] number is undefined
console.log(increase(10)); // 11
// 파라미터 기본값을 할당한 경우
function increase(number = 0) {
return number + 1;
}
console.log(increase()); // 1
console.log(increase(undefined)); // 1
console.log(increase(10)); // 11
OBJECT LITERAL : SHORTHAND
// es5
var x = 1;
var y = 2;
var object = {
x: x, y: y
};
// es6
const x = 1;
const x = 2;
const object = { x, y };
49. 알아두면 좋을 ES6 문법
Promise
Set / Map
yield / generator
비동기관련하여자주쓰이므로흐름정도는알아두면좋음
new Set([1,2,3]).has(2), new Map({foo:’bar’}).has(‘foo’)
javascript에 대해 좀 더 파고 싶다면. ( #MDN / Ben Nadel's blog )