리액트 MEMO (리랜더링 방지)

리액트 useState를 사용하다보면 더이상 랜더링을 안해도 되는데 계속 렌더링을 리소스를 잡아 먹는경우가 있다 이때 Memo를 사용하면 불필요한 리랜더링을 방지할 수 있다 function Btn({ buttonName, fontSize=12}) { //버튼 컴포넌트 이때 prop은 오브젝트이므로 {값1,값2}이런식으로 써야됨 return ( <button style={{ backgroundColor: "teal", color: "white", padding: "10px 20px", border: 0, borderRadius: "10px", marginRight: "5px", fontSize: fontSize, }} > {buttonName} </button> ); } const MemorizedBtn= React.memo(Btn); //Btn컴포넌트에 리랜더링을 const App = () => { const [value, setValue] =React.useState("Btn na...

원문링크 : 리액트 MEMO (리랜더링 방지)