확산 연산자 트릭

최근 스프레드 연산자를 사용하여 몇 가지 편리한 패턴을 발견했기 때문에 일부를 공유하는 빠른 블로그 게시물을 작성해야겠다고 생각했습니다.

이 블로그 게시물에서는 구문의 기본 사항을 다루지 않을 것입니다. 복습이 필요한 경우 MDN docs은 훌륭한 리소스입니다.

불변성

Javascript에는 객체와 함께 하는 멋진 일이 있습니다. 개체의 복사본을 만들려고 할 때마다 실수로 대신 개체에 대한 참조를 만들 수 있습니다.

let oldNed = {
  name: 'Ned Stark',
  job: 'Warden of the North'
};
let newNed = oldNed;
newNed.job = 'Dead';
// oldNed variable is also mutated
console.log(oldNed) // { name: 'Ned Start', job: 'Dead' }

데이터를 변경하면 찾기 어려운 버그가 발생할 수 있으므로 변경해야 하는 데이터를 올바르게 복사하여 이를 방지하는 데 시간과 노력을 들일 가치가 있습니다. 한 가지 방법은 스프레드 연산자를 사용하는 것입니다.
let newNed = {...oldNed};
newNed에 대한 변경 사항은 oldNed 변수를 변경하지 않습니다. 그러나 한 가지 예외가 있습니다. 확산 연산자는 중첩 개체의 전체 복제를 수행하지 않습니다.

let oldNed = {
  name: 'Ned Stark',
  job: 'Warden of the North',
  kids: ['John', 'Rob', 'Bran', 'Sansa', 'Arya', 'Rickon']
};
let newNed = { ...oldNed };
newNed.kids.splice(5)
// oldNed is now also missing Rickon :(

이 문제를 해결하려면 중첩 배열도 펼쳐야 합니다.
let newNed = { ...oldNed, kids: [...oldNed.kids] };
깊이 중첩된 개체가 있는 경우 깊은 복제에 도움이 되는 일종의 사용자 지정 함수 또는 라이브러리에 도달할 수 있습니다.


다음은 변경할 수 없는 멋진 트릭입니다.

여러 배열 결합(조각 또는 전체).

let dontChangeMe = ['Apples', 'Peaches', 'Detergent', 'Flowers'];
let meNeither = ['A shiny red polo', 'coffee', 'milk'];
let shoppingList = [
    ...dontChangeMe,
    'diapers',
    ...meNeither.slice(1)
]

개체를 복사하고 동시에 속성을 업데이트합니다.

let nedStark = {
  name: 'Ned Stark',
  job: 'Warden of the North'
};
let newNed = { ...nedStark, job: 'Dead' };

nodeList를 실제 배열로 변환합니다.

var divs = document.querySelectionAll('div')
var arrayOfDivs = [...divs] // returns an array not a nodelist

나머지 연산자

그래서 저는 개인적으로 Rest Operator에 대한 많은 사용 사례를 아직 찾지 못했습니다. 그러나 React-Router를 사용하여 React에서 인증된 경로를 생성하는 이 패턴을 우연히 발견했습니다. 다음은 기본적인 예입니다.

const AuthenticatedRoute = ({ ...rest }) => {
  const id = this.state;
  if (!id) {
    return <Redirect to={{ pathname: '/home' }} />;
  }
  return <Route {...rest} />;
};
// In Use
<AuthenticatedRoute
  path='/dashboard'
  data={this.state.data}
  render={() => (
    <SomeComponent someProps={this.someProps} />
  )}
/>

나머지 연산자 마법은 반환할 때 발생합니다<Route {...rest} />. 기본적으로 진행되는 것은 AuthenticatedRoute 함수가 호출되고 상태 개체에서 ID를 확인하는 것입니다. 실패하면 <Redirect/> 구성 요소를 반환합니다. 그렇지 않으면 <Route> 구성 요소를 반환하고 모든 소품을 통과합니다(이 예에서는 path , data 및 render ).

꽤 편리하죠? 더 있어? 아래에서 공유해주세요!