React - Props로 데이터 전달하기

App.jsx

import "./App.css";
import Header from "./components/Header";
import Button from "./components/Button";

function App() {
  const buttonProps = {
    text: "메일",
    color: "red",
    a: 1,
    b: 2,
    c: 3,
  };

  return (
    <>
      <Button {...buttonProps} />
      <Button text={"카페"} />
      <Button text={"블로그"}>
        <div>자식 요소</div>
        <Header />
      </Button>
    </>
  );
}

export default App;

Button.jsx

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

export default Button;

1. 단순한 text, color 뿐만 아니라 다른 컴포넌트도 전달할 수 있다. ⇒ <Header/>
2. 객체형태로 props를 전달할 수 있다. ⇒ buttonProps와 같이 속성들을 스프레드 연산자(…buttonProps)로 넘길 수 있다.

 

 

 

 

인프런 이정환 강사님 강의를 참고해서 정리했습니다. 링크

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런