[React] React에서의 전개 연산자

React를 공부하면서 가장 신기했던 것 중 하나가 바로 전개 연산자이다.
전개 연산자는 배열이나 객체 변수를 조금 더 직관적이고, 편리하게 합치거나 추출할 수 있게 도와주는 문법이다. 변수 앞에 ...를 입력하여 사용한다. (마침표 3개 입력)
이 전개 연산자는 배열에 대해서 접근할 때 훨씬 편리하게 해 주는데 어떤 차이가 있는지 직접 확인해보도록 하자!

1. 배열 두개 합치기

기존 ES5에서 배열 두 개 합치기.

기존 ES5(javascript)에서는 배열 두개를 합치기 위해서는 배열 각각을 인덱스로 접근하여 값을 가져오거나, concat 함수를 이용해야 한다.
새로운 배열 sumVarArr에 번거롭게 넣는 과정을 보자

class R011_SpreadOperator extends Component {
    constructor(props){
        super(props)
        this.state={};
    }
    componentDidMount(){
        var varArray1 = ['num1', 'num2'];
        var varArray2 = ['num3', 'num4'];
        var sumVarArr = [varArray1[0], varArray1[1], varArray2[0], varArray2[1]];
        //var sumVarArr = [].concat(varArray1, varArray2);
        console.log('1. sumVarArr : ' + sumVarArr);
      ...

그러나 전개 연산자가 추가된 지금, ... 전개 연산자를 사용하여 배열 명 앞에 붙여, 여러 개의 배열을 쉽게 합칠 수 있다!

lass R011_SpreadOperator extends Component {
    constructor(props){
        super(props)
        this.state={};
    }
    componentDidMount(){
        //Es6 Arrary 
        let sumLetArr = [...varArray1, ...varArray2];
        console.log('2. sumLetArr : ' + sumLetArr);

그리고 다음 코드를 보자.

class R011_SpreadOperator extends Component {
    constructor(props){
        super(props)
        this.state={};
    }
    componentDidMount(){
        //Es6 Arrary 
        let sumLetArr = [...varArray1, ...varArray2];
        console.log('2. sumLetArr : ' + sumLetArr);
        const[sum1, sum2, ...remain] = sumLetArr;
        console.log('3. sum1 : ' +sum1 +', sum2 : ' + sum2+', remain : '+remain);

sumLetArr의 값을 추출하여 개별 변수 sum1, sum2..에 넣는다. sum1에는 sumLetArr[0]의 값이 들어가고, sum2에는 sumLetArr[1]의 값을 대입하게 된다. 나머지 배열의 값은 전개 연산자 처리된 ...remain에 들어가게 된다! 손쉽게 관리할 수 있다는 점이 정말 좋다.

콘솔에 출력된 값을 보자.

객체 두개 합치기!

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

import React, {Component} from 'react';

class R011_SpreadOperator extends Component {
    constructor(props){
        super(props)
        this.state={};
    }
    componentDidMount(){
        var varObj1 = {key1 : 'val1', key2 : 'val2'};
        var varObj2 = {key2 : 'new2', key3 : 'val3'};

        //javascript Object
        var sumVarObj = Object.assign({},varObj1,varObj2);
        console.log('4. sumVarObj :' + JSON.stringify(sumVarObj));
      ...

그러나 ES6에서는 마침표 세개를 통하여, 여러개의 객체를 합칠 수 있다! 여기서 JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다.

class R011_SpreadOperator extends Component {
    constructor(props){
        super(props)
        this.state={};
    }
    componentDidMount(){
        //Es6 Object
        var sumLetObj = {...varObj1, ...varObj2};
        console.log('5. sumLetObj : '+ JSON.stringify(sumVarObj));
        var {key1, key3, ...others} = sumLetObj;
        console.log('6. key1 : ' +key1 + ',key3 : '+key3+', others :'+JSON.stringify(others));

이친구도 마찬가지로 sumLetObj 의 객체와 키값을 꺼내서, 개별 변수에 집어넣을 수 있다!