[React 영화 서비스 만들기] Memo

컴포넌트 render 원리

첫번째 버튼(저장)

onClick 이 되면 value가 재설정됨

value가 바뀔 때(상태가 바뀔 때) 다시 App이 render됨

 

부모(App)이 state를 변경함

App(컴포넌트)의 상태가 바뀌면 다시 render 되는것

 

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> <!-- react 임포트 -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script> <!-- react-dom 임포트 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  function Btn({ text, onClick }) {
     console.log(text, ' rendered');
     return <button
             style={{
                     backgroundColor: 'tomato',
                     color: 'white',
                     padding: '10px 20px',
                     border: 0,
                     borderRadius: 10,
                    }}
              onClick={onClick}
             >{text}</button>
   }
    function App() {
        const [value, setValue] = React.useState('저장');
        const changeValue = () => setValue('되돌리기');
        console.log('App rendered');
        return (
            <div>
                <Btn text={value} onClick={changeValue}/>
                <Btn text='계속'/>
            </div>
        );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>

 

 

※ 하지만, 하나의 컴포넌트가 천개의 컴포넌트를 그리고 있다고 상상해봤을 때

부모의 상태가 변경되었다고 모든 컴포넌트를 re-render하는 것은

매우 비효율적이며 속도가 느려지는 원인이 될 수 있다.

 

Memo를 사용하여 수정

새로운 버튼만 re-render

const MemorizedBtn = React.memo(Btn);

function App() {
    const [value, setValue] = React.useState('저장');
    const changeValue = () => setValue('되돌리기');
    return (
        <div>
            <MemorizedBtn text={value} onClick={changeValue}/>
            <MemorizedBtn text='계속'/>
        </div>
    );
}