React JS / Render 방식

1. 아래 함수에서 [value, setValue] 는 value=Defult , setValue=함수 로 이뤄져있다.

2. 만약 부모에 어떤 state 변경이 있다면, 모든 자식들은 Re-render가 된다.

(value or setValue에 변경이 생긴다면 return 값이 모드 Re-render가 되는것을 이해한다. 그리고 이 특성이 추후 어플리케이션 속도가 느려지는 원인이 될 수 있다. 아래는 2개의 MemorizedBtn Components 가 있지만 천개의 Components가 있다면 이것들을 Render할 필요가 없음에도 자동 Render시키기 때문에 속도 저하의 원인이 된다.)

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

아래 React.memo()는 만약 위 부모 Components에서 props이 변경되지 않는다면  Re-render 하지 말라는 명령이다.

const MemorizedBtn = React.memo(Btn);

React JS 팀은 propTypes 또한 제공하는데 아래와 같이 string, number 를 잘못 입력되면 경고하는 설정을 할 수 있다.

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