[React] 최적화(2) - Raect.memo

리액트 메모이제이션에 대해 알아보자.

리액트 공식 사이트에서 설명을 찾아보면 React.memo는 고차 컴포넌트라고 나와있다.

여기서 말하는 고차 컴포넌트란 무엇일까?
일단 컴포넌트는 실행 가능한 독립적인 기능을 말한다.

최상위 컴포넌트를 제외한 나머지 컴포넌트는 언제나 부모(상위)로부터 호출되고 자신만의 동작을 수행한다. 이때 컴포넌트의 호출부에서 Props라는 속성 값을 전달할 수 있으며 이 값은 대개 본인의 의지와 상관없이 부모가 리렌더링 될 때마다 재전달 된다.

이로 인해 렌더링이 불필요한 컴포넌트도 다시 렌더링 작업을 수행하게 되는데 위에서 말한 고차 컴포넌트는 이런 작업을 최소화한 컴포넌트라 보면 된다.

React.memo가 생성한 컴포넌트는 기존에 전달된 Props를 기억할 수 있는 능력을 갖고 있으며 부모나 형제로부터 이벤트(또는 렌더링)가 발생해 Props가 재전달 되었을 때 이전의 값과 동일한지 검사하고 필요할 때만 렌더링 작업을 수행한다.

즉, 이전과 동일한 값이라면 마지막으로 렌더링 한 결과를 재사용하고 그게 아니라면 새로 전달받은 값을 활용해 렌더링 작업을 수행하는 것이다.

예시를 보자.

 

1	import React, {useState, useEffect} from "react";
2
3	const A = React.memo(({count})=>{
4	  useEffect(()=>{
5	    console.log(` count : ${count} `);
6	  });
7	});
8
9	const Main = ()=>{
10
11	  const [count, setCount] = useState(1);
12	
13	  return (
14	    <div>
15	      <div>
16	        <A prop = {count}/>
17	        <button onClick={()=>setCount(count)}>Button</button>
18	      </div>
19	    </div>
20	  );
21	}
22
23	export default Main;

 

코드를 실행해 보면 버튼이 하나 생성될 것이다.

이 버튼을 누르면 이벤트에 의해 setCount로 새로운 값이 전달된다.
count에는 아무런 증감 연산을 추가하지 않았기 때문에 초기값인 1을 유지하며 setCount로 전달되는 값 역시 동일할 것이다.

 

여기서 A 컴포넌트의 호출부(16)를 보면 Props로 이 값을 전달받고 있다.

count에 변화가 생기면 A 컴포넌트의 Props가 다시 전달되며 값을 전달받은 A 컴포넌트는 렌더링을 수행할 것이다.

 

A 컴포넌트의 선두에서 count의 값을 콘솔에 출력하고 있으므로 원래라면 변화한 count의 값을 확인할 수 있어야 한다.

 

그런데, 정작 콘솔을 확인해 보면 아무런 값도 출력되지 않는 것을 알 수 있다.

다시 A 컴포넌트의 선언부(3)를 보자.

 

> const A = React.memo(() => {});

 

선언부에서 React.memo 훅으로 콜백 함수 전체를 감싸둔 것을 볼 수 있다.

 

이 호출로 인해 A 컴포넌트는 고차 컴포넌트가 되고 앞서 말한 대로 Props의 값을 기억해 두는 메모이징 동작을 수행할 것이다.

 

이로 인해 count에 직접적인 변화가 없다면 이미 렌더링 해두었던 결과를 재사용하여 화면을 그대로 유지할 것이다. 

 

이 차이를 직접 보고 싶다면 React.memo를 제거한 후 실행해 보기 바란다.