👨‍💻 사건

• 프로젝트를 진행하는 중에, 버튼을 사이즈 별로 받아오기 위해 props를 받아와 각 케이스에 맞게 스타일드 컴포넌트를 사용했다. 그러다 습관적으로 버튼에 받아오는 props 중 {…rest} 도 같이 받아왔다. 이를 사용했을때, 스타일드 컴포넌트 오버라이딩이 가능하였다. 그러다 문득 {…rest} 의 사용이유를 알고 싶어졌다.

✅ 해결

• {…rest} 를 사용하면, 내가 설정한 props 외의 다른 여러 props를 임의로 저장을 하는 것을 알았다. 이는 … 이 전개연산자이기 때문에 설정한 props 외에 다른 props 들 도 전부 저장하여 풀어주는 형태라고 보면된다. 이를 스프레드 속성이라고 한다.
  • 오버라이딩 하기위해서는, 부모로 부터 className 을 임의로 받아와야하는데 내가 사용했을때 따로 설정을 하지 않아도 오버라이딩이 가능한 이유는 이때 … 전개연산자가 임의의 모든 props 를 저장을 하여 작용했기 때문이다. … 연산자는 재사용성을 위해 사용을 하긴하지만, 다른이가 볼때 조금 더 명확한 props 사용 이유를 알기위해서는 그때 그때 상황에 맞는 props 를 설정해주는 것이 맞는것 같다. 물론 굉장히 복잡해지거나, props 를 조금 더 설정하기 어려울때는 전개연산자를 지정해두는 것이 조금 더 편하다.

💭 개선

한번 더 생각하고 사용하자.