<div id="readability-page-1" class="page"><div><div><div><p><a rel="noopener follow" href="/?source=post_page-----bcacaee7c97e-----------------------------------"><img alt="Jung Han" src="https://miro.medium.com/fit/c/56/56/1*ZDiWlHECCXT15gXTRngnNg.jpeg" width="28" height="28"></a></p><div><div><p><span><a rel="noopener follow" href="/?source=post_page-----bcacaee7c97e-----------------------------------"><p>Jung Han</p></a></span></p></div><p><span><a rel="noopener follow" href="/번역-memoization으로-더-빠른-react-apps-만들기-bcacaee7c97e?source=post_page-----bcacaee7c97e-----------------------------------"><p><span></span><span>Oct 4, 2021</span><span>·</span>8 min read<svg width="15" height="15" viewBox="0 0 15 15" aria-label="Member only content"><path d="M7.44 2.32c.03-.1.09-.1.12 0l1.2 3.53a.29.29 0 0 0 .26.2h3.88c.11 0 .13.04.04.1L9.8 8.33a.27.27 0 0 0-.1.29l1.2 3.53c.03.1-.01.13-.1.07l-3.14-2.18a.3.3 0 0 0-.32 0L4.2 12.22c-.1.06-.14.03-.1-.07l1.2-3.53a.27.27 0 0 0-.1-.3L2.06 6.16c-.1-.06-.07-.12.03-.12h3.89a.29.29 0 0 0 .26-.19l1.2-3.52z"></path></svg></p></a></span></p></div></div></div><blockquote><p id="d4d9">Original Article: <a href="https://blog.px.dev/ui-performance/" rel="noopener ugc nofollow" target="_blank">https://blog.px.dev/ui-performance/</a><br>Author: Nick Lanam</p></blockquote><p id="f2d9">당신에게 느린 React 어플리케이션이 하나 있다고 가정해보겠습니다. 왜 느릴까요? 그리고 어떻게 고칠 수 있을까요? React 문서에는 <a href="https://reactjs.org/docs/optimizing-performance.html" rel="noopener ugc nofollow" target="_blank">몇 가지 팁을 제공</a>합니다. 이 글에서는 Pixie의 UI에서 직면한 몇 가지 일반적인 성능 문제와 과도한 리렌더링을 어떻게 디버깅했는지를 담았습니다. 어떻게 이 문제를 해결했는지, 그리고 이런 문제가 발생하지 않도록 어떻게 예방했는지를 설명하겠습니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*jLDCo4WilYouipAiZzAKOQ.png" width="700" height="800" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/52/1*jLDCo4WilYouipAiZzAKOQ.png?q=20"></p></div><figcaption>React Devtool의 “Highlight Updates When Components Render” 기능을 활성화 했습니다. 여기서 나타나는 직사각형은 컴포넌트 업데이트를 나타냅니다. (영상은 링크를 클릭해서 확인해주세요<a href="https://blog.px.dev/25502b5e0d3d482812f2c76b7597f6e2/performance-comparison.mp4" rel="noopener ugc nofollow" target="_blank">https://blog.px.dev/25502b5e0d3d482812f2c76b7597f6e2/performance-comparison.mp4</a>)</figcaption></figure><p id="9b92"><strong>TL;DR:</strong> 대부분의 React 컴포넌트는 너무 자주 리렌더링 되었습니다. 그 컴포넌트를 메모이제이션 함으로써 해결했습니다. 우리는 React Dev…</p></div></div>

Stories by Jung Han on Medium

한정

Original Article: https://blog.px.dev/ui-performance/
Author: Nick Lanam
Continue reading on Medium »

(번역) Memoization으로 더 빠른 React Apps 만들기

댓글