리액트 상호작용 시간을 4배 개선하기

이번에 소개해드리는 글은 리액트 상호작용 시간을 개선하는 경험을 공유하는 글입니다.

글쓴이는 겉으로 보기엔 단순해보이는 성능 이슈를 해결하기 위해 어떤 과정을 거쳤는지 정말 자세하게 공유하고 있습니다.

이 글을 통해 제가 얻은 인사이트는 이렇습니다.

• 보통 리액트 성능 이슈가 있다면 이렇게 깊게 먼저 들어가지 않는 편입니다. 간단하게 해결할 수 있는 방법은 없는지 알아보는 시간을 갖습니다. 하지만 글쓴이는 성능 이슈가 발생했을 때 프로파일링을 먼저합니다. 프로파일링은 쉬운 과정은 아닙니다. 어떤 함수가 성능 문제를 일으키는지 다소 깊게 파악해야 합니다. 그리고 이 경우 리액트에 대해 잘 알고 있어야 합니다. 예를 들어, performSyncWorkOnRoot가 리액트 렌더링 과정에서 호출되는 함수라는 걸 알아야 합니다.

• 또한 자신의 리액트 코드 뿐만 아니라 AG Grid라는 외부 라이브러리의 코드도 함께 살펴봅니다. 보통 외부 라이브러리에서 문제가 발생하면 파헤쳐보기 전에 우회하여 해결 할 수 있는 방법을 탐색합니다.

• 원인을 파악하기 위해 다양한 도구를 사용합니다. 크롬 개발자도구와 리액트 프로파일링 도구를 합리적인 이유를 갖고 적절한 때에 사용합니다. (이유도 함께 적어놨습니다.)

• 이 모든 과정에서 상당한 양의 '지식'이 사용됩니다.

한 가지 문제를 풀기 위해 이렇게 오랜 시간을 사용할 수 있는 건 '확신'이 필요하다고 생각합니다. 다른 방법보다 이 방법이 문제를 해결하는 데 더 확실한 방법이고, 해결할 수 있는 더 좋은 방법이라는 확신이 있어야 중간에 의구심을 품지 않고 끝까지 해낼 수 있습니다. 그리고 그 확신은 명확한 계획에서 나옵니다.

He was convinced before that the formula is correct because he derived it carefully. But now he is more convinced, and his gain in confidence comes from a different source; it is due to a sort of "experimental evidence."

<HOW TO SOLVE IT>

그리고 이렇게 해낼 수 있는 다른 이유 중 하나는 계획을 실행하기에 필요한 지식과 경험입니다. 이 글을 읽어보면 상당한 양의 지식과 경험을 볼 수 있습니다.

Good ideas are based on past experience and formerly acquired knowledge.

<HOW TO SOLVE IT>

이 글을 통해 문제를 어떻게 해결해야 하는지 한 번 더 생각해보게 되는 계기가 됐습니다. 또한 내가 다루고 있는 도구나 방법론에 대해 얼마나 알고 있고 경험했는지, 그 경험은 어떤 종류인지 돌아보게 됐습니다.

최근 시청한 영상을 추가로 남깁니다.

그 사이의 균형을 잘 유지해야죠. 예술가인 동시에 과학자가 되어야 합니다. 이미 정해진 레시피를 무시하고 모든 걸 처음부터 '이해'하려고 한다면, 아무것도 만들지 못할 겁니다. 하지만 본질을 '이해'하지 않고 아무 생각 없이 레시피만 따라 한다면, 잘못된 제품을 만들 겁니다.

그렇게 복잡하게 생각할 필요 없습니다. 컴퓨터를 새로 만든다고 해보죠. 만약 여러분에게 일을 맡긴 의뢰인이 컴퓨터 성능을 10% 높이고 싶다고 한다면, 메모리 용량을 늘리거나 부품을 추가하겠죠. 아니면 컴퓨터의 설정을 만져서 성능 효율을 최대치로 끌어올릴 겁니다. 하지만 부품을 추가하고 설정을 바꿀 수록, 구조도 복잡해지고 관리도 어렵죠. 언젠간 벽에 부딪힐 겁니다. 아무리 부품을 덕지덕지 붙여도 성능이 더 좋아지지 않는 시점이 오겠죠. 그러면 대부분 사람들은 이렇게 말해요. "어쩔 수 없어요. 이게 한계입니다." 하지만 극소수는 이렇게 얘기하죠. "지금의 구조는 더 이상 한계야. 뭘 새롭게 추가한다고 바뀔 건 없어. 새로운 구조를 처음부터 다시 짜보자." 그렇게 기존 구조를 뜯어보고 난 후에 사람들은 비로소 알게 됩니다. 아예 처음부터 새로운 구조를 만드는 것이 훨씬 빠르고 간단한 방법이에요.

이 글의 목차는 아래와 같습니다.

• 상호작용 프로파일링

• AG Grid: 불필요한 렌더링 고치기

• AG Grid: 렌더링 제거하기

• useEffect 덜 실행하기

  • areEqual의 깊은 이야기

• 여전히 남아 있는 작업

  • 더욱 세분화된 업데이트

  • useSelector vs useStore

• 잘 동작하지 않은 것

• 결과