리액트에서 useState() 매서드를 사용하면,
변화하는 부분만 HTML에서 쏙쏙 빼와 변화시켜준다는 점을 공부한 적이 있다.
그러나 useState의 modifier 함수가 변화할 때 부모 컴포넌트를 모두 변화시키면
조금은(?) 어쩌면 많이 비효율적인 생산 방식으로 빠질 수도 있다.
다음 코드를 살펴보자
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<!-- How to import React(engine) -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!-- How to import React-dom(put elements into HTML) -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!-- How to make browser read JSX syntax (using babel)-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({ text, changeValue }) {
console.log(text, 'was rendered')
return (
<button
onClick={changeValue}
style={{backgroundColor:"tomato", color:"white", padding:"10px 20px", border:0, borderRadius:10,}}
>
{text}
</button>
)
}
// This may remember which one has been changed!
const MemorizedBtn = React.memo(Btn);
function App () {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => {
setValue("Revert Changes");
}
// There is a need to select which components to be changed
// Use React.memo(Btn) to know where the props has been changed!
return (
<div>
<MemorizedBtn text={value} changeValue={changeValue}/>
<MemorizedBtn text="continue"/>
</div>
)
};
// find id="root" from document(HTML)
const root = document.getElementById("root");
// initial render
ReactDOM.render(<App />, root);
</script>
</html>이코드는 완성된 코드지만,
만약 App() 컴포넌트에서 MemorizedBtn을 사용하지 않았다면,
첫 번째 버튼의 property만을 변화하고 싶은 시점에서 두 개의 버튼 모두 변화시켜버리는 현상이 일어날 것이다.
이는 한두개의 버튼만을 이용하여 구현하는 사이트라면 상관없겠지만,
수백 수천개의 버튼을 사용하는 사이트(있을라나,,?)를 생각하면 비효율적일 수 있다.
따라서 React는 memo 매서드를 제공하는데 이는 변화한 component만 골라내 새롭게 UI를 업데이트 하는 방식을 채택한다.
다시 말해 첫 번째 버튼만 골라서 업데이트 시켜준다는 것이다.
'FrontEnd > React' 카테고리의 다른 글
| [ReactJS] useEffect (0) | 2023.01.10 |
|---|---|
| [ReactJS] Prop Types (0) | 2023.01.09 |
| [ReactJS] prop (0) | 2023.01.09 |
| [ReactJS] prop에 대한 이해 (0) | 2023.01.08 |
| [ReactJS] input, form (0) | 2023.01.07 |
