[React] props와 prop types, 그리고 React.memo

1. props와 eventListener

---

📌 component 속 props와 HTML 요소 속 eventListner의 차이를 이해해보자!

function App() {
  const [value, setValue] = React.useState("Save Changes");
  const changeValue = () => setValue("Revert Changes");
  return (
    <div>
      <Btn text={value} changeValue={changeValue} />
      <Btn text="Continue" />
    </div>
  );
}

1. props로 text나 boolean은 물론이고, changeValue와 같은 function도 가능하다❗
   
   
2. 컴포넌트에서 changeValue가 eventListener 역할을 하는가❓
   • 위 코드에서 changeValue는 Btn의 prop이며, 실제 eventListener가 아니다.
   • 따라서 HTML 요소에도 이 이벤트를 적용시켜주어야 한다. (아래의 코드와 같이)

function Btn({ text, changeValue }) {
  return (
    <button
      onClick={changeValue}
      style={{
        // 생략
      }}
    >
      {text}
    </button>
  );
}

😎 기억할 것

props에 값을 넣는다고 하여 return 안의 HTML 요소에 자동적으로 들어가지 않는다.

2. prop types

---

🔨 설치 및 설정

(1) 설치

// PropTypes
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>

// 첫번째 script source도 아래로 바꾸어줄 것 (버전)
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js "></script>

(2) 설정

// 리액트에 propTypes 설명하기
Btn.propTypes = {
  text: PropTypes.string,
  fontSize: PropTypes.number,
};

✅ .isRequired

📌 필수 prop으로 인식하는 것을 도와줌

Btn.propTypes = {
  text: PropTypes.string.isRequired,
  fontSize: PropTypes.number.isRequired,
};

component가 text와 fontSize이 두가지 props만은 정확히 갖고 render되게 해준다.

💖 좋은 점

function App() {
  return (
    <div>
      <Btn text="Save Changes" fontSize={18} />
      <Btn text={14} fontSize={"Continue"} />
    </div>
  );
}

propTypes를 설치❌

1. 원하는 props의 type
   • props로 text에는 text값을, fontSize에는 숫자값을 넣어주고자 한다.
2. Error 표시되지 않음
   • 문법적으로 틀린 내용이 없기 때문에 error가 표시되지 않는다.

propTypes를 설치⭕

아래와 같이 console을 통해 오류를 확인할 수 있다.

3. React Memo

---

📌 컴포넌트의 props가 변하지 않는다면, 리렌더링을 방지하여 줄 수 있는 함수

• 부모 component에 어떤 state라도 변경이 생기면, 그 부모의 모든 자식들은 re-render된다. 이는 추후 애플리케이션이 느려지는 원인이 될 수 있기에 React.memo를 사용한다.

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>
  );
}

🔎 언제 쓰이는걸까?

1. 상황
   • 변하지 않는 Cointinue 버튼을 리렌더링 시키고 싶지 않다.
     
     
2. 해결
   • props가 변경되지 않는 한에서 React.memo를 사용하여 component를 리렌더링 할지말지를 내가 결정할 수 있다

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>
  );
}