Props로 데이터 전달하기

// App.jsx 

import "./App.css";
import Header from "./components/Header"; // 확장자 안 써도 됨
import Main from "./components/Main";
import Footer from "./components/Footer";
import Button from "./components/Button";

// props는 부모 컴포넌트 -> 자식 컴포넌트 전달만 가능
// 부모 컴포넌트
function App() {
  const buttonProps = {
    text: "메일",
    color: "red",
    a: 1,
    b: 2,
    c: 3,
  };
  return (
    <>
      <Button {...buttonProps} />
      <Button text={"카페"} color={"green"} />
      <Button text={"블로그"}>
        <div>자식요소</div>
      </Button>
      <Button text={"치지직"}>
        <Header />
      </Button>
    </>
  );
}

export default App;

// Button.jsx

// const Button = (props) => {
//   // props는 객체 형태로 들어옴
//   console.log(props);
//   return (
//     <button style={{ color: props.color }}>
//       {props.text} - {props.color.toUpperCase()}
//     </button>
//   );
// };

const Button = ({ text, color, children }) => {
  return (
    <button style={{ color: color }}>
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

// toUpperCase() 할때 props.color에 undefined가 오면 오류가 발생하므로 defaultProps 설정
Button.defaultProps = {
  color: "black",
};
export default Button;

[참고]

defaultProps는 더 이상 사용되지 않습니다.

올해말 즈음 새롭게 공개될 React 19 버전부터는 defaultProps의 사용이 중지됩니다.

이에 현재 수강하고 계신 분들께는 경고 메세지가 출력될 수 있습니다. (지금은 무시하셔도 괜찮습니다)

19 버전이 정식으로 업데이트 되고 나면 다음과 같이 defaultProps를 대체하실 수 있습니다.

const App = ( {data = '기본값} ) => { ... }

---

//Header.jsx

// 함수 컴포넌트 (자식 컴포넌트)
const Header = () => {
  return (
    <header>
      <h1>header</h1>
    </header>
  );
};

export default Header;