hyungju-lee

33. 컴포넌트 타입 동적으로 설정하기

function Tabs({ children, buttons, ButtonsContainer }) {
    // const ButtonsContainer = buttonsContainer;
    return (
        <>
            <ButtonsContainer>
                {buttons}
            </ButtonsContainer>
            {children}
        </>
    )
}

export default Tabs

import { useState } from "react";
import Tabs from "./Tabs";

function Examples() {
    const [selectedTopic, setSelectedTopic] = useState("components");
    let tabContent = <p>Please select a topic.</p>;
    if (selectedTopic) {
        tabContent = (
            <div id="tab-content">
                <h3>{EXAMPLES[selectedTopic].title}</h3>
                <p>{EXAMPLES[selectedTopic].description}</p>
                <pre>
                    <code>
                        {EXAMPLES[selectedTopic].code}
                    </code>
                </pre>
            </div>
        )
    }
    
    function handleSelect(selectedButton) {
        setSelectedTopic(selectedButton);
    }
    
    return (
        <>
            <Tabs
                ButtonsContainer="ul"
                buttons={
                <>
                    <TabButton
                        isSelected={selectedTopic === 'components'}
                        onSelect={() => handleSelect('components')}
                    >
                        Components
                    </TabButton>
                    <TabButton
                        isSelected={selectedTopic === 'jsx'}
                        onSelect={() => handleSelect('jsx')}
                    >
                        JSX
                    </TabButton>
                    <TabButton
                        isSelected={selectedTopic === 'props'}
                        onSelect={() => handleSelect('props')}
                    >
                        Props
                    </TabButton>
                    <TabButton
                        isSelected={selectedTopic === 'state'}
                        onSelect={() => handleSelect('state')}
                    >
                        State
                    </TabButton>
                </>
            }>
                {tabContent}
            </Tabs>
        </>
    )
}
  • buttonsContainer={Section} 이렇게 내장 컴포넌트가 아닌 커스텀 컴포넌트도 사용할 수 있다.
    • Section은 커스텀 컴포넌트 함수여야만 한다. (함수 호출 X)
    • 위의 코드를 보면 <></> 프래그먼트 컴포넌트로 감싸져있는 컴포넌트를 넘기지도 않는다.
    • 함수 이름만 사용하여 커스텀 컴포넌트의 식별자를 속성의 값으로 넘기고 있다.
      • 문자열 식별자를 사용한 이유는 내장 태그인 menu를 사용하기 위해서이다.