[ReactJS] DoIt 리액트 프로그래밍 정석 (1, 2장)

유투브에서 리액트 그리고 리덕스 관련 자료를 찾다가 저자분께서 강연하신 내용을 보고 구입하게 된 도서입니다.

내용이 유익하여 공부하면서 한번 정리해보겠습니다~

1장은 리액트 개발환경 구축이라 생략하고 2장부터 시작하겠습니다.

 

ES6 문법 액기스

  ✔ 템플릿 문자열 - 백틱(`)으로 문자열 표현하며 $를 사용하여 변수 또는 식 포함

  ✔ 전개 연산자 - 나열형 자료를 추출하거나 연결할 때 사용

                        배열, 객체, 변수명 앞에 마침표 3개로 표현 (괄호 안에서만 사용 가능)

var arr1 = ['1','2'];
var arr2 = ['3','4'];

const combined = [...arr1, ...arr2]; // ['1','2','3','4']
const [first, second, three='empty', ...others] = arr1
// first: '1', second: '2', thrid: '3', others: []

  ✔ 가변변수(let), 불변변수(const) - 가변변수는 수정가능하며, 불변변수는 수정은 가능하나 재할당이 불가능합니다.

     하지만, 불변변수의 수정은 에러를 발생하지는 않으나 '무결정 제약을 위반'으로 암묵적으로 금지합니다.

     그래서 불변변수는 수정이 필요한 경우 새로 만들어 새값을 할당하는 방법으로 정의합니다.

const arr = [];
arr.push(1);
// arr = [1] : 무결정 제약 위반

const brr = [];
const crr = brr.concat(1);
// crr = [1]

  ✔ 클래스 - class 키워드를 활용하면 간단하게 선언 가능합니다.

class Shape { // 클래스 선언
	static create(x, y) { return new Shape(x, y); }
    construnctor(x, y) { this.x = x; this.y = y; }
    area() { return 0; }
}

var s = new Shape(0,0);
s.area(); // 0

class Circle extends Shape { // 상속
	constructor(x, y, radius) {
    	super(x, y);
        this.radius = radius;
    }    
    area() {
    	if(this.radius === 0) return super.area();
        return this.radius * this.radius;
    }
}

var c = new Circle(0, 0, 100);
c.area(); // 10000

  ✔ 화살표 함수 - 기존 함수표현식을 좀 더 간결하게 표현가능합니다.

function add(x) {
	return function(y) {
    	return x + y;
    };
}

var add = x => y => x+y;

  ✔ 객체 확장 표현식과 구조 분해 할당 - 함수 인자 값이나 JSON 데이터를 변활할때 유용하게 사용합니다.

var [x, ...others] = [1,2,3,4]; // others : [2,3,4]
var {key1, ..others} = {key1:1, key2:2, key3:3}; // others : {key2:2, key3:3}

  ✔ 라이브러리 의존성 관리 - import구문을 사용하여 연결된 의존파일을 먼저 내려받고 코드 구동

  ✔ 비동기 함수 - Promise를 활용하여 비동기 처리