리액트 ES6 문법 - 배열 함수

아래 책을 읽고 정리한 내용입니다.

https://m.yes24.com/Goods/Detail/87631428

Do it! 리액트 프로그래밍 정석 - 예스24

배열 함수

ES6의 forEach()함수 사용 방법 알아보기

⇒ 문자열(쿼리 스트링 = 웹 주소에 포함시키는 문자열)을 분리 후 비교!

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

function parse(qs) {
  var queryString = qs.substr(1); 
	// querystring = 'banana=10&apple=20&orange=30'
  var chunks = qs.split('&'); 
  var result = {};
  for(var i = 0; i < chunks.length; i++) {
    var parts = chunks[i].split('=');
    var key = parts[0];
		// key = 'banana'
    var value = parts[1];
		// value = '10'
    result[key] = value;
		// result = { banana: '10' }
  }
  return result;
}

• 10, 20, 30을 문자열이 아닌 숫자로 변환하려면 다음과 같이 하면 됨

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

forEach() 함수 사용

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) => {
    const parts = chunks[i].split('=');
    const key = parts[0];
    const value = Number.isNaN(Number(parts[1])) ? parts[1] : Number(parts[1]);
    result[key] = value;
  });
  return result;
}

• forEach()를 사용하면 반복문의 순번과 배열의 크기를 따로 변수에 저장하는 과정 생략 가능!

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) => {
    const [ key, value ] = chunk.split('='); 
		// key = 'banana', value = '10'
    result[key] = value; 
		// result = { banana: 10 }
  });
  return result;
}

• 키와 키값을 구조 분해 할당 방식으로 변환하면 코드를 조금 더 간결하게 할 수 있음!

ES6의 map()함수 사용 방법 알아보기

⇒ 앞에서는 가변 변수(let)만 사용함! 불변 변수(const)만을 사용하려면 map()함수를 사용하면 됨

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

function parse(qs) {
  const queryString = qs.substr(1);
  const chunks = queryString.split('&');
  const result = chunks.map((chunk) => {
    const [ key, value ] = chunk.split('='); // key = 'banana', value = '10'
    return { key: key, value: value }; // { key: 'banana', value: '10' }
  });
  return result;
  // result = [
  //  { key: 'banana', value: '10'},
  //  { key: 'apple', value: '20' },
  //  { key: 'orange', value: '30'}
  // ];
}

• map()함수는 결괏값을 바로 반환하므로 가변 변수를 사용하지 않아도 됨!

reduce() 함수 사용 방법 알아보기

⇒ 앞서 얻은 결괏값은 객체가 아닌 배열이다! 배열을 객체로 변환할 때 reduce() 사용

function sum(numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
sum([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) // 55

• 첫 번째 인자에는 변환 함수 (total, num) => total + num / 두 번째 인자에는 초깃값 0 전달!
  • total : 누적된 결과값을 나타냄! 초기값으로 0을 설정했기 때문에 total은 초기에 0으로 시작
  • num : 배열의 각 요소를 나타냄! reduce 함수는 배열을 순회하면서 각 요소에 대해 콜백 함수를 실행함
  • 콜백 함수의 반환값은 다음 순회 때 사용될 누적값이 됨
• 첫 번째 인자 : 이전 결괏값, 두 번째 인자 : 배열의 각 요솟값으로 생각, 순환 할당 하면서 실행

순환 01회차 total: 0 // num: 1
순환 02회차 total: 0 + 1 // num: 2
순환 03회차 total: 0 + 1 + 2 // num: 3
...
순환 10회차 total: 0 + 1 + 2 + ... + 9 // num: 10
최종 반환값 total: 0 + 1 + 2 + ... + 10 // num: 55

• 위 과정을 통해 배열이 숫자로 변환됨
• 실무에서는 reduce()함수를 배열의 특정 자료형으로 변환하는 데 사용함!
• 즉 배열을 숫자로 변환한 예제로 이해해라~

예제 : reduce()함수 응용

function parse(qs) {
  const queryString = qs.substr(1);
  const chunks = queryString.split('&');
  return chunks
    .map((chunk) => {
      const [ key, value ] = chunk.split('='); // key = 'banana', value = '10'
      return { key, value }; // { key: 'banana', value: '10' }
    })
    .reduce((result, item) => ({
      ...result,
      [item.key]: item.value,
    }), {});
}

• map()함수가 반환한 배열에는 객체가 있을 것이고… 아래의 연산 과정이 진행됨!

순환 01회차 result: {} item: { key: 'banana', value: '10' }
순환 02회차 result: { banana: '10' } item: { key: 'apple', value: '20' }
순환 03회차 result: { banana: '10', apple: '20' } item: { key: 'orange', value: '30' }
최종 반환값 result: { banana: '10', apple: '20', orange: '30' }