React에서 세 개의 점(...) 또는 스프레드 연산자는 무엇입니까

React에서 아래와 같이 변수 앞에 세 개의 점( ... )을 사용한 코드를 자주 보셨을 것입니다.

<Component {...props} />

이들은 JavaScript에서 spread operators이라고 하며 이 기사에서는 스프레드 연산자가 React 및 JavaScript에서 어떻게 사용될 수 있는지에 대한 다양한 사용 사례를 볼 것입니다.

스프레드 연산자를 사용하여 소품 전달

Person라는 구성 요소가 있고 firstName , lastName 및 age 의 세 가지 속성을 전달하려고 한다고 가정합니다.
전통적으로 아래와 같이 전달합니다.

import React from "react"

export const Person = () => {
  const { firstName, lastName, age } = person
  return (
    <div>
      <p>
        Name :{firstName} {lastName}
      </p>
      <p>Age :{age}</p>
    </div>
  )
}

const App = () => {
  const person = { firstName: "John", lastName: "Doe", age: 32 }
  return (
    <Person
      firstName={person.firstName}
      lastName={person.lastName}
      age={person.age}
    />
  )
}

export default App

각 속성에 액세스하고 개별적으로 작성합니다. 속성 수가 증가함에 따라 코드가 부피가 커집니다. 여기에서 스프레드 연산자를 사용하여 아래와 같이 person 개체 내부의 모든 속성을 전달할 수 있습니다.

import React from "react"

export const Person = () => {
  const { firstName, lastName, age } = person
  return (
    <div>
      <p>
        Name :{firstName} {lastName}
      </p>
      <p>Age :{age}</p>
    </div>
  )
}

const App = () => {
  const person = { firstName: "John", lastName: "Doe", age: 32 }
  return <Person {...person} />
}

export default App

배열 및 스프레드 연산자

스프레드 연산자는 다른 배열 작업을 수행하는 데에도 사용할 수 있습니다.

어레이 사본 생성

아래와 같이 스프레드 연산자를 사용하여 배열의 항목을 다른 배열로 복사할 수 있습니다.

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

어레이 사본을 수정할 때 원래 어레이는 영향을 받지 않습니다. 또한 얕은 복사를 수행합니다. 즉, 최상위 수준의 항목만 값으로 복사하고 모든 중첩된 속성은 참조로 복사됩니다.

2개의 어레이 결합

스프레드 연산자를 사용하여 아래와 같이 2개의 배열을 결합하고 새 배열을 만들 수 있습니다.

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

배열에 항목 추가

배열을 복사하는 동안 시작 또는 끝에 요소를 추가할 수 있습니다.

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

내previous article에서 배열 사이에 항목을 추가하는 방법을 설명했습니다.

함수에 배열 전달

스프레드 연산자를 사용하여 배열을 별도의 인수로 함수에 전달할 수 있습니다.

const sum = (a, b, c) => {
  return a + b + c
}

const arr1 = [1, 2, 3]

sum(...arr1)

개체 작업을 위한 스프레드 연산자

이제 스프레드 연산자를 사용하여 수행할 수 있는 다양한 개체 작업을 살펴보겠습니다.

개체 항목 복사

배열과 마찬가지로 객체의 얕은 복사본을 만들 수 있습니다.

const obj1 = { firstName: "John", lastName: "Doe", age: 32 }
const person = { ...obj1 }
console.log(person) // {firstName: 'John', lastName: 'Doe', age: 32}

2개의 객체 결합

배열과 마찬가지로 아래와 같이 2개의 객체를 결합할 수 있습니다.

const obj1 = { firstName: "John" }
const obj2 = { lastName: "Doe", age: 32 }
const person = { ...obj1, ...obj2 }
console.log(person) // {firstName: 'John', lastName: 'Doe', age: 32}

If the same property is present in both the objects,
then the property of the left object will be replaced by the property of the right object in the created copy.

개체를 복사하는 동안 소품 추가

개체를 복사하는 동안 추가 속성을 추가할 수 있습니다.

const obj1 = { firstName: "John", lastName: "Doe" }
const person = { ...obj1, age: 32, profession: "Full Stack Developer" }
console.log(person) // {firstName: 'John', lastName: 'Doe', age: 32, profession: 'Full Stack Developer'}

개체의 기존 속성 업데이트

소품을 추가하는 것과 유사하게 기존 속성도 업데이트할 수 있습니다.

const obj1 = {
  firstName: "John",
  lastName: "Doe",
  age: 32,
  profession: "Full Stack Developer",
}
const person = { ...obj1, age: 33 }
console.log(person) //{firstName: 'John', lastName: 'Doe', age: 33, profession: 'Full Stack Developer'}