웹사이트를 개발할 때 성능 최적화는 고려할 사항 중 하나이다. 다양한 기기와 네트워크 환경에서 웹사이트가 원활하게 작동하도록 설계하는 일은 개발자가 해야할 중요한 부분이다. 컴퓨터와 스마트폰 사양이 높아지면서 이정도까지 신경을 써야하나 의문이 생길 수 있지만, 모든 사용자가 그러한 환경을 가지고 있지 않는 점에서 성능 최적화는 여전히 중요하다.  웹사이트의 성능 저하는 사용자 경험을 크게 떨어뜨리며, 페이지가 늦게 로드되거나 상호작용이 느려질수록 이탈률이 높아질 수 밖에 없다. 그렇기 때문에 우리들은 늘 최악의 경우를 염두에 두고, 가능한 빠르고 효율적인  환경을 제공해야 한다.  그러한 의미에서 성능 최적화 중 하나인 메모이제이션(Memoization)을 통해 성능을 어떻게 개선할 수 있는지 알아보려고..

React 애플리케이션에서 과도한 최적화는 최악의 상황을 나타낸다. 몇몇의 개발자들은 useMemo와 useCallback을 개발에서 기본 사항으로 넣어서 모든 곳에 사용한다. 하지만 useMemo는 오히려 애플리케이션의 속도를 저하시킬 수 있다. 명심해야할 것은 메모이제이션은 공짜가 아니다! 우리는 왜 useMemo를 사용할까? useMemo는 컴포넌트의 리렌더링 사이에서 계산 결과를 캐시에 저장하는 Hook이다. React.memo, useCallback, 디바운싱, 동시 렌더링(Concurrent Rendering) 등과 함께 사용해서 성능상 이점을 준다. 이것이 특정 상황에선 정말 도움이 되고 중요한 역할을 하는 것은 맞지만, 대부분은 부적절한 방법인, 모든 변수를 useMemo로 래핑한다. 당연..

이전에 브라우저의 렌더링이 어떤 방식으로 이루어지는 지 알아봤다 이번에는 React에서의 렌더링을 알아보자! 클래스 컴포넌트에서의 LifeCycle에 대한 이미지를 가지고 왔다. ComponentDidUpdate, DidMount 등등은 우리가 많이 알고 있는 익숙한 것들이다. 하지만 옆에 Render Phase, Commit Phase에 대해서는 특별하게 들어본 적이 없다. React에서의 Render Phase와 Commit Phase가 무엇인지 알아보자 Render Phase 간단하게 말하자면 컴포넌트 함수를 호출해서 React의 Element를 반환하고 새로운 Virtual DOM을 만들어준다. 그리고 최초 렌더링이 아니라면 재조정을 통해서 실제 DOM에서 적용할 변경점을 확인한다. 재조정 ( R..

최근 성능 최적화에 대해서 공부하던 중 " useMemo와 useRef의 차이가 뭘까? " 에 대해서 궁금증이 생겼다. 둘을 비교하려면 우선 각각 뭔지에 대해서 짧게 알아보자! useMemo 란? React는 DOM에 변화가 있을 때마다 렌더링을 하는데, 현재 컴포넌트가 리렌더링 되더라도 값의 변화가 없는 경우에 똑같이 리렌더링을 한다면 쓸대없이 자원을 낭비하게 된다. 그래서 변화가 생겼을 때, 현재 함수에 유의미한 변화를 발생시키는 경우에만 연산을 다시 수행하게 해주는 것이 useMemo이다. 즉, 컴포넌트 내부에서 발생하는 연산을 최적화시켜주는 Hook이다. const result = useMemo(countingCallback, [deps]); deps 배열에 들어있는 상태가 변경될 때만 연산을 다..

1. Memoization ? Memoization은 컴퓨터 프로그램이 동일한 계산을 반복해야할 때, 이전 계산한 값을 메모리에 저장함으로 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 2. React의 Memoization ? 1. memo 동일한 props로 렌더링을 한다면, React.memo를 사용하면 성능 향상을 누릴 수 있다. memo를 사용하면 React는 컴포넌트를 렌더링하지 않고, 마지막으로 렌더링된 결과를 재사용한다. import React, { useState, useEffect } from "react"; import MemoItem from "./MemoItem"; const commentList = [ { title: "comment1", con..