REACT_ 전개 연산자

< 전개 연산자 사용하기>

- 전개 연산자 : 배열이나 객체 변수를 좀 더 직관적이고 편리하게 합치거나 추출 할 수 있게 도와주는 문법

 

변수 앞에 ...(마침표3개)를 입력해서 사용한다

 

- R011_SpreadOperator.js

import React, {Component} from 'react';

class R011_SpreadOperator extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentDidMount() {
        //javascript Array
        var varArray1 = ['num1','num2'];
        var varArray2 = ['num3','num4'];
        var sumArray = [varArray1[0], varArray1[1], varArray2[0], varArray2[1]];
        // varArray= [].concat(varArray1,varArray2);
        console.log('1. sumArray : ' + sumArray);
        //ES6 Array
        let sumLetArr = [...varArray1, ...varArray2];
        console.log('2. sumLetArr : ' + sumArray);
        const [sum1, sum2, ...remain] = sumLetArr;
        console.log('3. sum1 : ' + sum1 + ', sum2 : ' + sum2 + ', remain : ' + remain);
        var varObj1 = {key1 : 'val1', key2 : 'val2'};
        var varObj2 = {key2 : 'new2', key3 : 'val3'};
        // javascript Object
        var sumVarObj = Object.assign({},varObj1, varObj2);
        console.log('4. sumVarObject : ' + 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 R011_SpreadOperator;

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import SpreadOperator from './R011_SpreadOperator.js';

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

export default App;

 

결과