Props & Prop Type란 무엇인가

📌 Props

Props는 함수에 전달되는 인자를 의미한다. 

function SaveBtn() {
  return (
    <button
      style={{
        backgroundColor: "green",
        color: "white",
        padding: "10px 20px",
        border: 0,
        borderRadius: 10,
      }}
    >
      SAVE
    </button>
  );
}
function ConfirmBtn() {
  return (
    <button
      style={{
        backgroundColor: "green",
        color: "white",
        padding: "10px 20px",
        border: 0,
        borderRadius: 10,
      }}
    >
      CONFIRM
    </button>
  );
}

버튼이 여러 개일 경우, 중복되는 속성이 생기고 코드 중복으로 인해 불편함이 커진다.
props를 이용하여 하나의 버튼만을 생성한 후, text만 바꾸어 사용하는 방식이 더 편리하다.

function Btn(props) {
  console.log(props);
  return (
    <button
      style={{
        backgroundColor: "green",
        color: "white",
        padding: "10px 20px",
        border: 0,
        borderRadius: 10,
      }}
    >
      {props.btn}
    </button>
  );
}
function App() {
  return (
    <div>
      <Btn btn="Save Changes" />
      <Btn btn="Continue"/>
    </div>
  );
}

props로 object 형태로 다양한 값을 받아올 수 있고, props.btn과 같은 형태로 활용이 가능하다.
object 형태로 받아오는 것이 아닌, {btn}처럼 중괄호에 담아서 인자로 받아오면 곧바로 활용할 수 있다. (shortcut)

function Btn({btn}) {
  console.log();
  return (
    <button
      style={{
        backgroundColor: "green",
        color: "white",
        padding: "10px 20px",
        border: 0,
        borderRadius: 10,
      }}
    >
      {btn}
    </button>
  );
}
function App() {
  return (
    <div>
      <Btn btn="Save Changes" />
      <Btn btn="Continue"/>
    </div>
  );
}

참고로 오로지 인자로 값을 넘겨주는 것일 뿐이기 때문에, onChange와 같은 이벤트리스너를 설정하거나, style을 설정해도 버튼에는 아무런 변화를 줄 수 없다.
 

📌Memo

이전에 바닐라JS와 ReactJS에서의 비교를 통해 ReactJS는 필요한 부분만 렌더링할 수 있는 점이 장점이라고 했는데,
불필요한 부분이 렌더링되는 경우엔, 이 Memo를 통해서 설정해줄 수 있다.

function Btn({ text, onClick }) {
  console.log(text, "렌더링 됨");
  return <button onClick={onClick}>{text}</button>;
}

function App() {
  const [value, setValue] = React.useState("SAVE");
  const changeValue = () => setValue("CHANGE");
  return (
    <div>
      <Btn text={value} onClick={changeValue} />
      <Btn text="CONTINUE" />
    </div>
  );
}

먼저, SAVE와 CONTINUE 버튼이 렌더링 된다. 그 후에 SAVE 버튼을 클릭 하면, state인 value의 변화로 App 컴포넌트가 재렌더링되어 CHANGE 버튼이 렌더링된다. 그러나, 불필효한 CONTINUE 버튼도 렌더링이 된다.

이럴 때, React의 Memo 기능을 사용하여 최적화해줄 수 있다.

const MemorizedBtn = React.memo(Btn);
function App() {
  const [value, setValue] = React.useState("SAVE");
  const changeValue = () => setValue("CHANGE");
  return (
    <div>
      <MemorizedBtn text={value} onClick={changeValue} />
      <MemorizedBtn text="CONTINUE" />
    </div>
  );
}

memo를 통해 기억하여 props가 변동된 경우에만 렌더링될 수 있도록 하면, 과거의 버튼을 기억해두고 필요한 부분만 렌더링되며, 이처럼 불필효한 컴포넌트를 그리지 않아 최적화를 할 수 있다.
 

📌Props Type

다시 Props로 돌아와서, Props가 너무 많아서 잘못된 실수로 인해 값이 잘 전달이 되지 않는 경우가 발생할 수 있다.
이럴 때, propTypes를 사용하여 Props에 대한 정보를 미리 설정해주도록 하자.

Btn.propTypes = {
  text: PropTypes.string,
  fontSize: PropTypes.number,
};
function App() {
  return (
    <div>
      <Btn text={"SAVE"} fontSize={18} />
      <Btn text={18} fontSize={"CONTINUE"} />
    </div>
  );
}

그럼 잘못된 props가 있는 경우, Warning이 발생하여 타입에 맞지 않은 값은 아닌지, 꼭 필요한 인자인지를 체크할 수 있게 된다.
 
 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders