한 입 크기로 잘라먹는 리액트Table Of Contents
이번 절에서는 반복이 가능한 객체에서 값을 개별 요소로 분리하는 스프레드 연산자와 개별 요소를 다시 배열로 묶는 rest 매개변수에 대해 알아보겠습니다.
스프레드 연산자
스프레드(spread) 연산자는 기호로는 ‘...’로 표기하는데, 전개 연산자라고도 부릅니다. 스프레드 연산자를 이용하면 배열, 문자열, 객체 등과 같이 반복이 가능한 객체의 값을 개별 요소로 분리할 수 있습니다.
스프레드 연산자와 배열, 객체
다음 예제를 살펴보면, 스프레드 연산자를 쉽게 이해할 수 있습니다.
코드를 불러오는 중 입니다 ...① 변수 arrB는 첫 번째 요소에 또 다른 배열 ...arrA를 저장합니다. 여기서 ...arrA처럼 스프레드 연산자 기호가 변수 앞에 붙게 되면, 이 배열은 개별 요소로 분리되어 저장됩니다. 따라서 arrB에 는 arrA 요소의 1, 2, 3이 순서대로 할당되고, 그 뒤로 4, 5, 6이 할당됩니다.
이해를 돕기 위해 ①과 같이 스프레드 연산자
…arrA로 저장하지 않고 배열 arrA를 다른 배열에 그냥 저장한다면 어떻게 될까요? 만약 arrB = [arrA, 4, 5, 6]이라면 arrB에는 [[1, 2, 3], 4, 5, 6]이 저장됩니다. 차이점을 잘 구분하길 바랍니다.
객체를 다룰 때도 스프레드 연산자는 매우 유용합니다.
코드를 불러오는 중 입니다 ...① objA 프로퍼티를 objB의 프로퍼티로 나열합니다. 따라서 objB는 objA의 a와 b 프로퍼티를 개별 요소로 포함합니다.
스프레드 연산자와 함수
스프레드 연산자는 함수를 호출할 때도 이용합니다. 이번에는 스프레드 연산자로
배열 요소를 분리하여 함수의 인수로 전달하겠습니다.
코드를 불러오는 중 입니다 ...① ...arr은 변수 arr에 저장된 배열을 개별 요소로 분리합니다. 따라서 인수로 3개의 값 1, 2, 3을 전달하는 것과 같은 효과를 얻게 됩니다. 그 결과 함수 func의 매개변수 a, b, c에는 순서대로 1, 2, 3이 저장됩니다.
매개변수에서 구조 분해 할당과 스프레드 연산자의 차이
함수의 매개변수로 구조 분해 할당하는 과정은 함수를 호출할 때 전달하는 인수가 1개이고 그 값이 객체인 경우입니다. 반면 스프레드 연산자를 이용해 인수를 전달하면 인수가 1개가 아닌 여러 개로 나뉘어 전달됩니다. 따라서 매개변수 역시 여러 개 선언해야 합니다. 두 가지 방법을 잘 구분해야 합니다.
rest 매개변수
rest 매개변수는 나머지 매개변수라고 하며, 스프레드 연산자처럼 기호 ‘...’으로 표기합니다. 스프레드 연산자는 배열이나 객체처럼 반복 가능한 값을 개별 요소로 분리하지만, rest 매개변수는 반대로 개별 요소를 배열로 묶습니다.
코드를 불러오는 중 입니다 ...매개변수로 사용할 변수의 이름 앞에 ...을 붙이면 rest 매개변수가 됩니다. rest 매개변수는 함수에 전달한 인수들을 순차적으로 배열에 저장합니다. 따라서 변수 rest에 저장되는 값은 [1, 2, 3, 4]가 됩니다. 다음은 다른 매개변수와 함께 사용하는 rest의 예입니다.
코드를 불러오는 중 입니다 ...rest 매개변수와 다른 매개변수를 함께 사용하는 경우, 인수는 순차적으로 왼쪽부터 오른쪽으로 할당됩니다. 따라서 매개변수 param에는 첫 번째 인수 1이, 나머지 인수들은 순차적으로 변수 rest에 배열로 할당됩니다.
다음은 rest 매개변수를 사용할 때 주의할 점입니다.
코드를 불러오는 중 입니다 ...rest 매개변수는 먼저 선언한 매개변수에 할당된 인수를 제외하고 나머지를 모두 배열에 저장합니다. 따라서 반드시 매개변수에서 마지막에 선언되어야 합니다.