지난 시간에 여기에 탭 컴포넌트를 추가했습니다
이번 시간에 다룰 내용은
이 컴포넌트에 추가할 새로운 개념과
새로운 패턴에 대해 알아보도록 하겠습니다
이 새로운 개념은 여기 있는 메뉴 요소와
관련이 있습니다
이 탭 컴포넌트에서
버튼을 메뉴로 감싸는 것과 동시에
이 탭 컴포넌트를 조금 더
유연하게 만들어 보겠습니다
이 내용이 앱의 다양한 위치에서
사용되고 있을 수도 있는데, 이 경우는 아니지만
더 큰 앱에서는 충분히 가능한 일입니다
이 때 다양한 래퍼(wrapper) 요소를 사용해서
앱의 각 위치에서
이 버튼을 감싸는 것이 필요합니다
한 가지 방법은 여기에 있는
메뉴를 삭제하고
래퍼(wrapper)로 사용하고자 하는 요소를
여기 버튼을 설정하는 위치에
추가할 수 있습니다
이것도 하나의 해결방법이 되겠지만
좀 더 우아한 방법이 있습니다
바로 이 래퍼 요소를 삭제하지 않는 것입니다
이 래퍼 요소가 포함되어 있어야만
분리된 버튼 및 내용이 시행되기 때문입니다
물론 결정권은 개발자에게 달렸습니다
어떤 래퍼 요소를 사용할지에 대한 결정권입니다
탭 컴포넌트가 앱 내에
다양한 위치에서 사용될 수 있기 때문입니다
그래서 새로운 속성을 사용해 보겠습니다
이름은 buttonsContainer로 하겠습니다
물론 이름은 임의로 정하시면 됩니다
이 속성을 사용함으로써
한 요소를 가져와
래퍼로 사용하고, Examples.jsx에서
탭 컴포넌트로 이동해 이 속성(buttonsContainer)을 사용할 수 있습니다
여기 구조 분해 할당 코드에 추가하겠습니다
위치는 Tabs.jsx입니다
이것을 메뉴(menu)로 설정하면
메뉴 요소가 되고, ul로 설정하면
순서가 없는 리스트 요소로 사용 가능합니다
혹은 div로도 설정이 가능하고
다른 커스텀 컴포넌트일 수도 있습니다
예를 들어 섹션 컴포넌트를 사용할 수 있습니다
즉 여기에서 사용하는 식별자(identifier)는
이 속성의 값으로서의 컴포넌트입니다
홑화살괄호<>를 사용하는 속성 그 자체가 아닙니다
적절한 식별자의 예시로는 메뉴(menu)가 있습니다
또다른 중요한 차이점은
내장과 커스텀 컴포넌트의 차이입니다
커스텀 컴포넌트는 동적 값이어야 합니다
이것이 그 예시입니다
중괄호가 있고 함수명이 적혀 있습니다
반면에 내장 요소인 menu 같은 경우에는
이런 식으로 작성한다면
메뉴(menu)라는 이름의 변수를
코드에서 찾고
그 변수에 저장된 값을 가져와서
이 buttonsContainer 속성의 값으로 삼게 됩니다
물론 이 코드에 menu라는 이름의 변수는 없습니다
반면에 메뉴나 div와 같은 내장 요소는
이렇게 단순히 문자열로 내보냅니다
이것은 아주 중요한 차이점입니다
이 buttonsContainer 속성에는
요소 식별자가 포함되어 있는데
이것을 어떻게 탭 컴포넌트에서 사용할 수 있을까요?
이것을 위해서는
직접 입력된 데이터인 메뉴 요소 식별자 대신
buttonsContainer를 홑화살괄호 사이에 넣겠습니다
여기 있는 속성명입니다만 이대로는 작동하지 않습니다
이렇게 되면 이 코드는
buttonsContainer라는 이름의 내장 요소를 찾게 됩니다
이 경우 내장 요소인 이유는
첫 글자를 보시면
소문자로 시작하기 때문입니다
물론 buttonsContainer라는 빌트인 요소는 없습니다
그러므로 이 속성에 포함되어 있는
즉, buttonsContainer의 값을 식별자로 사용하겠습니다
그러니 여기에서 필요한 작업은
buttonsContainer라는 내장 요소를 찾는 것이 아니라
이 속성 안에 있는 값을 검색하여
커스텀 컴포넌트로 식별하게끔 하는 것이고
이렇게 하면 렌더링이 됩니다
여기에 특수 상수 혹은 변수 선언이 필요합니다
이름은 Buttons로 해도 되고
이것처럼 ButtonsContainer로 해도 되지만
중요한 것은 대문자로 시작해야 합니다
이 대문자 ButtonsContainer 속에
소문자 buttonsContainer가 들어 있는 것입니다
즉 이 작업은 변수를 새로 생성하는 작업이며
이 경우는 상수를 생성합니다
이 상수는 커스텀 컴포넌트로서 사용되는데
대문자로 시작하기 때문입니다
그러므로 여기에서도 사용이 가능해집니다
이제 리액트는 이 프로젝트에서
대문자 ButtonsContainer에 포함된 값을 검색하고
그 값은 이 소문자 속성인
buttonsContainer의 값과 같습니다
그리고 그 값이 문자열인지 확인을 하는데
이 경우에는 검색내용이
모든 내장 요소 중에서도
문자열 값입니다
혹은 섹션과 같이 커스텀 컴포넌트로 사용하고 싶다면
리액트가 이를 식별하게 되고
또한 이 코드가 내보내려는 것이
내장 컴포넌트가 아닌 것을 이해할 수 있습니다
여기서 표시하려는 것은
내장이 아닌 커스텀 컴포넌트임을 알기에
해당 컴포넌트를 렌더링하게 됩니다
즉 해당 컴포넌트 함수를 불러오는 것입니다
지금은 문자열 식별자를 사용하겠습니다
이대로 저장 후 새로고침하면
모든 것이 정상적으로 작동하고, 탭을 보면
여기에 보이는 대로
메뉴 요소가 사용되고 있습니다
여기에서 또 시도해 볼 작업은
menu를 div로 교체하는 것입니다
이대로 저장 후 확인해보면
텍스트 형식이 망가졌습니다
이 메뉴 요소가 문자 그대로 필요하기 때문인데
CSS 법칙에서 이 요소를 사용하고 있습니다
하지만 어쨌든 여기에서는 div가
버튼을 감싸는 래퍼로 사용되고 있습니다
이제 할 작업은
래퍼를 동적으로 설정하여
버튼을 감싸게 하고
이것을 탭 컴포넌트를 사용하는 동안 적용하겠습니다
여기에서 다시 menu를 사용하겠습니다
이 패턴에서 저희가 배운 것은
이 패턴은 컴포넌트 식별자를
속성의 값으로 보낸다는 점이고
이 식별자가 컴포넌트에 속해 있기 떄문에
다양한 HTML 요소를 동적으로 렌더링할 수 있다는 점입니다
꼭 기억하셔야 할 중요한 내용입니다
이 과정에서 지름길이 하나 있습니다
이 속성을 한 상수에 새로 설정하는 대신
처음부터 대문자로 시작하는 상수를
받도록 설정할 수 있습니다
이 경우 확인해야 하는 것은
이 속성 또한 대문자 상수로서
이 컴포넌트를 사용하는 위치에 있어야 합니다i
이렇게 하면 이전과 동일한 결과가 나옵니다
여기를 보시면 다시 메뉴(menu)가 되었습니다
오늘 배운 내용은 아주 중요한 패턴입니다
처음에는 조금 어렵게 느끼실 수도 있지만
쉽게 설명하자면
컴포넌트 식별자를 받는데
한 속성의 값으로 받는 것입니다
꼭 기억하셔야 할 두 가지는 다음과 같습니다.
먼저는 이 속성이 반드시
받는 쪽 컴포넌트에서 커스텀 컴포넌트로서 사용 가능해야 합니다
여기서는 탭 컴포넌트를 사용했습니다
즉 반드시 대문자로 시작하거나
상수나 변수로서 재설정된 속성으로서
대문자로 시작해야 합니다
꼭 기억하셔야 하는 내용 두 번째는
식별자에는 문자열 이름을 사용하는데
내장 요소인 menu, ul, 혹 div가 그 예시입니다
그리고 컴포넌트 함수를 사용해야만
커스텀 컴포넌트에 적용이 됩니다
함수를 불러오는 것이 아니고
홑화살괄호와 사용하는 것 또한 아닙니다
여기서는 함수 이름만 사용하여
커스텀 컴포넌트의 식별자를
속성의 값으로서 넘기고 있습니다
여기에서 문자열 식별자를 사용한 이유는
내장 컴포넌트인 메뉴(menu)를 사용하기 위해서입니다