[React] React에서의 전개 연산자 with 스타일 컴포넌트 - 매개변수 앞에 '...'

▶React에서의 전개 연산자

스타일 컴포넌트를 계속 공부하다가 여기에서도 전개 연산자를 활용할 수 있음을 알게 되었는데요.

알고 있으면 정말 간편하고 유용할 거 같다는 생각이 들었던 거 같습니다.

오늘은 변수 앞에 ... 을 입력하여 사용하는 전개 연산자에 대해 차근차근 정리해 보려고 합니다.

 

🔎 전개 연산자 (...) : 그 외 나머지 매개변수

---

제일 뒤에 작성하는 변수의 앞에 전개 연산자를 붙이면 그 외 나머지 매개변수의 의미를 갖게 되는데요.

 

저는 이 나머지 매개변수의 의미를 이용하여 스타일 컴포넌트에게 전달해줄 매개변수에서

필요한 건 지정해서 전달을 해주고

나머지는 이 전개 연산자를 이용하여 지정 없이 싹 모아 전달하려고 합니다.

 

📌 예시 코드

Home 페이지에서 Button 컴포넌트를 import 해서 사용할 겁니다.

그런데 Button 컴포넌트에게 전달해줄 매개변수들을 전달하는 방법에 대해 자세히 살펴보려고 합니다.

 

📄 Home,js 파일

import Button from './Button';

function Home() {
  return (
    <div>
      <Button
        text={'버튼입니다'}
        color={'#d6adb3'}
        width={'100px'}
        border={'5px solid red'}
      />
    </div>
  );
}

export default Home;

지금 Button 컴포넌트에게 text, color, width, border 매개변수를 전달해 주었습니다.

이제 Button 컴포넌트는 이 매개변수를 props로 받아서 사용해야 하겠죠?

 

📄 Button.js 파일

 

방법1

import styled from 'styled-components';

function Button(props) {
  const {color, width, border, text} = props;
  return (
    <div>
      <Btn color={color} width={width} border={border}>
        {text}
      </Btn>
    </div>
  );
}

export default Button;

const Btn = styled.button`
  background-color: ${({color}) => color};
  width: ${({width}) => width};
  border: ${({border}) => border};

저도 원래 위와 같은 방법으로 props를 받아 사용했었는데요.

나머지 연산자를 사용해서 리팩토링을 해 보겠습니다.

 

방법2

function Button(props) {
  const {text, ...rest} = props;
  return (
    <div>
      <Btn {...rest}>{text}</Btn>
    </div>
  );
}

위와 같이 text만 변수로 받아놓고 나머지는 그대로 전달해도 되기 때문에 위와 같이 나머지 연산자를 사용하여 코드를 작성해 보았습니다.

위와 같이 전달을 해주어도 동일하게 실행되는 것을 확인할 수 있었습니다.

실행 화면

나머지 연산자로 받아서 우리가 보기에는 짧아 보여서 뭔가 없어진 거 같지만

전달 받은 매개변수를 모두 스타일 컴포넌트까지 color는 color로 width는 width로 border는 border로 전달되었습니다.