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

13920 단어 ReactReact

1. propseventListener


📌 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/[email protected]/prop-types.js"></script>

// 첫번째 script source도 아래로 바꾸어줄 것 (버전)
<script src="https://unpkg.com/[email protected]/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>
  );
}

좋은 웹페이지 즐겨찾기