React re-rendering 방지 디자인 패턴 (1)

React에서 크게 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다.

1. 함수 내의 State가 변경되었을 때
2. 부모 컴포넌트가 Rerender되었을 때
3. 컴포넌트의 Props값이 변경되었을 때

자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다.

 

이 글에선 1.함수 내의 State가 변경되었을 때 의 경우 re-rendering을 방지하는 디자인 패턴에 대해 설명할 예정이다.

먼저 React의 re-render 과정을 간단하게 나누어 설명을 해보자면

1. re-evaluation 과정을 거친다.
2. virtual dom을 생성한다.
3. 비교 후 Commit하여 페이지에 반영한다
   정도로 나누어져 있다. 자세하게 설명하면

뭐 함수를 호출하고 props, hook, 변수 등을 재생성하고
렌더페이즈 커밋페이즈 Paint와 Effect들 실행 등 내부적으로 복잡한 과정들이 있는데 이는 다른 글에서 설명하면 되고

중요한 것은 re-render는 컴퓨팅 자원을 쓰는 성능에 영향을 주는 작업이라는 것이다.

 

따라서 단순하게 re-rendering을 진행 할 함수를 줄이는것으로 성능을 높일 수 있게된다.

이 방법에 대해 아주 간단한 코드로 설명을 해보겠다.

 

먼저 아래와 같은 함수가 있다.

이는 Input에 어떤 값을 입력 할 시 email state가 변경되고 이로인해 해당 함수를 다시 실행하게 된다.

그리고 이로인해 내부 컴포넌트들에 re-rendering이 일어나게 된다.

 

이는 memoized 되어있지 않은 모든 내부 컴포넌트들에 대한 re-rendering 프로세스를 진행한다는 의미이고 내부 컴포넌트의 크기가 크면 클수록 복잡하면 복잡할수록 더 많은 컴퓨팅 자원을 소모하게 될 것이다.

 

그리고 이는 아래의 방법으로 간단하게 해결할 수 있게 된다.

위 사진처럼 함수를 나누는 것 만으로도 아래의 결과를 보이게 된다.

 

원래는 SigninPage 전체가 re-render 되었다면 여기에서는 SigninEmailForm 만 re-render 되게 되며 불필요한 계산을 하지 않게 된다. Profiler에서도 유의미한 결과를 보여준다.

 

이러한 방식은 웹을 좀 잘 만든다고 할 수 있는 토스같은곳의 웹 페이지를 보아도 실제로 많이 사용하고 있는 방식이다.

 

페이지 내부에 함수를 만들어 분리하는 방식으로 사용하더라도 전혀 문제가 없지만 이 방식으로 인해 파일의 개수가 늘어난다거나 과하게 Props를 넘겨줘야 한다거나 하는 경우에는 오히려 마이너스가 될 수 있으니 스스로 잘 판단해서 사용하는것이 중요하다고 생각한다.

 

주관적인 생각으로는 큰 신경을 쓰지 않고도 쉽게 성능을 최적화 할 수 있는 방법이며 가독성 있는 좋은 코드를 만들 수 있는 React의 코딩 패턴 중 하나라고 할 수 있을 것 같다.