[React 기초] Props

Props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 보내는 방식이다.

예를 들어 동일한 스타일의 버튼 여러개를 생성할 때 하나의 버튼 컴포넌트를 생성하고 데이터를 props로 받으면 쉽게 재사용 할 수 있다.

 

컴포넌트

props는 컴포넌트의 첫번째이자 유일한 인자이다.

props에 여러개의 데이터를 모두 포함시키면 데이터는 오브젝트 형식으로 담아지게 된다.

 

컴포넌트 내에서 데이터를 불러올 때는 props.특정값 으로 사용할 수 있지만

처음부터 props 중에서 특정 값만 가져오고 싶다면 Btn(props) 대신 Btn ({ 특정값 })라고 하면 된다.

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

 

props로 받는 함수

props에는 다양한 string, boolean값은 물론 function까지 담을 수 있다.

props로 전달된 함수는 이벤트 리스너로 작동되는 함수와는 완전히 다른 것이다.

함수를 컴포넌트의 props로 넣는다고 실제 html 태그에 들어가는 것은 아니기 때문에 따로 설정을 해주어야 한다.

 

불필요한 리렌더링 방지 : React.memo()

부모 컴포넌트의 state를 변경하면 새롭게 리턴되기 때문에 자식 컴포넌트들 전부 리렌더링 된다.

이때 어떤 자식 컴포넌트는 props가 동일한데도 불필요한 리렌더링을 겪을 가능성이 있으므로 React.memo()를 사용한다.

React memo()를 사용하면 React가 컴포넌트의 랜더링 결과를 기억하여 리렌더링 할 때 컴포넌트의 props가 변경되지 않으면 re-render 시키지 않는다.

 

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

 

PropTypes

에러를 줄이기 위해 컴포넌트별로 props의 형식을 지정할 수 있다.

필수로 있어야 하는 값에는 isRequired를 붙일 수 있고, 컴포넌트 선언할 때 부터 초기값을 설정해줄 수도 있다.

    Btn.propTypes = {
      text: PropTypes.string.isRequired,
      changeValue: PropTypes.func,
    };