[React] 성능 최적화에 대한 고찰

동기

• 우테코 레벨2 미션1 계산기 미션에서 useMemo, useCallback을사용하는 크루들을 많이 봤어요.

• 렌더링때마다 매번 정의하지 않고 dependencies를 두어 해당 값이 바뀔 때에만 다시 함수나 값을 재정의 하기 위함인데요!

포코가 이 부분에 대해서 의문을 제기했어요.

❓ 과연 무조건 useMemo, useCallback을 사용하는 것이 좋을 것인가?

❓ 직접 따져봤는가?

❓ dependency array를 비교하는 연산이 오히려 악영향을 미치지는 않을까?

🎯 아직 성능에 대한 고민까지 진행할 정도로 React를 잘 아는 것은 아니지만 한 번 생각을 정리했습니다.

---

성급한 최적화

1. 매번 useMemo, useCallback을 넣어주는 것은 가독성을 꽤 많이 포기해야 합니다.

2. 성급한 최적화는 안하느니만 못합니다.

📖 그러니 기계에 최적화된 코드보다 사람에게 최적화된 코드가 더 가치있을 수 있어요.

---

성능 측정

최적화 방법도 중요하지만 가장 중요한 것은 측정입니다.

1. 느리다면 어디서부터 어디가 느린지

2. 어떻게 개선을 할 수 있고 개선하면 몇 퍼센트 개선이 가능할지

⚠️ 이 모든 것을 고려해야 성능 최적화가 가능한 것입니다.

• 그렇다면 성능 측정하는 방법부터 알아야겠죠.

측정하지 못하는 개선은 아무도 알아주지 않는 자기 만족을 위하 개선일 수 있어요.

---

생각보다 렌더링은..

렌더링을 개선함으로 얻을 수 있는 이득은 굉장히 작아요.

• 보통 네트워크 비용이 가장 크고 렌더링 비용은 작은 축에 속합니다. (물론 3D나 실시간 차트같은 경우라면 렌더링 비용은 크겠죠.)

• 따라서 useMemo, useCallback을 쓰면 단순히 렌더링 비용을 아낄 수 있다고 판단한다면 굉장히 성급한 최적화가 될 수 있어요.

✋ 어플리케이션에서 잦은 렌더링으로 인해 UX가 문제가 생긴다면 그 때 고려하는 것이 더 좋을 수 있어요.