props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 보낼 수 있는 방법이다.

검포넌트의 설정을 넘겨주는 상황일ㄸ ㅐ어떻게 해얗 ㅏㄹ까?

<script type="text/babel">
    const SaveBtn = () => {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: "0px",
            borderRadius: "10px",
          }}
        >
          Save Changes
        </button>
      );
    };
    const ConfirmBtn = () => {
      return <button style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: "0px",
            borderRadius: "10px",
          }}>Confirm</button>;
    };
    const App = () => {
      return (
        <div>
          <SaveBtn />
          <ConfirmBtn />
        </div>
      );
    };
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>

같은 속성을 넣기위해서 복붙을해야한다.

<script type="text/babel">
    const Btn = () => {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: "0px",
            borderRadius: "10px",
          }}
        >
          Save Changes
        </button>
      );
    };
    const App = () => {
      return (
        <div>
          <Btn />
          <Btn />
        </div>
      );
    };
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>

Btn하나로 버튼 속성을 같게한걸 만들었다.

const Btn = (props) => {
      const text = props["text"];
      console.log(props);
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: "0px",
            borderRadius: "10px",
          }}
        >
          {text}
        </button>
      );
    };
    const App = () => {
      return (
        <div>
          <Btn text="Save Changes" />
          <Btn text="Continue" />
        </div>
      );
    };
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>

tag 컴포넌트에 속성을 지정해서 설저하면 함수 컴포넌트에 인수로 전달된다.

Btn(props)으로 쓰는대신에 js에서 이수를 오브젝트로 전달하는것처럼 Btn({text})이렇게 전달해도 된다. 이런걸 shortcut이라고 한다. 요소를 오브젝트로부터 꺼내올 수 있는 방법

const Btn = ({ text, fontBig }) => {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: "0px",
            borderRadius: "10px",
            fontSize: fontBig ? "12px" : "16px",
          }}
        >
          {text}
        </button>
      );
    };
    const App = () => {
      return (
        <div>
          <Btn text="Save Changes" fontBig={false} />
          <Btn text="Continue" fontBig={true} />
        </div>
      );
    };

fontBig이라는 추가옵션으로 스타일에도 적용시킬 수 있다.

<script type="text/babel">
    const Btn = ({ pText, pOnClick }) => {
      return (
        <button
          onClick={pOnClick}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: "0px",
            borderRadius: "10px",
          }}
        >
          {pText}
        </button>
      );
    };
    const App = () => {
      const [value, setValue] = React.useState("Svae Change");
      const changeValue = () => setValue("Revert Changes");
      return (
        <div>
          <Btn pText={value} pOnClick={changeValue} />
          <Btn pText="Continue" />
        </div>
      );
    };
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>

props로 함수로도 전달 할 수 있다

<aside> 📌 함수 컴포넌트로 html 태그도 만들 수 있고 필요한 속성을 js 방식으로 설정도 가능한 디자인 이다.

</aside>

위에 문제점을 보면 continue Btn이 Save Change가 리랜더링 될때 같이 된다는 점이다. 데이터 변화가 없음에도!

<script type="text/babel">
    const Btn = ({ pText, pOnClick }) => {
      console.log(pText, "was rendered");
      return (
        <button
          onClick={pOnClick}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: "0px",
            borderRadius: "10px",
          }}
        >
          {pText}
        </button>
      );
    };
    const MemorizeBtn = React.memo(Btn);
    const App = () => {
      const [value, setValue] = React.useState("Svae Change");
      const changeValue = () => setValue("Revert Changes");
      return (
        <div>
          <MemorizeBtn pText={value} pOnClick={changeValue} />
          <MemorizeBtn pText="Continue" />
        </div>
      );
    };
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>

React에서 prop가 변경되지 않는다는 한에서 리랜더링 target을 설정할 수 있다. 그리고 그 설정을 react memo(memorize)라는 기능으로 할 수 잇다. memo는 컴포넌트를 렌더링하지 않고 이전 렌더링된 결과를 비교하여 재사용한다.

react는 props가 어떠한 type을 받는지 앓지 못한하다 그래서 propType을 이용해서 prop가 어떠한 type을 받는지 알게 해준다.