[React]같은 '...'이지만 쓰임이 다른 스프레드 연산자와 Rest 프로퍼티

 

Udemy의 React 강의 소개

 

현재 저는 Udemy에서 인기 강좌 중 하나인 React - The Complete Guide 2024 (incl. Next.js, Redux) 라는 강의를 듣고 있습니다. 원래는 다른 next.js 강의를 수강중이었는데, 제가 알고싶어 했던 내용들이 아래 강의에 전부 포함이 되어 있더라고요.

 

 

 

 

 

아직 완강하려면 90%나 더 남았지만 지금까지 들어본 결과 굉장히 만족스럽습니다. 개념을 굉장히 세세하게 짚어주셔서 초급자~중급자 이상까지 전부 커버 가능한 것 같았습니다. 완강 후 다시 평가해보겠지만 일단 저는 별점 다섯개를 주었습니다.

 

 

 

 

 

 

 

 

각설하고 이번에 배웠던 내용을 복습하는 겸 포스팅 해보겠습니다.

 

 

JavaScript의 ...(점 세 개)는 두 가지 주요 용도로 사용됩니다. 바로 스프레드 연산자(Spread Operator)와 Rest 프로퍼티(Rest Properties)입니다. 스프레드 연산자는 전개 연산자라고도 하며, rest 프로퍼티는 rest 연산자라는 이름으로도 불립니다.

 

이 두 가지는 문법적으로는 동일하게 보이지만, 사용되는 위치와 목적에 따라 그 역할이 다릅니다. 이 글에서는 강의에서 활용된 React 예제를 통해 스프레드 연산자와 Rest 프로퍼티가 어떻게 사용되는지 자세히 알아보겠습니다.

 

 

 

 

스프레드 연산자(Spread Operator)

 

스프레드 연산자는 배열이나 객체의 요소를 펼쳐서 각각의 요소를 개별적으로 전달하거나, 새로운 배열 또는 객체를 생성할 때 사용됩니다. React에서 컴포넌트에 props를 전달할 때, 여러 개의 props를 한 번에 전달하기 위해 자주 사용됩니다.

 

 

 

스프레드 연산자 사용 예시

다음은 data.js 파일에서 데이터를 가져와서, 각 데이터를 CourseGoal 컴포넌트로 전달하는 예제입니다.

 

// data.js
export const CORE_CONCEPTS = [
  {
    image: 'path/to/image1.jpg',
    title: 'Learn React',
    description: 'In-depth'
  },
  {
    image: 'path/to/image2.jpg',
    title: 'Master JavaScript',
    description: 'Advanced concepts and techniques'
  },
  {
    image: 'path/to/image3.jpg',
    title: 'Explore CSS',
    description: 'Styling and layout techniques'
  }
];

// App.jsx
import React from 'react';
import { CORE_CONCEPTS } from './data.js';

export function CourseGoal({ title, description, image }) {
  return (
    <li>
      <img src={image} alt={title} />
      <h2>{title}</h2>
      <p>{description}</p>
    </li>
  );
}

function App() {
  return (
    <div id="app" data-testid="app">
      <h1>Time to Practice</h1>
      <p>One course, many goals! 🎯</p>
      <ul>
        {CORE_CONCEPTS.map((concept, index) => (
          <CourseGoal key={index} {...concept} />
        ))}
      </ul>
    </div>
  );
}

export default App;

 

위 코드에서 ...concept은 각 객체를 펼쳐서 스프레드 연산자를 사용하여 CORE_CONCEPTS 배열의 각 객체를 CourseGoal 컴포넌트에 props로 전달하고 있습니다. 스프레드 연산자는 배열과 객체에서 매우 유용하게 사용되며, 다양한 상황에서 코드의 간결함과 가독성을 높여줍니다. 아래는 좀 더 구체적인 스프레드 연산자의 예시입니다.

 

 

 

배열에서의 스프레드 연산자 사용

스프레드 연산자를 사용하여 여러 배열을 병합할 수 있습니다.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];

console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

 

 

스프레드 연산자를 사용하면 기존 배열을 쉽게 복사할 수 있습니다. 이는 원본 배열을 변경하지 않고 새로운 배열을 만들 때 유용합니다.

 

const originalArray = [7, 8, 9];
const copiedArray = [...originalArray];

console.log(copiedArray); // [7, 8, 9]

 

 

 

 

객체에서의 스프레드 연산자 사용

스프레드 연산자는 여러 객체를 병합할 때도 사용됩니다. 이때 후속 객체의 속성이 앞선 객체의 속성을 덮어쓰게 됩니다.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 3, c: 4 }

 

 

 

기존 객체를 복사하여 새로운 객체를 생성할 때도 스프레드 연산자를 사용할 수 있습니다. 이는 원본 객체를 변경하지 않고 복사본을 생성하는 데 유용합니다.

const originalObj = { x: 10, y: 20 };
const copiedObj = { ...originalObj };

console.log(copiedObj); // { x: 10, y: 20 }

 

 

 

 

 

 

 

Rest 프로퍼티(Rest Properties)

Rest 프로퍼티는 생긴 것은 '...'로 스프레드 연산자와 같지만 구조 분해 할당시 사용되며, 특정 요소를 추출하고 나머지 요소를 하나의 객체로 묶을 때 사용됩니다. 이는 props를 다루는 컴포넌트 내에서 매우 유용하게 활용됩니다.

 

 

 

Rest 프로퍼티 사용 예시

CourseGoal 컴포넌트에서 특정 props를 추출하고 나머지를 별도로 관리하는 예시입니다.

 

export function CourseGoal({ title, description, image, ...rest }) {
  return (
    <li>
      <img src={image} alt={title} />
      <h2>{title}</h2>
      <p>{description}</p>
      {rest.additionalInfo && <span>{rest.additionalInfo}</span>}
    </li>
  );
}

 

 

구조 분해 할당과 Rest 프로퍼티

위 코드는 CourseGoal 컴포넌트의 매개변수로 { title, description, image, ...rest }를 사용하고 있습니다. 여기서 title, description, image는 직접 사용하고자 하는 props입니다. '...rest'는 title, description, image를 제외한 나머지 모든 props를 하나의 객체(rest)로 묶습니다.

 

 

동적 사용에 적절

rest 객체는 title, description, image 이외의 모든 props를 포함합니다. 그리고 rest 객체의 각 속성은 rest.additionalInfo 처럼 접근할 수 있습니다. 이렇게 하면 여러 개의 props를 일일이 나열하지 않고 나머지 props를 하나의 객체로 묶어 사용할 수 있다는 장점이 있습니다. 또한 특정 조건에 따라 props를 렌더링할 수 있어, 컴포넌트의 동적 사용에 유리합니다.