Props ?

제동현·2023년 1월 30일

React

1.Props란

2.memo

3.propTypes

1.Props란

뭔 게시글 작성이 이렇게 어렵니..

Props는 Property의 줄임말이며 일종의 방식으로 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다.

먼저 컴포넌트에 쓰이는 인자 이름은 자기 마음대로 정할 수 있다.
예를 들면

<Test apple="wow"/>

이런 이름도 말이다.

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

 function abc(props) {
 }

컴포넌트(props.인자이름) 을 적지만 꼭 이렇게 사용할 필요는 없다.

 function abc(props.apple) {
 return(
 <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize,
          }}
        >
        {props.apple}
 );

대부분의 유저들이 아래 코드와 같이 숏컷 즉 지름길을 사용하기 때문

 function abc({apple}) {
return(
<button
         style={{
           backgroundColor: "tomato",
           color: "white",
           padding: "10px 20px",
           border: 0,
           borderRadius: 10,
           fontSize,
         }}
       >
       {apple}
);

이건 단지 지름길일 뿐이다. props안에 apple 이라는걸 알고 꺼내쓰는것이다.
즉 여기에서 우리는 abc 함수 컴포넌트의 첫 번째 인자인 props 오브젝트로부터 apple을 받아내는것.. 쓰다보니까 굉장히 어렵게 느껴진다.

2. memo

다음은 memo에 대해서 알아보자.

들어가기에 앞서 우리는 리렌더링에 대해서 알아둘 필요가 있다. 리렌더링이라함은 초기에 한번 렌더링을 해주고 특정 조건이 발생하면 화면을 다시 렌더링 해주는 것이다.

리렌더링이 되는 경우는 다음과 같다.

내부 상태(state) 변경시
부모에게 전달받은 값(props) 변경시
중앙 상태값(Context value 혹은 redux store) 변경시
부모 컴포넌트가 리렌더링 되는 경우

    const MemorizedBtn = React.memo(Btn);

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

우리는 prop이 변경되지 않는 한에서 이 컴포넌트가 다시 그려지는 것을 원치않는다는 의미로
React.memo를 사용할 수 있다.

다시말해 prop이 변경되지 않는한에서 리렌더가 되지 않는다.

위 코드의 경우 첫번째 MemorizedBtn의 props는 바뀌나 두번째 MemorizedBtn의 은 바뀌지 않는다. 불필요한 리렌더로 로딩속도나 자원소모를 막기위하여 사용하는 방법이다.

한번 생각해보자 만약 당신이 하나의 컴포넌트를 갖는데 그 컴포넌트가 천개의 컴포넌트에 뿌려준다고하면 천번 리렌더가 일어난다. 상상만해도 무섭지 않은가.

3.PropTypes란

PropTypes이란 우리가 컴포넌트를 다룰때 우리가 알아야만 하는 놈들 중 마지막 놈이다.

props는 컴포넌트 환경을 원하는 어떤 타입이든 설정할 수 있다. text든.. boolean이든 원하는건 다 된다고..

문제는 내가 컴포넌트들을 갖고있는데, 그것들이 매우 많은 props를 가질때 생긴다.

가령 예를 들면 prop에 전송하지 말아야할 것들을 전송한다든가. text prop에 string대신 number를 보낸다던가....

근데 이게 구문상으로는 틀리지 않았기때문에 오류가 안뜬다.

하지만 감사하게도 리액트팀이 만든 PropTypes란 이름의 패키지가 있다.

이거슨 네가 어떤 타입의 prop을 받고 있는지를 체크해준다. 놀라워

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

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