이제 폴더 구조는 여기까지입니다
다음은 또 다른 큰 특징인
상호작용 섹션 작업을 할 것이고
웹사이트 하단에 있습니다
이제 새로운 컴포넌트를 추가합시다
먼저 이 탭 버튼을 위한
컴포넌트를 만들어 볼 겁니다
그러기 위해 app.jsx 파일의
main 부분에서 첫 번째 core-concepts 섹션
다음에 섹션을 추가합니다
이 다음 섹션에 examples라는 이름의 id가 전송되는데
이는 역시 스타일을 설정하기 위해 사용됩니다
그리고 h2 태그를 추가하여
'Examples'라고 입력합니다
그 아래에 기본 HTML 요소인
내장 menu 요소를 사용할 수 있습니다
버튼 목록을 만드는데 사용할 수 있으며
지금까지는
자주 사용하지 않았을 수도 있습니다
하지만 탭을 만들기 위해 그것이 필요합니다
버튼 목록을 만들고 싶습니다
그러기 위해 이와 같이 버튼이 있는
list 항목을 잔뜩 추가할 수 있지만
이와 같은 반복이 있기 때문에
새로운 컴포넌트를 만드는 것이 좋습니다
저는 여기에 그렇게 할 것입니다
그래서 CoreConcept.jsx 파일 옆에
새로운 컴포넌트 파일을 추가합니다
이름은 'TapButton,jsx'입니다
그리고 TabButton이라는
기본 함수를 export하는데
이것이 컴포넌트의 이름이기 때문입니다
그리고 버튼이 있는 list 항목인
이 JSX 코드를 여기에 반환합니다
이제부터 흥미로워집니다
TabButtun을 열리고 닫히는 태그로
app.jsx 파일 내 menu에서
이런 식으로 사용할 수 있으면 좋을 것 같습니다
이 태그 사이에 'Components'와 같은
버튼 텍스트를 입력해 컴포넌트 관련 예시들을 보이게 합니다
커스텀 컴포넌트도 이와 같이
사용할 수 있으면 좋을 것 같습니다
참고로, 이 TabButton 컴포넌트를 사용하기 위해
TabButton 컴포넌트를 가져오는 위치에
컴포넌트 폴더의 TabButton,jsx 파일을
import해야 합니다
그와 별개로 이렇게 사용할 수
있으면 좋을 것 같습니다
지금 저장을 하면
오류가 발생하지 않았으나
아무런 버튼이 없습니다
비어 있습니다
텍스트를 추가했음에도 이 공간 어디에도
텍스트 컴포넌트가 하나도 없습니다
이 텍스트는 리액트에서 무시한 것인데
컴포넌트 열림과 닫힘 텍스트 사이에 무언가를 전달하면
리액트가 출력할 위치를 모르기 때문에
자동적으로 이 내용이 출력 되지 않습니다
결국에는 커스텀 컴포넌트를 페이지에
출력하라고 명령하는 것인데
리액트가 텍스트를 어떤 식으로 처리할지 어떻게 알까요?
이를 위해서 커스텀 컴포넌트인
TabButton 컴포넌트에 가보겠습니다
모든 커스텀 컴포넌트가 props을 받기 때문에
여기도 props를 받아야 합니다
속성을 설정하는 것이 아니더라도
리액트에서 속성 객체를 줄 것입니다
거의 빈 객체일 것 입니다
사실 완전 비워진 것은 아닙니다
항상 받는 속성이 하나 있는데
특별한 내장 children prop입니다
리액트에서 설정한 prop으로
어느 특정한 속성에 의해 설정된 prop이 아닙니다
그러니 children을 이와 같이 설정하지 말아야 합니다
대신 이 children prop은 컴포넌트 텍스트 사이
내용을 의미합니다
따라서 children prop에는 컴포넌트 텍스트 사이에 있는
내용이 포함되어 있습니다
여기 있는 것처럼 단순한 텍스트 일 수도 있지만
필요에 따라 복잡한 JSX 구조가 될 수도 있습니다
이 곳에는 텍스트만 필요합니다
그러므로 이 커스텀 컴포넌트에는
props.children으로 내용을 출력할 수도 있고
객체 구조분해를 사용할 수 있으며
children 속성을 추출해
각자의 변수에 저장할 수 있기 때문에
이렇게 사용할 수 있는 것입니다
저장하면 보이는 것과 같이
이 곳에Components라는 텍스트가 보이고
클릭이 가능한 버튼이라는 것도 보입니다
물론 클릭을 해도 지금은 아무것도 하지 않지만
클릭이 가능한 버튼입니다
Components 문구가 잘 보이기 때문에
children prop이 작동된다는 것이 확실해졌습니다
컴포넌트가 다른 컴포넌트나 내용을
감싸서 이렇게 컴포넌트를 구축하는 것을
컴포넌트 합성이라고 합니다
이 방법은 이렇게 컴포넌트를
사용하는 것이 아닙니다
대신, 여러분의 정확한 사용 사례에 달려 있습니다
CoreConcept 컴포넌트의 경우
마크업에 주입하는 데이터 조각만
있으면 되기 때문에 컴포넌트의
다른 부분을 구성하는
여러 속성을
받는 것이 합리적이었습니다
반면에 TabButton은
버튼을 이렇게 사용하는 것이
일반적이어서 더 편리하고 익숙해서
이 방법을 사용하는 것이
더 타당하게 느껴질 수 있습니다
이렇게 label 속성을 추가하고
label 속성을
TabButton 안에서 사용하는 등
다른 방식을 사용할 수도 있습니다
이렇게 할 수도 있습니다
label props를 변경 후
저장하면
이전과 같은 결과가 나옵니다
결국 두 방법 모두 사용할 수 있고
서로가 더 나은 방법이 아닙니다
결국 개인이 선호하는 것에 달려있고
실제 프로젝트에는 두 방법 모두 볼 수 있기 때문에
두 방법 모두 알아야합니다
이 방법이 사용하기
더 쉽거나
리액트를 사용하지 않았다면
작성하는 HTML 코드에
더 유사하다든가에 따라
방법을 정할 수 있습니다
그러므로 여기선 children prop과
이 구성 방식을 사용할 것이지만
두 방법 모두 타당합니다
이렇게 첫 번째 버튼이 생성되었습니다
이제 더 많은 버튼을 빠르게 추가할 수 있고
JSX 관련 버튼
Props 관련 버튼
State 관련 버튼도 만들 수 있습니다
참고로 State(상태)는 나중에
배울 개념 중 하나입니다