props에 함수를 전달 할 수 있음
<!DOCTYPE html>
<html lang="ko">
<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">
const root = document.getElementById("root");
function Btn({text, changeValue}) {
console.log(text , "was rendered")
return (
<button
onClick = {changeValue}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
radius: "999px",
border: "none",
borderRadius: "999px",
fontSize: 16
}}
>
{text}
</button>
)
}
function App() {
const [value, setValue] = React.useState("changeValue");
const changeValue = () => setValue("RevertChange")
return (
<div>
<Btn text={value} changeValue = {changeValue}/>
<Btn text="Continue" />
</div>
);
}
ReactDOM.render(<App />, root)
</script>
</html>
-> 하지만.. 바꾸는 부분은 첫번째 버튼인데
버튼 클릭 시 전체를 렌더링 하고 있음
--> Memo 를 사용하면 변하는 부분만 렌더링 할 수 있음
Memo
const MemorizedBtn = React.memo(Btn)
function App() {
const [value, setValue] = React.useState("changeValue");
const changeValue = () => setValue("RevertChange")
return (
<div>
<MemorizedBtn text={value} changeValue = {changeValue}/>
<MemorizedBtn text="Continue" />
</div>
);
}
- 버튼 클릭 시 변한 부분만 렌더링 해주고 있음
- 어플리케이션의 성능을 개선 할 수 있음
그냥 기록용!!!