비슷해서 헷갈리는 Rest 파라미터, spread 연산자

function Input({ label, ...props }: InputProps) {
    return <input {...props} />;
}

 

예시 코드는 props를 받아서 label 속성을 제외하고, 나머지 속성을 props객체로 받아서 input 태그에 전달해 주는 코드이다

 

리액트에서 컴포넌트는 하나의 객체 (props)를 매개변수로 받기 때문에 구조분해로 가져올 수 있다

 

매개변수에 사용된 것은 rest 연산자

매개변수를 input 태그에 전달하는 spread 연산자이다

 

생긴 게 비슷하고, 이름을 원하는대로 지을 수 있어서 헷갈리는 개념인 것 같다

 

Rest 파라미터 (나머지 매개변수)

나머지 매개변수들을 하나(배열)로 모으는 역할

주로 함수 매개변수, 배열 구조 분해, 객체 구조 분해에서 사용된다.

 

1. 함수 매개변수 = 매개변수를 모아서 배열로 반환

function sum(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

sum(1, 2, 3, 4); // 10

 

2. 배열 구조 분해 = 요소들을 모아서 배열로 반환 

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(rest); // [3, 4, 5]

 

3. 객체 구조 분해 = 속성들을 모아서 객체로 반환

Rest 매개변수는 항상 배열을 반환하지만, 객체 구조 분해에서 나머지 속성을 모을 때는 객체로 반환한다.

const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(rest); // { c: 3, d: 4 }

 

spread 연산자

배열, 객체에서 개별 요소를 다 펼쳐서, 다른 배열이나 객체에 복사하거나, 함수의 인수로 전달할 때 사용한다.

 

1. 배열에서 사용

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

 

2. 객체에서 사용

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

 

3. 함수 호출에서 사용

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

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

 

Rest / spread 사용  vs  일일이 나열

props를 일일이 나열하는 경우

function Input({ type, placeholder, value, onChange, onFocus, onBlur, label }) {
    return (
        <>
            <label>{label}</label>
            <input
                type={type}
                placeholder={placeholder}
                value={value}
                onChange={onChange}
                onFocus={onFocus}
                onBlur={onBlur}
            />
        </>
    );
}

 

rest, spread 연산자를 사용하는 경우

label 외의 나머지 props를 props 객체로 그룹화한다.

spread 연산자를 사용하여 props 객체의 모든 속성을 input 요소에 펼쳐서 전달한다.

function Input({ label, ...props }) { // rest 
    return (
        <>
            <label>{label}</label>
            <input {...props} /> //spread
        </>
    );
}

 

 

요약

rest 매개변수 : 함수 매개변수 / 배열 / 객체에서 나머지 요소들을 하나로 모으는 역할 

spread 연산자 : 함수 / 배열에서 개별 요소들을 다 펼치는 역할 

 

둘은 정반대 동작을 하며, ... 연산자가 어느 위치에서 사용됐는지로 구분하면 된다