ReactJS) ECMA6 문법

Clém·2021년 2월 8일
React
0
post-thumbnail

React ES6 문법

1. 템플릿 문자열 - 백틱 문자열 로 문자열을 표현하고 변수의 값을 ${변수} 으로 식을 포함할 수 있다. ⇒ 문자열 ${변수}

2. 전개연산자 - spread operator 는 나열형 자료를 추출하거나 연결 할 때 사용한다.

  • 배열이나 객체, 변수명 앞에 마침표 세개 (...)를 입력한다. 다만 표현식 안에서만 ([], {}, ()) 사용해야 한다.

ex)

var arr1 = ["one", "two"];

var arr2 = ["three", "four"];

var arr3 = [...arr1, ...arr2];

console.log(arr3);

const [first, second, three = "empty", ...others] = arr1;

console.log(arr1);

console.log(three);

console.log(others);

run >

*(4) ["one", "two", "three", "four"]*

*(2) ["one", "two"]*

empty

*[]*

3. 가변변수와 불면 변수 - 가변변수: let, 불변변수: const

  • let: 선언한 변수를 읽거나 수정할 수 있다.

  • const: 읽기만 가능한 변수, 값을 다시 할당할 수는 있지만 값을 변경할 수는 있다.

ex)

내장객체를 사용해서 값을 변경할 수 있다. (push, pop, ...)

const arr1 = [];

arr1.push(1, 2, 3);

console.log(arr1);

arr1.splice(0, 0, 0);

console.log(arr1);

arr1.pop();

console.log(arr1);

const obj1 = {};

obj1["name"] = "내이름";

console.log(obj1);

Object.assign(obj1, { name: "새이름" });

console.log(obj1);

run >

 *(3) [0, 1, 2]*

*(3) [0, 1, 2]*

*(3) [0, 1, 2]*

*{name: "새이름"}*

*{name: "새이름"}*

  • 배열에 새로운 값을 추가할 때는 push() 함수 대신 contat() 함수를,

    삭제할 때는 pop(), shift() 함수대신 slice(), concat()함수에 전개연산자를 조합하여 사용한 점.

    새 값을 할당하는 것이 아니라 기존 값을 이용하여 새 불변 변수에 할당하는 것이므로 가능하다.

    무결성 함수는 객체나 배열을 직접 수정하는 것이 아니라 새 결과를 반환하는

    (무결성 제약조건을 지키는) 함수를 말한다.

4. 클래스를 정의하여 사용할 수 있다.

5. 화살표 함수

  • var fn = function() {} ⇒

    const fn = () ⇒ {} or 바로 반환하는 경우, const fn = () 중괄호 생략

ex)

class MyClass {

value = 10;

constructor() {

var addThis2 = function(fir, sec) {

return this.value + fir + sec;

}.bind(this);

var addThis3 = (fir, sec) => this.value + fir + sec;

}

}

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

7. 라이브러리 의존성 관리

  • js 파일에 import 하여 사용할 수 있게 하였다.

8. 배열함수 - forEach(), map(), reduce()

  • ex)
const qs = "banana=10&apple=20&orange=30";

function parse(qs) {

var queryString = qs.substr(0); *// querystring = 'banana=10&apple=20&orange=30'*

var chunks = queryString.split("&"); *// chunks = ['banana=10', 'apple=20', 'orange=30']*

var result = {};

for (var i = 0; i < chunks.length; i++) {

var parts = chunks[i].split("=");

var key = parts[0];

var value = Number.isNaN(Number(parts[1])) ? parts[1] : Number(parts[1]);

result[key] = value;

}

return result;

}

console.log(parse(qs));

run >

{banana: 10, apple: 20, orange: 30}

⇒ forEach()를 쓰면 for문에서 i++를 생략할 수 있고 구조분해 할당방식으로 바꾸면 간결하게 할 수 있다.

ex)

const qs = "banana=10&apple=20&orange=30";

function parse(qs) {

var queryString = qs.substr(0); *// querystring = 'banana=10&apple=20&orange=30'*

var chunks = queryString.split("&"); *// chunks = ['banana=10', 'apple=20', 'orange=30']*

var result = {};

chunks.forEach((chunk) => {

const parts = chunk.split('=');

const key = parts[0];

const value = Number.isNaN(Number(parts[1]) ? parts[1] : Number(parts[1]));

result[key] = value;

});

return result;

}

console.log(parse(qs));

⇒ *불변함수만을 사용하려면 map()함수를 사용해야한다.

map()함수는 각 배열 요소를 정의된 함수를 통해 변환한 결과값들로 새배열을 반환한다.

ex)

function parse(qs) {

const queryString = qs.substr(1);

const chunks = queryString.split("&");

const result = chunks.map((chunk) => {

const [key, value] = chunk.split("=");

return { key: key, value: value };

});

return result;

}

console.log(parse(qs));

run >

*(3) [Object, Object, Object]*

0: Object

1. key: "anana"
2. value: "10"

1: Object

1. key: "apple"
2. value: "20"

2: Object

1. key: "orange"
2. value: "30"

