이번 강의에서는 컴포넌트와 속성에 대해
마무리하는 시간을 가지면서 다음 시간에는
다음 프로젝트로 넘어가겠습니다
오늘 다룰 개념은 속성의 기본값입니다
먼저 탭 컴포넌트로 돌아가서
이 ButtonsContainer 속성을 보겠습니다
저번 시간에 추가한 속성입니다
저번 강의에서 다뤘듯이
이 속성은 컴포넌트 식별자를 값으로 받습니다
이 속성의 목적은
탭 컴포넌트를 재사용 가능하게 만들고
더 유연하게 적용하기 위함이었습니다만
대부분의 경우 메뉴(menu) 요소를 래퍼(wrapper)로 사용하여
버튼을 감싸는 것이 더 좋습니다
이 경우 탭 컴포넌트를 사용할 때
이 ButtonsContainer 속성을 설정할 필요가 없어집니다
즉 메뉴 요소가
기본값으로 쓰이게 됩니다
이렇게 하기 위해서는
여기에 구조 분해 할당 문법을 사용하면 되므로
구조 분해하는 속성 다음에 등호를 붙였습니다
이 등호의 다음인 오른쪽에
기본값을 작성하는데, menu나
div 혹은, 커스텀 컴포넌트를 사용할 경우
섹션을 사용할 수도 있습니다
이 경우에는 섹션 컴포넌트 함수를 이 파일로
가져와야 합니다
menu의 경우는 문자열로 쓰는데
내장 요소이기 때문입니다
이 자바스크립트 기능을 씀으로써
탭 컴포넌트를 사용할 때
ButtonsContainer 속성을 설정하지 않아도 됩니다
그러지 않아도 이 값과
이 메뉴 식별자값을 받아서
이 위치에 컴포넌트 식별자로 설정할 수 있습니다
저장 후 새로고침을 해 보면
앱이 이전과 동일하게 작동하고
이전의 menu 요소도 그대로 있어서
기본값으로서 래퍼(wrapper)의 기능을 하고 있습니다
차이점은 이 탭 컴포넌트가 더 단순해졌다는 점입니다