[React] React.memo()

컴포넌트가 재사용 되어 여러개 그려져 있다면 렌더링 할때마다

바뀌지 않아도 되는것들이 다같이 다시 렌더링 되게 된다

 

이는 추후 어플리케이션이 느려지는 원인이 될수 있기 때문에 필요한 부분만 렌더링 시켜줄수 있는

React.memo(  )를 사용하면 된다.

 

props가 변경되지 않는다면 다시 그릴 필요가 없다고 인식한다.

 

 

function Btn({ text, big, changeValue }) {
     return (
        <button
          onClick={changeValue}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize: big ? 18 : 16,
          }}
        >
          {text}
        </button>
      );
    }
    const MemorizedBtn = React.memo(Btn);
    function App() {
      const [value, setValue] = React.useState("Save Change");
      const changeValue = () => setValue("Revert Changes");
      return (
        <div>
          <Btn text={value} big="true" changeValue={changeValue} />
          <Btn text="Continue" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);

 

 

 const MemorizedBtn = React.memo(Btn);

 

컴포넌트를 React.memo( )로 래핑한다. 그럼 props가 변경되지 않고 그대로라면 렌더링이 불필요한건 일어나지 않고 

이전 값을 그대로 재사용한다.