spread operator and destructing

spread operator와 destructing을 응용한 props 사용법

spread operator, destructing

우선, spread operator...와 destructing을 활용하면 하나의 object에서 원하는 요소만 별도의 object로 구성 가능하다.

const person = {
	id: 1,
  	name: "Robyn",
  	age: 88,
}

// 만약 id를 제외한 "rest"라는 object를 만들고 싶다면
const {id, ...rest} = person;

console.log(id) // 1
console.log(rest) //{name: "Robyn", age: 88}

props에 응용

import React from "react";

// Navbar.js
function Navbar(props) {
  const {children, ...rest} = props;
  return <h1 {...rest}>{children}</h1>
}

//index.js
function App() {
	return <Navbar className="navbar" tabIndex="2">네브바네브바</Navbar>
}

• props.children은 콘텐츠인 "네브바네브바"이므로 children에는 "네브바네브바"가 담기게 된다.
• rest에는 말그대로 나머지인 {className="navbar", tabIndex="2"}가 담기게 된다.

※ clsx와도 활용이 가능하다. 이는 clsx 게시글에 상세히 담을 예정.