리액트 전개 연산자 사용하기

기존 ES5 문법과 비교해 전개 연산자를 통해 배열과 객체 데이터를 합치거나 추출하는 방법을 이해해보겠습니다.

 

전개연산자 ?

배열이나 객체 변수를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법입니다 . 
변수 앞에 ... (마침표 3개)를 입력해서 사용합니다.

 

예제 작성을 통해 전개연산자에 대해 알아보겠습니다. 

 

먼저 App.js 파일을 생성해줍니다. 

 

App.js

import './App.css';
import { React } from 'react';
import SpreadOperator from './SpreadOperator';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <SpreadOperator/>
    </div>
  );
}

export default App;

 

SpreadOperator.js

import React, {Component} from "react";

class SpreadOperator extends Component{

    constructor(props){
        super(props);
        this.state = {};
    }

    componentDidMount(){
        //javascripts Array
        var varArray1 = ['n1','n2'];
        var varArray2 = ['n3','n4'];
        var sumArray = [varArray1[0],varArray1[1],varArray2[0],varArray2[1]];
        //var sumArray1 = [].concat(varArray1,varArray2);
        console.log('1. sumVarArr:' +sumArray);
       

        //ES6 Array
        let sumLetArr = [...varArray1, ...varArray2];
        console.log('2. sumLetArr: '+sumLetArr);
        const [sum1, sum2, ...remain] = sumLetArr;
        console.log('3. sum1 :' +sum1+ ', sum2 :',+sum2+', remain: '+remain );

        var varObj1 = { key1: 'val1', key2: 'val2'};
        var varObj2 = { key2: 'new1', key3: 'val3'};
        //javascripts Object
        var sumVarObj = Object.assign({}, varObj1, varObj2);
        console.log('4. sumVarObj :' +JSON.stringify(sumVarObj));
        //ES6 Object
        var sumLetObj = {...varObj1, ...varObj2};
        console.log('5. sumLetObj :' +JSON.stringify(sumLetObj));
        var {key1, key3, ...others} = sumLetObj;
        console.log('6. key1: '+key1+', key3 :' +key3+', others :'+JSON.stringify(others));
    }

    render(){
        return (
            <h2>This is SpreadOperator</h2>
        )
    }
         
}
export default SpreadOperator;

 

콘솔창을 열어 확인해보면 

 

코드 설명 

 

기존 ES5에서는 배열 2개를 합치기 위해서는 배열 각각의 인텍스로 접근해 값을 가져오거나 , concat 함수를 이용합니다. 

varArray1, varArray2 배열에 각각 인덱스 (0,1)로 접근해 인자 값 (n1 , n2 ,n3, n4) 를 가져와 새로운 배열 sumVarArr에 하나씩 넣습니다. 

 

ES6에서는 전개 연산자 ... 을 배열명 앞에 붙여 여러개의 배열을 합칠 수 있습니다. 

 

sumLetArr 배열의 값을 추출해 개별 변수에 넣습니다. 순서대로 변수 sum1에 sumLetArr[0] 값, sum2에 sumLetArr[1] 값을 대입합니다. 나머지 배열 값은 마지막에 전개 연산자 처리된 ... remain변수에 넣습니다. 

 

기존 ES5에서 객체 2개를 합치기 위해서는 Object.assign() 함수를 이용해야 합니다. 첫 번째 인자 {} 는 함수의 return 값이고 뒤의 인자에 객체들을 ,(콤마)로 연결해 나열하면 여러개의 객체를 합칠 수 있습니다. 

 

ES6에서는 ...을 객체명 앞에 붙여 여러개의 객체를 합칠 수 있습니다. 

 

sumLetObj 객체의 키와 값을 추출해 키와 동일한 명칭의 개별 변수에 넣습니다. 나머지는 마지막에 전개 연산자 처리된 ... other 변수에 넣습니다. 

---

따라서 전개 연산자를 사용하면 위의 예제처럼 각각의 인덱스에 접근하는 방법을 사용하지 않고도 원소의 값을 모두 더할 때 쉽게 사용할 수 있습니다! 

const arr = [ 1, 2, 3 ] ;
console.log(sum(...arr)); //6

 

마지막으로 간단하게 요약을 해보면 전개 연산자는 배열을 풀어서 사용할 수도 있게 해주고,index 를 선언한 배열 이외의 값들 즉, 나머지 배열의 값들을 칭할 수 있게 해줍니다.

 

오늘도 즐공 !!

​