개요

Rest 문법은 배열, 객체, 함수의 파라미터에서 사용된다.

객체에서 Rest

객체에서는 다음과 같이 사용할 수 있다.

const profile = {
  username: 'Hyuk',
  sex: 'male',
  phone: '010-1111-2222',
  email: 'hyuk@gmail.com'
};

const { phone, ...rest } = profile;
console.log(phone);  // 010-1111-2222
console.log(rest);  // {username: 'Hyuk', sex: 'male', email: 'hyuk@gmail.com'}

이처럼 객체에서 원하는 값의 key를 비구조화 할당 문법을 통해 사용된다.

배열에서 Rest

배열에서도 객체에서의 Rest 와 마찬가지로 비구조화 할당 문법을 통해 값 추출이 가능하다.

const phoneList = ['010', '011', '016', '017', '019'];

const [first, ...rest] = phoneList;
console.log(first) // '010'
console.log(rest) // ['011', '016', '017', '019'] 

함수 파라미터에서 Rest

Rest 문법은 함수 파라미터에서도 사용이 가능하다. 문법은 spread 문법과 동일하게 매개변수 이름 앞에 ... 을 붙여서 사용한다.

또한, 그렇게 전달받은 인수들의 목록은 배열 형태로 전달받는다.

기존엔 다음과 같이 인수의 개수만큼 매개변수를 전달받았다.
(물론 개수를 충족하지 않아도 에러는 발생하지 않는다.)

function nums(one, two, three) {
	console.log(one, two, three)
}

nums(1, 2, 3)

다음과 같이 함수 파라미터에서 Rest를 사용할 수 있다.

function nums(...rest) {
	console.log(rest) // [1, 2, 3]
}

nums(1, 2, 3)

위에서 언급했듯이 이처럼 함수 파라미터로 Rest 문법을 사용한다면 전달받은 매개변수는 배열로 전달받는다.

그리고 다음과 같이 특정 값만 따로 추출할 수 있다.

function nums(one, ...rest) {
  	console.log(one) // 1
	console.log(rest) // [2, 3]
}

nums(1, 2, 3)

또한 위의 코드처럼 Rest 문법이 앞에 나와서는 안되고 (마지막에 있어야만 한다.) 한번만 사용되어야 한다.

// 잘못된 Rest 사용법
// 앞에 나와서는 안되고
function nums(...rest, one) {
  	console.log(one)
	console.log(rest)
}

nums(1, 2, 3)


// 한번만 사용되어야 한다
function nums(...rest1, ...rest2) {
  	console.log(rest1)
	console.log(rest2)
}

nums(1, 2, 3)

응용(React props)

함수 파라미터로 Rest 문법이 사용되는걸 확인했다.
이를 바탕으로 React에서 props를 넘겨줄때에도 사용할 수가 있다.

다음 코드를 보자.

// view/Join.js
<ValidationForm 
  type='text' 
  value={...}
  onChange={...}
  error={...}
  validation={joinErrorMessage.username}
/>

// component/ValidationForm
const ValidationForm = ({ 
    validation,   // props 중 validation 값만 사용하기 위해 따로 값을 받음.
    ...props
 }) => {
  ...
  
  const isValid = useMemo(() => {
    if (...) {
        ...
    }
    
    else if (validation) {  // validation 값 사용
      ...
    }
      
  }, [validation])
  ...
  
  
  <input 
    {...props}
  />
}

위의 코드처럼 ValidationForm 컴포넌트에 type, value, validation 등 많은 값을 props 형태로 넘겨주고
ValidationForm 컴포넌트에서는 실제로 validation 라는 props 값만 사용하기 때문에 전부 props 로 받지 않고 validation 값만 추출해 사용하는 것을 볼 수가 있다.

그리고 input 태그에 ...props 를 사용한 이유는, 그대로 onChange, value 와 같은 값을 그대로 input 에 넣어주는 뜻이다.

이처럼 Rest 문법을 함수 파라미터로 사용한다면 훨씬 가독성 있고 간결한 코드 작성이 가능하다.