[React] 리액트와 ES6문법 정리

리액트

프런트엔드 프레임워크 중 하나로 화면 출력에 특화된 프레임워크

• 컴포넌트로 화면 구성을 효율적으로 할 수 있음

작고 독립적인 코드블록인 컴포넌트를 조합하여 원하는 화면 구성

• 게임 엔진 원리를 도입하여 화면 출력 속도가 빠름

다음 장면에 필요한 화면을 미리 그려두어 변경된 화면의 일부만 수정

 

리액트 개발환경 설치

1. 노드 버전 매니저로 노드제이에스 설치
2. yarn과 create-react-app 설치
3. 비주얼 스튜디오 코드와 플러그인 설치

 

리액트 ES6 문법

템플릿 문자열(template string) : 문자열 안에 변수와 연산식을 혼합하여 사용

- 백틱으로 문자열 표현
- $를 사용하여 변수 또는 식 포함

- Enter를 사용하여 줄을 바꾸는 것도 허용

var string 1 = '안녕하세요';
var string 2 = '반갑습니다';
var greeting = `${string1}
${string2}`;

 

전개 연산자(spread operator) : 나열형 자료를 추출하거나 연결할 때 사용

- 배열이나 객체, 변수명 앞에 마침표 세개(...)를 입력하여 사용
  but, 배열, 객체, 함수 인자 표현식([], {}, ()) 안에서만

// 배열 전개 연산자
var array1 = ['one', 'two']
var array2 = ['three', 'four']
const combined = [...array1, ...array2]
// 결과 : combined = ['one', 'two', 'three', 'four']

//객체 전개 연산자
var objectOne = { one: 1, two:2, other:0 };
var objectTwo = {three: 3, four: 4, other: -1};
var combined = { ...objectOne, ...objectTwo, };
//결과 : combined = { one: 1, two:2, three: 3, four: 4, other: -1 }
//두 객체를 병합할 때 중복된 키 값들은 마지막에 사용한 객체의 값으로 덮어씀

 

가변 변수와 불변 변수

- 가변변수는 let으로 선언

- 불변변수는 const로 선언

  값을 다시 할당할 수는 없지만 내장함수(push, splice)를 이용하여 값을 변경할 수는 있음

 

불변변수를 사용하면 무결성 제약 규칙에 의해 변수가 변하는 시점을 쉽게 파악하고,

수정 전과 후의 변수값을 비교할 수 있어 가변 변수보다 유용

 

 

클래스

(Java와 유사)

class Shape{
	static create(x, y) {return new Shape(x, y);}
    name = 'Shape';
    constructor (x, y){
    	this.move(x, y);
    }
    move(x, y){
    	this.x = x;
        this.y = y;
    }
    area() {
    	return 0;
    }
}
var s = new Shape(0, 0);
s.area();

->  Shape클래스 만들어 객체가 생성될 때 함께 만들어질 변수나 클래스 변수를 클래스 선언 블록 안에 같이 정의

 

화살표 함수(arrow function)

- 화살표 기호(=>)를 사용하여 함수를 선언

- 콜백함수의 this범위로 생기는 오류 방지를 위해 bind()함수를 사용하여 this객체를 전달하는 과정을 포함

var addNumber(num) {
	return function(value){
    	return num + value;
    };
}
var addNumber = num => value => num + value

 

객체 확장 표현식과 구조 분해 할당

객체 확장 표현식

var x = 0;
var y = 0;
var obj = {x, y};
//객체의 변수 선언할 때 키값 생략시 자동으로 키의 이름을 키값으로 지정

var randomKeyString = 'other';
var combined = {
	['one' + randomKeyString] : 'some value', };
//객체 생성 블록 안에 []를 사용하여 표현식을 작성하면 계산된 키값 생성 가능

var obj2 = {
	x,
    methodA() {console.log('method A'); },
    methodB() {return 0;},
};
//function 키워드 생략하고 함수 선언 가능

 

구조 분해 할당

var list = [0, 1];
var[
	item1,  //추출하고자 하는 인덱스 위치에 변수 배치
    item2,
    item3 = -1, //기본값 할당
] = list;

[item2, item1] = [item1, item2]  //교차배치하여 두 값 치환

var obj = {
	key1 : 'one',
    key2 : 'two',
};
var {
	key1 : newKey1,  //추출된 키값을 다른 변수명으로 할당
    key2,  //객체의 키값을 변수에 할당
    key3 = 'default key3 value'  //기본값 할당 
} = obj;

 

라이브러리 의존성 관리

의존성 = 어떤 파일이나 코드가 다른 파일이나 코드를 필요로 하는 것

 

배열 함수

1. forEach() 함수

문자열(Query String) 분리에 사용

반복문의 순번과 배열의 크기를 따로 변수에 저장하는 과정 생략 가능

가변변수 사용

function parse(qs) {
	const queryString = qs.substr(1);  //querystring = 'banana=10&apple=20&orange=30'
    const chunks = queryString.split('&');  //chunks = ['banana=10', 'apple=20', orange='30']
    let result = {};
    chunks.forEach((chunk) => {     //기존 js - for(var i = 0; i < chunks.legth; i++) 반복문 사용
    	const [key, value] = chunk.split('=');
        result[key] = value;
    });
    return result;
}

2. map()함수

각 배열 요소를 정의된 함수를 통해 변환한 결괏값들로 새 배열을 반환

불변변수만을 사용

 

비동기 함수

 

디바운스와 스크롤