[React] 최적화 (useMemo, React.memo)

먼저, 리액트에서 리렌더링되는 조건을 알아보자 1. 함수 컴포넌트 자기자신의 상태가 변경될 때 2. 부모 컴포넌트로부터 받은 prop의 상태가 변경될 때 3. 부모 컴포넌트의 상태가 변경될 때 리액트는 이름답게 변화를 감지하여 리렌더링이 되는것이 특징이고, 이런 특징은 빠른 개발속도를 자랑하지만 코드를 잘못 짜면 성능적으로 봤을 때 단점이 될 수도 있다. 예를 들어서 십억번의 연산을 하는 컴포넌트가 있다고 할때, 리렌더링 될 때마다 십억번의 연산을 하게 되면 큰 성능낭비가 될 수 있다. 아래 예제로 확인해보자. 1부터 n만큼의 숫자를 더하고 버튼 클릭을 할 때마다 label뒤에 ":"을 하나씩 붙혀주는 코드다. // App.js import {useState} from "react"; import Sho..
React 2022. 12. 17. 18:37
1