ES6

kang·2020년 4월 6일
0

Es6

목록 보기
1/1

let, const

기존에 사용하던 var를 사용하지 않고,
let, const를 사용하여 프로젝트를 진행으며,
let은 거의 사용하지 않았는데, 이유는 state의 관리를 useState로 하였기에 생각보다 let의 사용하는 빈도수가 적었다.

let은 var와 흡사하며 전역변수로도 사용할 수 있지만 중복 선언이 안되고,
초기화 단계가 분리되어 진행하기 때문에 호이스팅이 발생하기 때문에 참조 에러가 발생할 수 있다.

let age = 34;
{
	let age = 87;
}
console.log(age); //34

let name = 'kang'
{
	console.log(name);
	let name = 'sb';
}

const는 주로 고정 값인 상수를 위해 사용한다.
주의 할 점은 재할당이 안되며, 선언과 동시에 할당이 이루어져야 한다는 것.
const는 재할당이 안되지만 객체를 할당할 경우 객체의 프로퍼티 추가, 삭제, 변경을 할 수 있어서
데이터를 받아와서 useState나 const에 할당하여 사용했었다.

주로 상수를 할당하여 사용하기 때문에
constants.js에 프로젝트에 필요한 상수들을 선언해놓고, 각 컨포넌트에서 import하는 방식으로 진행합니다.

Destructuring

디스트럭처링은 배열, 오브젝트에 작성된 값을 한번에 변수에 할당 할 수 있으며,
우측의 배열, 오브젝트의 엘리먼트를 분할하여 왼쪽 변수에 값을 할당합니다.

const userInfo = {name:'kang', phone:'010', age:'34'};
const {name, phone} = userInfo;

위 코드의 형식처럼 사용할 수 있다.
데이터 및 props에서 받아온 데이터에서 필요한 값만 추출해서 사용할 수 있다.

화살표함수

cosnt 함수명 = () => {
	console.log('화살표함수')
}

화살표 함수는 화살표를 사용하여 함수를 선언할 수 있다.
화살표 함수의 기본 문법과 축약형도 많지만 보통 위 코트처럼 사용했고 기존 함수와 동일하게 콜백 함수로 사용할 수 있고 기존 함수보다 간결하다.
화살표 함수는 Lexical this이여서 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

Spread 연산자(전개연산자)

props로 컴포넌트에 전달하거나, 기존 배열 요소를 새로분 배열 요소로 만들었을 때,
사용자로부터 정보를 입력받아 json형태로 만들때 유용하게 사용할 수 있습니다.
추가로, 호출받는 함수의 파라미터에 spread 연산자로 파라미터를 작성한 형태를 rest 파라미터라고 합니다.

const arr = [1,2,3,4,5,6,7,8];
const arr2 = [...arr]; //새로운 배열
arr.push(100);
console.log(arr); //1,2,3,4,5,6,7,8,100
console.log(arr2);//1,2,3,4,5,6,7,8
function(param, paramN, ...rest); //rest 파라미터

redux saga를 사용한 프로젝트에서 전개연산자를 사용하여 기존 정보를 전개하고,
추가로 정보를 Store에 담거나 서버로 보내는 용도로 필수! 사용했다.

dispatch(USER_INFO_ACTION(INDEX){
...userInfo,
name: '이름',   
phone: '연락처',
address: '주소'
)}

Spread 연사자의 기능을 잘 활용한다면 코드가 깔끔해 보이겠죠?

Promise

promise는 비동기 처리에 사용되며, 대기, 이행, 거부중 하나의 상태를 가지게 된다.
대기 중인 프로미스는 값과 함께 이행, 거부될 수 있으며, 프로미스에 연결한 처리기는 then 메소드에 의해 대기열에 오른다.

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("성공!");
    }, 1000);
    console.log("1. Promise");
  });
  promise.then((data) => console.log("2." + data));
  console.log("3. end");

위 코드를 보면 첫번째 Promise는 기본으로 사용하는 방식이며,
결과 값은 1,3,2 순으로 console에 출력된다.
setTimeout이 아니더라도 결과 값은 동일하며, Promise는 바로 resove()를 호출하지 않고 호출할 수 있는 환경이 되었을 때 호출한다.
promise.then()이 있지만 호출하지 않고 아래 코드로 이동하게 되며 then()을 실행하지 않고 아래 코드로 이동하는것이 비동기 처리의 핵심이다.

const [imgSrc, setImgSrc] = useState(null);
function getQrCode(content) {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas');

    QrCode({
      canvas,
      content,
      height: 192,
      width: 192      
    })
      .then(() => {
        return resolve(canvas.toDataURL());
      })
      .catch((error) => {
        console.log(error);
      });
  });
}
getQrCode(content).then((data) => setImgSrc(data));

위의 코드는 이전 프로젝트에서 사용했던 방식이다.

Generator

제너레이터 함수는 코드 블록을 일시 중지했다가 필요한 시점에서 재시작할 수 있는 특수한 함수이며, 일반함수를 호출하면 return으로 반환하지만 제너레이터 함수를 호출하면 제너레이터를 반환한다(value, done).
yield 키워드는 제너레이터 함수를 멈추게 하거나 다시 실행하는데 사용되며,
next() 메소드를 소유하고 있어서 next()를 사용하여 호출할 수 있다.
next() 메소드는 yield 단위로 실행한다.

function* k1(one, two){
	console.log('실행');
	yield one + two;
}
const generator = k1(1,2);
console.log(k1(1,2)); // k1 {<suspended>}
console.log(k1(1,2).next()); // 실행 {value: 3, done : false}
console.log(generator.next()); // 실행 {value: 3, done : false}

이터러블

순회 가능한 자료구조를 의미하며 이터레이터를 리턴하는 symbol.iterator를 가진 값
Array, String, Map, Set, DOM data structures

이터레이터

순회 가능한 객체를 의미하며 {value, done} 객체를 반환한다.
이터러블 프로토콜을 지킨 이터러블은 Symbol.iterator 메소드를 가지고 있다.
이터러블이 Symbol.iterator 메소드를 호출하면 이터레이터를 반환할 수 있다.
이터레이터는 이터러블의 각 요소를 순회하기 위해 next() 메소드를 갖는다.
next() 메소드는 각 단계의 값인 value와 단계가 끝났는지 알려주는 done을 반환한다.

Symbol

profile
ksb

0개의 댓글