[React 기초] 03. Props

Props

• 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있는 방법
• 스타일을 저장한 컴포넌트를 재사용할 수 있다면?
• 함수형태로 만든 컴포넌트에 인자 props를 전달 가능
• props는 object형태로 받아서 props.property 형태로 인자 전달 가능

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

JS 문법을 이용해서 props 부분 짧게 쓰는 방법

function Btn({ potato }) {
  return <button> {potato} </button>;
}

응용

function Btn({text, big})
  return (
    <button
    style={{
      fontSize: big ? 18: 10,
      }}
    >
      {text}
    </button>;
  )
function App() {
  return (
    <div>
      <Btn text="Save Changes" big={true}/>
      <Btn text="Continue" big={false}/>
    </div>
  );
}

내가 직접 만든 컴포넌트에 준 props 값은 return 값에 자동으로 들어가는 것이 아님!
내가 만든 Btn에 onClick 이벤트를 추가하려면, 실제로는 props.onClick 속성 값으로 들어감
따라서 실제 return 값에 있는 button 태그에 onClick 이벤트를 추가하고
props.onClick 값을 추가해줘야 함

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

---

memo

바뀌는 것만 render 하기
전체를 re-render하는 것이 아니라 컴포넌트의 변경점이 있는 컴포넌트만 re-render할 수 있다

const MemorizedBtn = React.memo(Btn);

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

---

PropTypes

Proptypes package는 어떤 타입의 props을 받고 있는지 체크할 수 있다
전체적인 버전에 따라서 작동 여부가 달라지는 것 같다

아래 버전으로 했을 때 정상 작동되는 것을 확인했음

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>

function Btn({ text, fontSize = 16 }) {
  return (
    <button
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "10px 20px",
        border: 0,
        borderRadius: "10px",
        fontSize,
      }}
    >
      {text}
    </button>
  );
}
Btn.propTypes = {
  text: PropTypes.string.isRequired,
  fontSize: PropTypes.number,
};
function App() {
  return (
    <div>
      <Btn text="Save Changes" fontSize={18} />
      <Btn text={18} fontSize={"continue"} />
    </div>
  );
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);