<div id="readability-page-1" class="page"><div><h2 id="table-of-contents">Table of Contents</h2>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#%EB%AC%B8%EC%A0%9C%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C">문제는 무엇일까</a></li>
<li><a href="#props%EC%9D%98-%EC%B0%B8%EC%A1%B0-%EB%8F%99%EC%9D%BC%EC%84%B1%EC%9D%80-%EC%96%B8%EC%A0%9C-%EB%AC%B8%EC%A0%9C%EA%B0%80-%EB%90%A0%EA%B9%8C">props의 참조 동일성은 언제 문제가 될까?</a></li>
<li><a href="#%EC%A7%80%EC%BC%9C%EC%95%BC%ED%95%A0-%EA%B7%9C%EC%B9%99">지켜야할 규칙</a>
<ul>
<li><a href="#usememo%EC%99%80-usecallback%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EB%A7%90%EC%95%84%EC%95%BC%ED%95%A0-%EA%B2%BD%EC%9A%B0"><code>useMemo</code>와 <code>useCallback</code>을 사용하지 말아야할 경우</a></li>
<li><a href="#usememo%EC%99%80-usecallback%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EA%B2%BD%EC%9A%B0"><code>useMemo</code>와 <code>useCallback</code>을 사용해야 하는 경우</a></li>
</ul>
</li>
</ul>
<h2 id="introduction">Introduction</h2>
리액트 코드를 리뷰하다보면, <code>useCallback</code>과 <code>useMemo</code>를 정말 많은 곳에 사용하는 것을 발견하게 된다. 일반적으로 두 훅을 쓰게 되는 이유는 컴포넌트에 무언가 함수를 전달할 때 마다 <code>useCallback</code>을 사용하는 것 같지만, 이는 문제에 대한 올바른 해결방법이 아니며 오히려 렌더링 시간에 문제를 일으킬 수 있다.
<a href="https://goongoguma.github.io/2021/04/26/When-to-useMemo-and-useCallback/">많은 글</a>에서 언급된 것처럼 <code>useMemo</code>와 <code>useCallback</code>을 이용한 최적화의 비용은 공짜가 아니다.
<h2 id="문제는-무엇일까">문제는 무엇일까</h2>
리액트 컴포넌트 트리는 매우 클 수 있다. <code>React DevTools</code>를 열고 애플리케이션을 살펴보면, 한번에 많은 컴포넌트가 렌더링 되는 것을 볼 수 있다. 이 과정에서 한두개 정도 불필요한 <code>useCallback</code> <code>useMemo</code>를 사용하는 것은 별 문제가 되지 않지만, 이 코드가 여기저기 존재한다면 문제가 될 수 있다.
일반적인 오해 중 하나로는, <code>useCallback</code>을 사용하면 렌더링중 함수 재생성을 방지할 수 있다는 것인데, 꼭 그런 것 만은 아니다.
<code>useCallback</code>은 제공된 deps를 기준으로 반환된 함수 객체를 메모이제이션 하는 것 뿐이다. 즉, 동일한 deps가 제공되면 (참조로 비교) 동일한 함수 객체를 반환한다.
만약 그냥 새로운 함수를 매번 만드는 대신 <code>useCallback</code>으로 선언된 함수를 컴포넌트나 훅으로 넘겨주는 경우, <code>useCallback</code>을 사용함으로써 새로운 함수를 만들고, 새로운 배열을 만들어서 함수를 실행하고, deps의 동일성을 비교하기 위한 함수와 종속성 집합을 메모리에 저장하게 될 것이다.
이는 단순히 함수를 props로 만들어서 전달하는 것보다 훨씬더 많은 비용이 든다. <code>useCallback</code>을 사용하든, 사용하지 않았든 기능적으로는 동일하게 동작했을 것이다.
<h2 id="props의-참조-동일성은-언제-문제가-될까">props의 참조 동일성은 언제 문제가 될까?</h2>
만약 자식 컴포넌트가, <code>React.memo</code>를 사용하고 있거나 <code>React.PureComponent</code>로 구현되어 있는 경우, 리액트는 props가 정확하게 일치하는 한 부모 컴포넌트가 리렌더링 되더라도 이 자식 컴포넌트를 리렌더링하지 않을 것이다. 만약 다른 모든 props가 참조적으로 동일하지만, 만약 의도치 않게 새 함수 인트선트 또는 객체 인스턴스를 전달하게 되면, 해당 컴포넌트가 다시 리렌더링 된다.
이러한 컴포넌트에는 다시 렌더링하는데 비용이 많이 드는 하위 컴포넌트가 존재할 수 있으므로, <code>memo</code>에 대한 이러한 약속을 지키지 않으면 성능이 저하될 수 있다.
이러한 참조 동일성은 <code>props</code>가 <code>useEffect</code>의 종속성으로 사용되는 경우에도 문제가 될 수 있다. <code>props</code>가 변경될 때 마다 이 <code>useEffect</code>가 트리거 될 것이다.
<h2 id="지켜야할-규칙">지켜야할 규칙</h2>
<h3 id="usememo와-usecallback을-사용하지-말아야할-경우"><code>useMemo</code>와 <code>useCallback</code>을 사용하지 말아야할 경우</h3>
<ol>
<li><code>host</code> 컴포넌트에 (<code>div</code> <code>span</code> <code>a</code> <code>img</code>...) 전달하는 모든 항목에 대해 쓰지 말아야한다. 리액트는 여기에 함수 참조가 변경되었는지 신경쓰지 않는다. (<code>ref</code>, <code>mergeRefs</code>는 여기에서 제외된다.)</li>
<li><code>leaf</code> 컴포넌트에는 쓰지말아야 한다.</li>
<li><code>useCallback</code> <code>useMemo</code>의 의존성 배열에 완전히 새로운 객체와 배열을 전달해서는 안된다. 이는 항상 의존성이 같지 않다는 결과를 의미하며, 메모이제이션을 하는데 소용이 없다. <code>useEffect</code> <code>useCallback</code> <code>useMemo</code>의 모든 종속성은 참조 동일성을 확인한다.</li>
</ol>
<pre><code>// dont
const x = [‘hello’];
const cb = useCallback(()={},[prop1,prop2, x])

