[React.js] 부모 컴포넌트에서 자식 컴포넌트로 요소 넘기는 방법

부모 컴포넌트에서 자식 컴포넌트로 요소 넘기는 방법

들어가며

• 리액트에서 부모 컴포넌트에서 자식 컴포넌트로 요소를 넘기는 방법을 알아보자.

 

방법

• 부모 컴포넌트에서 자식 컴포넌트로 넘길 요소의 타입을 지정할 수 있는데, @string@ 형태로 지정해주면 된다.
• 이떄, @prop@ 이름의 첫 글자는 항상 대문자이어야 한다.

App.jsx

• @ButtonsContainer@ @prop@을 @"menu"@로 지정해보았다.

return (
    <Section id="examples" title="Examples">
      <Tabs
        ButtonsContainer="menu"    {/* here */}
        buttons={
          <>
            <TabButton
              isSelected={selectedTopic === "components"}
              onClick={() => handleSelect("components")}
            >
              Components
            </TabButton>
            <TabButton
              isSelected={selectedTopic === "jsx"}
              onClick={() => handleSelect("jsx")}
            >
              JSX
            </TabButton>
            <TabButton
              isSelected={selectedTopic === "props"}
              onClick={() => handleSelect("props")}
            >
              Props
            </TabButton>
            <TabButton
              isSelected={selectedTopic === "state"}
              onClick={() => handleSelect("state")}
            >
              State
            </TabButton>
          </>
        }
      >
        {tabContent}
      </Tabs>
    </Section>
  );
}

 

Tabs.jsx

• @ButtonsContainer@ 부분은 부모 컴포넌트에서 전달 받은 @menu@로 지정된다.

export default function Tabs({ children, buttons, ButtonsContainer }) {
  return (
    <>
      <ButtonsContainer>{buttons}</ButtonsContainer>
      {children}
    </>
  );
}

 

주의 사항

• 요소의 타입을 전달하는 @prop@의 첫 글자는 항상 대문자이어야 한다.

 

커스텀 컴포넌트 넘기기

• 만약 커스텀 컴포넌트를 넘기려면 커스텀 컴포넌트명만 전달해준다.

 <Tabs
      buttonsContainer={Section}    // Section 커스텀 컴포넌트 넣기
      buttons={
  	...
  />