React 성능 안티패턴: 앱 속도를 죽이는 5가지 실수!

Source: Dev.to

React 앱이 느리게 동작하지만 원인을 정확히 찾지 못하고 있나요?

최선의 방법을 따르고 있다고 생각할 수도 있지만, 실제로는 흔히 사용되는 몇몇 개발 패턴이 눈에 보이지 않게 앱 성능을 저하시킬 수 있습니다.

이 글에서는 React 앱의 속도를 은밀히 죽이고 있는 5가지 반패턴을 살펴보고, 더 빠르고 부드러운 사용자 경험을 위해 이를 해결하는 방법을 알려드립니다.

1. Context 때문에 대량 재렌더링 발생

문제

하나의 컨텍스트에 모든 것을 넣는 경우.

해결책

관심사별로 컨텍스트를 분리합니다.

---

2. Props에 인라인 객체/배열 생성

문제

컴포넌트에 인라인 객체/배열을 props 로 전달하는 경우.

첫 번째 해결책

컴포넌트 외부에 상수를 정의합니다.

두 번째 해결책

동적 값에는 useMemo 를 사용합니다.

---

3. 거대한 리스트 전체를 한 번에 렌더링

문제

리스트 전체를 한 번에 표시하는 경우.

해결책

React Window 혹은 React Virtualized 를 사용해 리스트를 가상화합니다.

---

4. 비용이 많이 드는 계산을 메모이징하지 않음

문제

렌더링 중에 값을 계산하는 경우.

해결책

계산 로직을 useMemo 로 감싸서 메모이징합니다.

---

5. JSX 안에서 익명 함수 사용

문제

렌더링마다 새로운 함수를 생성하는 경우.

해결책

이벤트 위임을 사용하거나 useCallback 으로 콜백을 메모이징합니다.