ReactJS/Properties

const Btn = ({ text, changeValue }) => {
      console.log(text, "was rendered");
      return (
        <button
          onClick={changeValue}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          {text}
        </button>
      );
    };
    const App = () => {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => {
        setValue("Revert Changes");
      };

      return (
        <div>
          <Btn text={value} changeValue={changeValue} />
          <Btn text="Continue" />
        </div>
      );
    };

Parent element인 App()에서 Child element에게 properties를 전달할 수 있다.

<Btn / >의 경우 직접 생성한 custom element이므로 실제 Html Tag가 아니다. 따라서, custom element안에는 원하는 이름으로 마음껏 property를 생성할 수 있다.

또한, onClick={onClick}과 같이 적는다고 해도 그건 함수가 아니라 그저 하나의 property일 뿐이며, banana={true}처럼 이름은 상관이 없다.

제일 상단에
const Btn = ({ text, changeValue }) => 에서 볼 수 있듯이 props를 {}를 사용해 열고 parent element에서 전달해준 properties를 바로 가져와 적어주는 형태로 많이 사용한다.