Props 을 이용해 데이터를 부모 컴포넌트에서 자식 컴포넌트로 보내기

1. 함수형 컴포넌트 사용하기

    function SaveBtn() {
      return <button>Save Changes </button>;
    }
    function ConfirmBtn() {
      return <button>Confirm </button>;
    }
    function App() {
      return (
        <div>
          <ConfirmBtn />
          <SaveBtn />
        </div>
      );
    }

위 function 이 컴포넌트가 되고 <div> 안의 <ConfirmBtn/>의 형식으로 사용 된 것은 JSX의 내부라고 함

 

2. 스타일 넣어주기

(1) 태그에 Object 형식으로 넣어주기

        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >

 

(2) 컴포넌트를 사용하여 스타일 설정을 넘겨주기

    function Btn(props) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          {props.banana}
        </button>
      );
    }

    function App() {
      return (
        <div>
          <Btn banana="Save Changes" />
          <Btn banana="Continue" />
        </div>
      );
    }

 

 

(3) 더 간단하게 사용하기

    function Btn({ banana }) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          {banana}
        </button>
      );
    }

 

(3-1) 다른 스타일을 지정하기

    function Btn({ text, big }) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize: big ? 18 : 16,
          }}
        >
          {text}
        </button>
      );
    }

    function App() {
      return (
        <div>
          <Btn text="Save Changes" big={true} />
          <Btn text="Continue" big={false} />
        </div>
      );
    }