[React] Movie-app Notes - Memo

📒 Nomad Coder ReactJS로 영화 웹 서비스 만들기
강의노트 (2021 Updated ver.)

# 5. Memo

memo() 를 사용해 렌더링 시 실행되는 함수를 컨트롤 해보자.
(알고만 있으면 되는 기능)

Components는 언제 다시 렌더링이 될까?

Props에서 이어가보자.
3번째 줄에서 render point log를 추가해 렌더링이 되는 시점을 알아보자.

<script type="text/babel">
  function Btn({ name, onClick }) {
    console.log(name, 'was rendered'); // render point log
    return (
      <button
        onClick={onClick}
        style={{
          backgroundColor: 'gray',
          border: 0,
          borderRadius: 20,
          padding: 10,
          color: 'white',
          margin: '10px',
        }}
      >
        {name}
      </button >
    )
  }

  function App() {
    const [value, setValue] = React.useState("origin");
    const changeValue = () => setValue("change");

    return (
      <div>
        <Btn name={value} onClick={changeValue} />
        <Btn name="reset" />
      </div>)
  }
  const root = document.getElementById("root")
  ReactDOM.render(<App />, root);
</script>

가장 처음 앱을 실행하면 origin, reset 버튼이 App() 컴포넌트의 state에 따라 렌더된다.

그리고 origin 버튼을 클릭하면 change로 버튼이 변경된다. 이 과정에서 변화된 값이 있기 때문에 App()은 re-rendering이 일어난다.

하지만 바뀐 값은 첫 번째 버튼의 name 뿐인데 왜 reset까지 rendering 되는걸까?

부모 컴포넌트 App()의 상태에 변화가 생겼다면 컴포넌트 자체는 전체적으로 렌더링된다. 그렇기 때문에 reset 버튼에는 값의 변화가 없었더라도 다시 렌더링되는 것이다.

만약, 부모 컴포넌트 안에 수천개의 컴포넌트가 있다면 하나의 상태가 변했지만 수 천개의 컴포넌트는 다시 렌더링될 것이다. 이는 앱의 속도를 저하시키고 효율을 떨어뜨릴 것이다.

이를 막기 위해 필요한 것이 선택적으로 렌더하는 것이다. Memo를 이용해서 state에 변화가 있는 컴포넌트만 재렌더링하도록 만들 수 있다.

React.memo()에 원래 버튼 컴포넌트를 인자로 전달해 부모 컴포넌트에서 Return한다.

처음과 다르게 reset은 재렌더링되지 않은 모습을 확인할 수 있다.

Summery

빠른 앱 구동, 안정성을 위해 변화하는 값을 선택적으로 렌더할 수 있는 Memo의 쓰임을 알자.

+ ) 나중에 배우는 useEffect()로 여기서 쓰이는 memo() 사용을 대체할 수 있다. 실제 react 프로젝트를 만들 때 렌더를 제어할 목적으로 memo를 쓰진 않고, useEffect()를 주로 사용한다. 추후 react Hooks에 대해 더 알아보자.