컴포넌트의 props가 바뀌지 않았다면 리렌더링 되는것을 방지하여 컴포넌트의 성능을 최적화 할 수 있도록 해줌.
React.memo()로 컴포넌트를 감싸면, 리액트는 컴포넌트를 메모리제이션 하고 불필요한 렌더링은 건너뜀.
Dom의 업데이트를 결정할 때, 리액트는 컴포넌트를 처음으로 렌더링하고, 이전 렌더 결과와 비교를 할 것이다. 만약 렌더 결과가 다르다면 리액트는 돔을 업데이트.
memo 구문은 다음과 같다
React.memo(컴포넌트)
예제 소스
function Btn({btnText, changeValue, fontSize}){
return(
<button
onClick={changeValue}
style={{
backgroundColor : "tomato",
color : "white",
padding:"10px 20px",
border : 0,
borderRadius : 10,
fontSize : fontSize
}}>{btnText}</button>
)
}
const MemorizedBtn = React.memo(Btn);
function App() {
const [value, setValue] = React.useState("Save Change");
const changeValue = () => setValue("Revert Change");
return(
<div>
<Btn btnText={value} changeValue={changeValue} fontSize={18}/>
<Btn btnText="Continue"/>
</div>
);
};
const root = document.querySelector("#root");
ReactDOM.render(<App/>, root);