React props2

props에 String value, boolean value, numbers, 글고 함수까지 넣을 수 있다.

function Btn(props) {
      console.log(props);
      return (
        <button
          onClick ={} // 여따 넣으면 eventListener가 되는거.
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize: normal,
          }}
        >
          {props.text}
        </button>
      );
    }

    function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => setValue("Revert Changes");
      return (
        <div>
          <Btn text={value} onClick={changeValue} /> 
        /* 여따 넣음 내 개인 컴포넌즈에 props으로 커스텀하는거임 ^^ㅎ 
        props 이름으로 onClick을 정했을 뿐 ㅋ 브라우저에 아무리 클릭을했어도. 
        전혀 작동하지 않는다는 말.*/
          <Btn text={value} />
        </div>
      );
    }

만약 props으로 커스텀한 onClick을 정말 eventListener 로 쓰고싶다면 ? 인자를 넘겨 받으면 되는거.

function Btn(text, onClick) {
      return (
        <button
          onClick ={onClick} //요로케!
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize: normal,
          }}
        >
          {props.text}
        </button>
      );
    }