[ React ] 리액트 전개 연산자 ?

 

 

 

전개 연산자는 JAVASCRIPT 에서 축약 코딩을 하기 위한 기법 중 하나이다.

​

주로 배열을 다루는 부분에서 사용되며 이를 사용하면 객체 혹은 배열을 펼칠 수 있다.

​

혹은 '그 외 나머지 매개변수' 를 임의로 지정할 수 있게 해준다.

​

배열을 펼칠 수 있다? 나머지 매개변수? 무슨 말인지 아래의 여러가지 예시를 통해 알아보자.

​

​

​

​

만약 아래와 같은 배열이 두 개가 있다고 가정해보자.

const arr1 = [ 1, 2, 3, 4, 5 ] ;
const arr2 = [ 6, 7, 8, 9, 10 ] ;

 

 

만약 arr1 배열과 arr2 배열을 하나로 합쳐 arr3 = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] 배열로 만들고 싶다.

​

기존에는 아래와 같은 방법으로 합쳤을 것이다.

const arr3 = arr1 ;
arr3.concat(arr2) ;

 

 

또는 이렇게 하면 되지 않을까 ? 하고 아래와 같이 시도해봤을 법하다.

const arr3 = [ arr1, arr2 ] ;

 

 

 

 

 

이의 경우 Array 안에 Array 두 개를 집어넣는 꼴이니 arr3 = [ [ 1, 2, 3, 4, 5 ], [ 6, 7, 8, 9, 10 ] ] 식으로 들어갈 것이다.

​

이 때 전개 연산자를 사용하면 arr1 과 arr2 배열을 펼쳐서 사용할 수 있다.

​

이게 무슨말인가 하면

const arr1 = [ 1, 2, 3, 4, 5 ] ;
const arr2 = [ 6, 7, 8, 9, 10 ] ;

const arr3 = [] ;
arr3 = [ arr1, arr2 ] ;
console.log(arr3); // [ [ 1, 2, 3, 4, 5 ], [ 6, 7, 8, 9, 10 ] ]

arr3 = [ ...arr1, ...arr2 ] ;
console.log(arr3); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

 

 

위 처럼 (...) 을 붙이면 전개 연산자로 적용이 되고, arr1 과 arr2 배열의 내용들을 펼쳐 안의 값들을 사용할 수 있게 해주는 셈이다.

​

[ 1, 2, 3, 4, 5 ] 와 [ 6, 7, 8, 9, 10 ] 을 합치는 것이 아니라 1, 2, 3, 4, 5 와 6, 7, 8, 9, 10 을 합칠 수 있게 해준다는 말이다.

​

​

​

이번엔 아래와 같이 number1, number2 배열과 sum 이란 함수가 있다고 가정해보자.

const number1 = [ 1, 2, 3 ] ;
const number2 = [ 1, 2, 3, 4, 5 ] ;

function sum ( x, y, z ) {
    return x + y + z ;
}

 

 

number1 배열 값들이 합이 궁금해 아래와 같이 sum 함수를 호출한다면 ?

console.log(sum(number1)); //error

 

 

sum 함수 입장에선 매개변수 x, y, z 를 찾을 수 없으니 error 가 발생한다.

​

아래처럼 배열안의 값 하나하나를 지정해서 더해주면 물론 해결이야 될 것이다.

console.log(sum(number1[0], number1[1], number1[2])); //6

 

 

이는 간단하게 전개 연산자를 사용하면 보다 깔끔해진다.

console.log(sum(...number1)); //6

 

 

number1 배열 값들의 합계인 6이 잘 나올 것이다.

​

​

그럼 number2 배열 값들의 합계를 구하기 위해 sum 함수를 호출해보면?

console.log(sum(...number2)); //6

 

 

number1 배열 값의 합과 같이 6이 나오게 된다. number2 배열은 [ 1, 2, 3, 4, 5 ] 다섯 개의 값이 들어있는데

​

전개 연산자는 앞에서부터 자동으로 전개한다.

​

호출한 sum 함수의 매개변수는 x, y, z 세 개 이므로 number2 배열의 앞 세 개의 값이 계산된 것이다.

​

​

​

​

​

뿐만 아니라 앞서 말했듯 전개 연산자는 '나머지 매개변수' 를 칭하는 의미로 사용되기도 하는데 이 부분은 또 다음 예제를 보자.

​

아래와 같이 매개변수를 받아 콘솔에 찍어주는 showNumber 란 함수가 있다고 가정해보자.

function showNumber ( x, y, ...number ) {
    console.log(x);
    console.log(y);
    console.log(number);
    console.log(...number);
}

 

 

이 showNumber 함수를 다섯 개의 매개변수를 넘기면서 호출할 경우 아래처럼 되는데

showNumber(1, 2, 3, 4, 5);

// > 1
// > 2
// > 3 4 5
// > Array [3, 4, 5]

 

 

​

showNumber 함수의 매개변수 개수는 세 개를 받을 것이라 명시해놨지만 그 중 하나가 전개 연산자로 명시해놓았기 때문에

​

1 은 x 로, 2 는 y 로, 그리고 나머지 3, 4, 5 는 number 안에 들어가게 되는 것이다.

​

​

​

​

​

전개 연산자에 대한 설명은 다 끝이 났다.

​

마지막으로 간단하게 요약을 해보면 전개 연산자는 배열을 풀어서 사용할 수도 있게 해주고,

​

index 를 선언한 배열 이외의 값들 즉, 나머지 배열의 값들을 칭할 수 있게 해준다.

​

여기서 설명한 사용 방법 이외에도 전개 연산자의 사용 방법은 수도 없이 많다.

​

그 부분은 각자 열심히 찾아보장 ㅎ