⇒ reduce() : 배열을 객체로 변환할 때, 보통 배열을 특정 자료형으로 변환하는 데 사용한다.

ex)

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function sum(numbers) {

return numbers.reduce((total, number) => {

return total + number;

}, 0);

}

console.log(sum(numbers));

run >

55

ex2)

function parse(qs) {

const queryString = qs.substr(0);

const chunks = queryString.split("&");

return chunks.map((chunk) => {

const [key, value] = chunk.split("="); *// key = 'banana', value = '10'*

return { key: key, value: value }; *// { key: 'banana', value: '10' }*

})

.reduce((result, item) => {

result[item.key] = item.value;

return result;

}, {});

}

console.log(parse(qs));

run >

*{banana: "10", apple: "20", orange: "30"}*

1. banana: "10"
2. apple: "20"
3. orange: "30"

9. 비동기 함수 - 비동기 처리를 위해 사용한다 :: 작업시간이 많이 필요한 작업 A을 하느라 다른 작업들(B, C, D)이 대기하고 있는 상태라면 일단 다른 작업들을 먼저 진행하고 A, A와 연관된 작업을 이후에 처리하는 방식.

  • 기존방식 - 지연작업을 위해 setTImeout()함수를 사용했다.

ES5 ex)

function work1(onDone) {

setTimeout(() => onDone("작업1 완료!"), 100);

}

function work2(onDone) {

setTimeout(() => onDone("작업2 완료!"), 200);

}

function work3(onDone) {

setTimeout(() => onDone("작업3 완료!"), 300);

}

function urgentWork() {

console.log("긴급 작업");

}

// 실제 비동기 함수를 사용하는 예

work1(function (msg1) {

console.log("done after 100ms:" + msg1);

work2(function (msg2) {

console.log("done after 300ms:" + msg2);

work3(function (msg3) {

console.log("done after 600ms:" + msg3);

});

});

});

urgentWork();

  • ES6방식 - Promise 클래스 함수

  • Primise 객체를 생성할 때는 클래스의 resolve()함수, reject()함수에 해당하는 콜백 함수를 직접 전달해야한다.

ES6 ex)

const work1 = () =>

new Promise((resolve) => {

setTimeout(() => resolve("작업1 완료!"), 100);

});

const work2 = () =>

new Promise((resolve) => {

setTimeout(() => resolve("작업2 완료!"), 200);

});

const work3 = () =>

new Promise((resolve) => {

setTimeout(() => resolve("작업3 완료!"), 300);

});

function urgentWork() {

console.log("긴급 작업");

}

const nextWorkOnDone = (msg1) => {

console.log("done after 100ms:" + msg1);

return work2();

};

work1()

.then(nextWorkOnDone)

.then((msg2) => {

console.log("done after 200ms:" + msg2);

return work3();

})

.then((msg3) => {

console.log(`done after 600ms:` + msg3);

});

urgentWork();

run > 

긴급 작업

done after 100ms:작업1 완료!

done after 200ms:작업2 완료!

done after 600ms:작업3 완료!

10. 디바운스와 스로틀 - ES6 문법은 아니지만 지연처리를 효율적으로 구현 할 수 있다.

  • 서버의 데이터를 요청하는 등의 작업에서 생기는 부하를 크게 줄여준다.

  • 디바운스(debounce) : 어떤 내용을 입력하다가 특정 시간동안 대기하고 있으면 마지막에 입력된 내용을 바탕으로 서버 요청을 하는 방법. ex)연관검색어

참고- debounce(fn, wait)

ex) 

const run debounce((val) ⇒ console.log(val), 100);

:: 100ms 안에 run()함수를 호출하지 않으면 최종으로 호출된 run()함수에 대한 결과만 볼 수 있다.

  • 스로틀(throttle) - 디바운스 개념과 비슷하지만 입력되는 동안에도 바로 이전에 요청한 작업을 주기적으로 실행한다는 점이 다르다. ex) 페이스북, 인스타드램 타임라인, 피드 (무한스크롤)

    ex) 

function throttle(func, delay) {

let lastFunc;

let lastRan;

return function(...args) {

const context = this;

if (!lastRan) {

func.call(context, ...args);

lastRan = Date.now();

} else {

if (lastFunc) clearTimeout(lastFunc);

lastFunc = setTimeout(function() {

if ((Date.now() - lastRan) >= delay) {

func.call(context, ...args);

lastRan = Date.now();

}

}, delay - (Date.now() - lastRan));

}

}

}

var checkPosition = () => {

const offset = 500; [//offset](//offset) : 더해진 값을 의미한다.

const currentScrollPosition = window.pageYOffset;

const pageBottomPosition = document.body.offsetHeight - window.innerHeight - offset;

if (currentScrollPosition >= pageBottomPosition) {

*// fetch('/page/next');*

console.log('다음 페이지 로딩');

}

};

var infiniteScroll = throttle(checkPosition, 300);

window.addEventListener('scroll', infiniteScroll);

[참고] DO-IT-REACT

profile
Clém
On my way to become a Web Publisher
이전 포스트

ReactJS) React란?

다음 포스트

ReactJS) Component구성요소, 생명주기

0개의 댓글