React 전개 연산자

전개 연산자는 배열이나 객체 변수를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법으로 변수 앞에... 를 입력해 사용한다.

먼저 배열을 확인하기 위해

import { Component } from "react";

class Component2 extends Component {

    render(){

        return(

        )
    }
}

export default Component2;

Component2.js 파일을 만들어주고

import './App.css';
import Component1 from './component/Component1';
import Component2 from './component/Component2';

function App() {
  return (
    <div>
      <h1>안녕하세요.</h1>
      <p>메인페이지입니다.</p>
      <Component1 value = '중간'/>
      <Component2/>
    </div>
  );
}

export default App;

App.js에 Component2를 import 해 결과를 확인해 보자.

1. concat

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

import { Component } from "react";

class Component2 extends Component {

    render(){
        let array1 = ['a','b'];
        let array2 = ['c','d'];
        let sumArray1 = [array1[0],array1[1],array2[0],array2[1]];
        let sumArray2 = [].concat(array1,array2);
        return(
            <div>
                <h2>sumArray1 배열 결과 : {sumArray1}</h2>
                <h2>sumArray2 배열 결과 : {sumArray2}</h2>
            </div>
        )
    }
}

export default Component2;

Component2에 다음과 같이 코드를 작성하면 결과는 다음과 같다.

array1, array2 배열에 각 인덱스로 접근해 인자 값을 가져와 새로운 배열 안에 넣어 합쳐진 것을 볼 수 있다.

2. 배열에 전개 연산자...

ES6에서는 전개 연산자...(마침표 3개)를 배열명 앞에 붙이면 여러 개의 배열을 합칠 수 있다.

import { Component } from "react";

class Component2 extends Component {

    render(){
        let array1 = ['a','b'];
        let array2 = ['c','d'];
        let sumArray1 = [array1[0],array1[1],array2[0],array2[1]];
        let sumArray2 = [].concat(array1,array2);
        let sumArray3 = [...array1, ...array2];
        const [sum1, sum2, ...remain] = sumArray3;
        return(
            <div>
                <h2>sumArray1 배열 결과 : {sumArray1}</h2>
                <h2>sumArray2 배열 결과 : {sumArray2}</h2>
                <h2>sumArray3 배열 결과 : {sumArray3}</h2>
                <h2>sumArray3 배열 값 sum1 : {sum1}</h2>
                <h2>sumArray3 배열 값 sum2 : {sum2}</h2>
                <h2>sumArray3 배열 값 remain : {remain}</h2>
            </div>
        )
    }
}

export default Component2;

다음과 같이 코드를 작성했을 때 결과는 다음과 같다.

array1, array2 앞에... 을 붙이면 배열이 전개되어 인덱스 순서대로 sumArray3에 값이 저장된다. 배열의 값을 추출해 개별 변수에 넣을 때도 전개연산자를 사용할 수 있는데 순서대로 변수 sum1에 sumArray3 [0] 값, sum2에 sumArray3 [1] 값을 대입하고 나머지 배열 값은 마지막에 전개 연산자 처리된... remain변수에 넣을 수 있다.

3. Object.assign()

ES5에서 객체 2개를 합치기 위해선 Object.assign() 함수를 사용해야 한다.

import { Component } from "react";

class Component2 extends Component {

    render(){
        let array1 = ['a','b'];
        let array2 = ['c','d'];
        let sumArray1 = [array1[0],array1[1],array2[0],array2[1]];
        let sumArray2 = [].concat(array1,array2);
        let sumArray3 = [...array1, ...array2];
        const [sum1, sum2, ...remain] = sumArray3;

        let obj1 = {key1: 'val1', key2: 'val2'};
        let obj2 = {key3: 'val3', key4: 'val4'};
        let sumObj1 = Object.assign({}, obj1, obj2);
        console.log(sumObj1);
        return(
            <div>
                <h2>sumArray1 배열 결과 : {sumArray1}</h2>
                <h2>sumArray2 배열 결과 : {sumArray2}</h2>
                <h2>sumArray3 배열 결과 : {sumArray3}</h2>
                <h2>sumArray3 배열 값 sum1 : {sum1}</h2>
                <h2>sumArray3 배열 값 sum2 : {sum2}</h2>
                <h2>sumArray3 배열 값 remain : {remain}</h2>
            </div>
        )
    }
}

export default Component2;

Object.assign() 함수의 첫 번째 인자 {}는 함수의 return 값이고 뒤의 인자에 객체들을, 로 연결해 나열하면 여러 개의 객체를 합칠 수 있다.

4. 객체에 전개연산자...

ES6에서는 객체에서도 전개연산자를 이용해 여러 개의 객체를 합칠 수 있다.

import { Component } from "react";

class Component2 extends Component {

    render(){
        let array1 = ['a','b'];
        let array2 = ['c','d'];
        let sumArray1 = [array1[0],array1[1],array2[0],array2[1]];
        let sumArray2 = [].concat(array1,array2);
        let sumArray3 = [...array1, ...array2];
        const [sum1, sum2, ...remain] = sumArray3;

        let obj1 = {key1: 'val1', key2: 'val2'};
        let obj2 = {key3: 'val3', key4: 'val4'};
        let sumObj1 = Object.assign({}, obj1, obj2);
        console.log(sumObj1);
        let sumObj2 = {...obj1, ...obj2};
        const {key1, key3, ...others} = sumObj2;
        console.log(sumObj2);
        console.log("key1 : "+key1+" key3 : "+key3+" others : "+JSON.stringify(others));
        return(
            <div>
                <h2>sumArray1 배열 결과 : {sumArray1}</h2>
                <h2>sumArray2 배열 결과 : {sumArray2}</h2>
                <h2>sumArray3 배열 결과 : {sumArray3}</h2>
                <h2>sumArray3 배열 값 sum1 : {sum1}</h2>
                <h2>sumArray3 배열 값 sum2 : {sum2}</h2>
                <h2>sumArray3 배열 값 remain : {remain}</h2>
            </div>
        )
    }
}

export default Component2;

배열과 같이 sumObj2 객체의 키와 값을 추출해 키와 동일한 명칭의 개별 변수에 넣고 나머지는 마지막에 전개 연산자 처리된... others 변수에 넣어 변수 지정이 가능하다.