[React] 7. 리액트 스터디 - Props / memo / PropTypes

리액트 스터디

[React] 7. 리액트 스터디 - Props / memo / PropTypes

더밸류(THEVALUE) 2023. 1. 2. 09:45

[ Props ]

부모 컴포넌트로 부터 자식 컴포넌트로 전달되는 object 형태의 파라미터를 말하며,

공통으로 만들 버튼 등의 자식 컴포넌트를 작성한 후 파라미터로 props를 전달 받아

버튼 텍스트 등 서로 달라지는 값들만 체크하여 각각의 컴포넌트를 화면에 출력한다.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- 1. 라이브러리 (CDN)  -->
  <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.development.js"></script>
  <!-- Load Babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <title>리액트 스터디중</title>
</head>

<body>
  <!-- 2. 출력 영역 지정  -->
  <div id="display"></div>

  <!-- 3. 화면에 출력될 내용 -->
  <script type="text/babel">
    const root = document.getElementById("display");
    // function Btn(props) { 
    // props 는 object 형태로 전달됨
    // props = { banana: 'xxx' }
    function Btn({ banana, big }) {
      return (
      	<button style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border:0,
            borderRadius: 10,
            fontSize: big ? 18 : 16
          }}
          >
          {banana}
          </button>
      );
    }

    function App() {
      return (
        <div>
          <Btn banana="Save Changes" big={true} />  
          <Btn banana="Continue" big={false} />
        </div>
      )
    }
    ReactDOM.render(<App />, root);
  </script>
</body>

</html>

[ memo ]

컴포넌트의 이벤트가 발생하거나 값이 변경되지 않는 컴포넌트에 대해서 리랜더링을 하지 않기 위해서

사용하는 문법

아래 코드의 Btn 2개의 컴포넌트 중 props 가 고정되어 있는 경우 / 변경되지 않는 경우의 2번째 컴포넌트는

이벤트 발생 후에도 리랜더링이 되지 않아서 메모리 등의 자원을 낭비하지 않을 수 있다.

React.memo()

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>리액트 스터디중</title>
</head>

<body>
  <!-- 2. 출력 영역 지정  -->
  <div id="display"></div>
</body>

<!-- 1. 라이브러리 (CDN)  -->
<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.development.js"></script>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  const root = document.getElementById("display");
  // function Btn(props) { 
  // props 는 object 형태로 전달됨
  // props = { banana: 'xxx' }
  function Btn({ banana, changeValue }) {
    return (
      <button 
        onClick={changeValue}
        style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "10px 20px",
        border:0,
        borderRadius: 10,
      }}
      >
      {banana}
      </button>
    );
      
  }

  const MmorizedBtn = React.memo(Btn);
  function App() {
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Revert Changes");
    return (
      <div>
        <MmorizedBtn banana={value} changeValue={changeValue} />  
        <MmorizedBtn banana="Continue" />
      </div>
    )
  }
  ReactDOM.render(<App />, root);
</script>

</html>

[ PropTypes ]

자식 컴포넌트로 전달되는 prop의 값의 타입이 부정확한 경우를 체크하기 위해서 사용

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>리액트 스터디중</title>
</head>

<body>
  <!-- 2. 출력 영역 지정  -->
  <div id="display"></div>
</body>

<!-- 1. 라이브러리 (CDN)  -->
<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.development.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  const root = document.getElementById("display");
  // function Btn(props) { 
  // props 는 object 형태로 전달됨
  // props = { text: 'xxx' }
  function Btn({ text, changeValue, fontSize = 20 }) { // prop 값을 디폴트 값을 지정할 수 있음 
    return (
      <button 
        onClick={changeValue}
        style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "10px 20px",
        border:0,
        borderRadius: 10,
        fontSize
      }}
      >
      {text}
      </button>
    );
  }

  // propTypes 설정으로 전달된 prop 의 각각의 타입이 정확한지 체크할 수 있음
  Btn.propTypes = {
    text: PropTypes.string.isRequired, // 필수 요건으로 isRequired를 사용
    fontSize: PropTypes.number
  }

  const MemorizedBtn = React.memo(Btn);
  function App() {
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Revert Changes");
    return (
      <div>
        <MemorizedBtn text={value} changeValue={changeValue} />  
        <MemorizedBtn text="Continue" fontSize={14} />
      </div>
    )
  }
  ReactDOM.render(<App />, root);
</script>

</html>