Attribute props VS Children props

Attribute props

import TabButton from "./components/TabButton";

function App() {
  return (
    <div>
      
      ...
      
        <TabButton label="Components">
          
      ...
      
    </div>
  );
}

export default App;

- App.jsx에서 TabButton 컴포넌트에 label이라는 props를 정의하고 "Components"라는 값을 할당했다.

 

export default function TabButton({ label }) {
  return (
    <li>
      <button>{label}</button>
    </li>
  );
}

// 또는

export default function TabButton(props) {
  return (
    <li>
      <button>{props.label}</button>
    </li>
  );
}

- TabButton.jsx 에서의 사용은 위와 같다.

---

Children Props

import TabButton from "./components/TabButton";

function App() {
  return (
    <div>
      
      ...
      
        <TabButton>Components</TabButton>
          
      ...
      
    </div>
  );
}

export default App;

- App.jsx에서 열리는 TabButton 컴포넌트 태그와 닫히는 태그 사이에 "Components"라는 값을 할당했다.

 

export default function TabButton({ children }) {
  return (
    <li>
      <button>{children}</button>
    </li>
  );
}

// 또는

export default function TabButton(props) {
  return (
    <li>
      <button>{props.children}</button>
    </li>
  );
}

- TabButton.jsx 에서의 사용은 위와 같다.