// dont
const [a, ...rest] = someArray;
const cb = useCallback(()={},[rest]
</code></pre>
<ol start="4">
<li>전달하려는 항목이 새로운 참조여도 상관없다면, 사용하지 말아야 한다. 매번 새로운 참조여도 상관없는데, 새로운 참조라면 메모이제이션하는 것이 의미가 없다.</li>
</ol>
<blockquote>
host 컴포넌트: 호스트 환경 (브라우저 또는 모바일)에 속하는 플랫폼 컴포넌트를 의미한다. DOM 호스트의 경우, <code>div</code>, <code>img</code>와 같은 요소가 될 수 있다.
leaf 컴포넌트: DOM에서 다른 컴포넌트를 렌더링하지 않는 컴포넌트 (html 태그만 렌더링하는 컴포넌트)
</blockquote>
<h3 id="usememo와-usecallback을-사용해야-하는-경우"><code>useMemo</code>와 <code>useCallback</code>을 사용해야 하는 경우</h3>
<ol>
<li>하위트리에 많은 Consumer가 있는 값을 Context Provider에 전달해야 하는 경우 <code>useMemo</code>를 사용하는 것이 좋다. <code>&lt;ProductContext.Provider value={{id, name}} &gt;</code>의 경우, 어떤 이유로든 해당 컴포넌트가 리렌더링 된다면 <code>id</code> <code>name</code>이 동일하더라도 매번 새로운 참조를 만들어 죄다 리렌더링 될 것이다.</li>
<li>계산 비용이 많이 들고, 사용자의 입력 값이 <code>map</code>과 <code>filter</code>을 사용했을 때와 같이 이후 렌더링 이후로도 참조적으로 동일할 가능성이 높은 경우, <code>useMemo</code>를 사용하는 것이 좋다.</li>
<li><code>ref</code> 함수를 부수작용과 함께 전달하거나, <code>mergeRef-style</code> 과 같이 wrapper 함수 ref를 만들 때 <code>useMemo</code>를 쓰자. ref 함수가 변경이 있을 때마다, 리액트는 과거 값을 <code>null</code>로 호출하고 새로운 함수를 호출한다. 이 경우 ref 함수의 이벤트 리스너를 붙이거나 제거하는 등의 불필요한 작업이 일어날 수 있다. 예를 들어, <code>useIntersectionObserver</code>가 반환하는 <code>ref</code>의 경우 <code>ref</code> 콜백 내부에서 observer의 연결이 끊기거나 연결되는 등의 동작이 일어날 수 있다.</li>
<li>자식 컴포넌트에서 <code>useEffect</code>가 반복적으로 트리거되는 것을 막고 싶을 때 사용하자.</li>
<li>매우 큰 리액트 트리 구조 내에서, 부모가 리렌더링 되었을 때 이에 다른 렌더링 전파를 막고 싶을 때 사용하자. 자식 컴포넌트가 <code>React.memo</code> <code>React.PureComponent</code>일 경우, 메모이제이션된 props를 사용하게되면 딱 필요한 부분만 리렌더링 될 것이다.</li>
</ol>
<code>React DevTools Profiler</code>를 사용하면 컴포넌트의 리렌더링 속도가 느린 경우, 상태 변경이 일어났을 때 얼마나 렌더링 시간이 걸렸는지 조사할 수 있다. 이렇게 하면 거대한 계단식 리렌더링을 방지하기 위해 <code>React.memo</code>를 사용할 위치를 찾을 수 있고, 필요한 경우 <code>useCallback</code> <code>useMemo</code>를 사용하여 상태변경을 더 효율적으로 만들 수 있다.</div></div>

리액트의 useCallback useMemo, 정확하게 사용하고 있을까

댓글