<div id="root">
<!-- Element 들어갈 부분 -->
</div>
// Btn
function Btn({ text, changeValue }) {
console.log(text, "was rendere");
return (
<button
onClick={changeValue}
style={{
backgroundColor:"tomato",
color:"white",
padding:"10px 20px",
border:0,
borderRadius:10
}}>
{text}
</button>
);
}
const MemorizedBtn = React.memo(Btn);
// App
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<MemorizedBtn text={value} changeValue={changeValue} />
<MemorizedBtn text="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
View Compiled
This Pen doesn't use any external CSS resources.