속성(props)을 구조 분해 할당할 때
추가할 수 있는 특별한
내장 자바스크립트 문법이 있습니다
온점 세 개 다음에
원하는 식별자(identifier)를 작성합니다
예를 들면 속성(props)이 있지만, 어떤 단어도 가능합니다
이 온점 세 개는 자바스크립트의 내장 문법이며
이것을 사용하면 자바스크립트가
이 구역 컴포넌트에서 사용할 수 있는
모든 다른 속성을 모아와서
속성 객체(props object)로 병합합니다
즉 하나의 자바스크립트 객체에
속성으로 분류되는 모든 것이 모여서
이 컴포넌트로 들어옵니다
그러면 이 속성들을 모두
이 빌트인 속성 요소로 가져올 수 있습니다
이것을 위해 스프레드 연산자를 사용합니다
모양은 동일하지만 사용하는 위치가 다릅니다
이 경우에는 데이터를 객체로 모으기 위해 사용하였지만
여기에서는 데이터, 즉 값의 집합을 펼쳐서
다른 요소로 보내기 위해 사용합니다
그러므로 이 스프레드 연산자를
제가 props로 명명한 속성 객체에 사용할 수 있습니다
이 두 객체는 서로 연관되어 있습니다
즉 이제 추가 속성들 중
이 커스텀 구역 컴포넌트에 설정된 모든 속성들은
이쪽의 빌트인 구역 요소로 넘어가게 됩니다
그러므로 이제 id 뿐만 아니라
클래스에 대한 이름 또한 설정할 수 있습니다
이외의 모든 것도 이름을 지을 수 있습니다
그리고 수동으로 추출하지 않는
여기 title과 children 같은 속성은
모두 합병되어
이 속성 객체로 들어간 후
이 섹션 요소로 펼쳐집니다
이 패턴은 내용을 모두 감싸는
래퍼 컴포넌트(wrapper component) 작성 시 유용합니다
예시로는 이 Section 컴포넌트가 있습니다
이제 보면 이전과 다를 것 없는 화면이 보이고
작동하는 데에 있어서도 달라진 것이 없습니다
지금은 새로고침 후 버튼을 테스트하고 있습니다
달라진 것은 이 유연한 래퍼 컴포넌트를 사용한 점입니다
다른 예로, 이 동일한 패턴을
탭 버튼(TabButton.jsx)에도 사용할 수 있습니다
이 onSelect 속성을 수동으로 가져오는 대신
이것을 onClick 속성의 값으로 설정하여
이 내장 버튼에 포함시키면
이것을 삭제할 수도 있습니다
대신에, 아까와 같은 방식을 사용해서
나머지 속성을 모두 병합하여
온점 세 개 연산자를 통해 이 속성 객체에 넣을 수 있습니다
이제 할 일은 여기에서
나머지 속성을 펼쳐서
이 내장 버튼 속에 설정하는 것입니다
여기에서 조심하셔야 하는 부분은
이 TabButton 컴포넌트를
사용하는 위치에 이제는
onSelect 속성을 설정하지 않는다는 점입니다
이 경우는 저희가 설정한 커스텀 속성이었습니다
대신에 onClick 속성은
이 빌트인 버튼 내에 존재하므로
나머지 속성을 모두 여기로 보내는 것입니다
그러므로 이 예시 Examples에서
모든 onSelect 속성을 onClick 속성으로 대체하겠습니다
그렇게 하면 속성을 내보내는 패턴을
이 TabButton 컴포넌트에서도 사용할 수 있습니다
이제 모든 파일을 저장하고 새로고침을 해보면
보이시는 대로 모든 버튼이
이전처럼 잘 작동하고 있습니다
다른 점은 특수한 패턴을 사용하여
속성을 내부 요소로 내보내게끔
이 커스텀 컴포넌트를 수정한 것입니다