REACT 3일차 (react ES6 문법-2)

배열 함수

 

ES6의 forEach() 함수

 

기존의 javascript

var chunk=['banana=10','apple=20','orange=30'];

var result = {};

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

  var parts= chunk[i].split('=');

  var key=parts[0];

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

  result[key]=value;

}

 

ES6의 forEach() 함수 사용 시

 

const chunks=['banana=10','apple=20','orange=30'];

let 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;

});

 

간결하게 변환(구조뷴해 할당 방식)

 

const chunks=['banana=10','apple=20','orange=30'];

let result = {};

chunks.forEach((chunk) => {

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

  result[key]=value;

});

 

--------------------------------------------------------------

 

ES6의 map() 함수 ( let이 아니라 const로 결과값 도출)

 

const chunks=['banana=10','apple=20','orange=30'];

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

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

  return {key:key,value:value};

});

 

위와 같이 result가 나온다

 

---------------------------------------------------------

reduce 함수 - 배열이 아닌 객체로 변환하기

 

function sum(numbers) {

  return numbers.reduce((total,num) => total+num,0);

} // 인자 1에는 변환 함수 인자 2에는 초깃값을 전달함

sum([1,2,3,4,5,6,7,8,9,10]); // 55

 

-> 값을 순환 할당하면서 함수를 실행한다

(실무에서는 보통 배열을 특정 자료형으로 변환하는데 사용)

 

따라서 map()과 reduce()를 섞어 key를 키값으로 value를 값으로하는 객체를 반환할 수 있다.

코드는 아래와 같다.

 

const chunks=['banana=10','apple=20','orange=30'];

return chunks

  .map((chunk) => {

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

    return {key,value};

  });

  .reduce((result,item) => {

    result[item.key]=item.value;

    return result;

  },{}); //{}로 result에 초기값을 부여하여 값이 들어가도록 함

 

-----------------------------------------------------------------

 

비동기 함수

(비동기 처리: 작업 시간이 많이 필요한 작업A를 처리하느라 다른 작업들이 대기하고 있는 상태에 다른 작업들을 먼저 진행하고 작업 A를 이휴에 처리하는 방식)

 

 

기존의 자바스크립트 방식

function work1(onDone){

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

} //setTimeout 함수는 두번째 인자의 시간만큼 기다린후 task 실행

function work2(onDone){

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

}

function urgentwork(){

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

}

 

work(function(msg1){

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

  work(function(msg1){

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

  });

});

urgentwork();

work1,2는 setTimeout을 포함하여 비동기로 처리되어 urgentwork가 먼저 실행된다.

위를 보면 call back 함수가 2계단 인데 지연작업이 많아질수록 콜백 지옥이 생긴다.

 

 

 

ES6의 경우 promise class 함수를 사용하여 이러한 콜백 지옥을 없앤다.

promise의 클래스 함수는 검색해 보세요...!

 

promise객체를 생성할 때는 다음과 같이 클래스의 resolve함수 또는

reject함수에 해당하는 콜백함수를 직접 전달해야한다.

 

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 300ms: '+msg3);

  });

urgentWork();

 

위와 같이 코드를 짜면 work1구문을 실행하고 promise객체를 반환하고

work2.then 함수가 work3구문을 실행하며 promise객체를 반환하는 등

이어지는 지연 작업들을 콜백지옥 없이 구현할 수 있다.

 

-----------------------------------------------------------------

 

디바운스

 

디바운스는 어떤 내용을 입력하다가 특정 시간동안 대기하고 있으면 

마지막에 입력된 내용을 바탕으로 소보 요청을 하는 방법

(연관 검색어 창)

 

export function debounce(func,delay){

  let inDebounce;

  return function(..args){

    if(inDebounce){ //inDebounce 변수에는 setTimeout()함수의 반환값이 저장

      clearTimeout(inDebounce);  //값이 있을 시 setTimeout 함수의 작업 취소

    }

    inDebounce=setTimeout(

      ()=>func(...args),

      dealy);

  }

}

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

run('a');

run(2); //100ms 이후 2 출력