Memo : props가 변경되지 않는 컴포넌트는 re-render 해주지 않는다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({text, changeValue}){ //여기다가 써줘야 됨. 여기 위에 changeValue도 바뀌어야함. 여기 쓰이는 onClick은 이벤트 리스너가 아니라 단지 props일 뿐.
return <button
onClick={changeValue}
style={{
backgroundColor : "tomato",
color: "white",
padding:"10px 20px",
border:0,
borderRadius:10
}}>
{text}
</button>
}
const MemorizedBtn = React.memo(Btn);
function App(){
const [value, setValue] = React.useState("Save Changes")
const changeValue = () => setValue("Revert Changes");
return( //여기 다는 것들은 모두 props. 여기 밑에 changeValue가 바뀌면
<div>
<MemorizedBtn text={value} changeValue={changeValue} />
<MemorizedBtn text="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM .render(<App />, root);
</script>
</html>
