React에서 크게 Rerendering이 일어나는 조건은 크게 보면 3가지정도가 있다.
1. 함수 내의 State가 변경되었을 때
2. 부모 컴포넌트가 Rerender되었을 때
3. 컴포넌트의 Props값이 변경되었을 때
자세하게 설명하면 수많은 조건이 있겠지만 대부분의 Rerendering는 저 3가지 조건의 상호작용으로 일어나게 된다.
이 글에선 1.함수 내의 State가 변경되었을 때 의 경우 Rerendering을 방지하는 디자인 패턴에 대해 설명할 예정이다.
먼저 React의 Rerender 과정을 간단하게 나누어 설명을 해보자면
1. re-evaluation 과정을 거친다.
2. virtual dom을 생성한다.
3. 비교 후 Commit하여 페이지에 반영한다
정도로 나누어져 있다. 자세하게 설명하면
뭐 함수를 호출하고 props, hook, 변수 등을 재생성하고
렌더페이즈 커밋페이즈 Paint와 Effect들 실행 등 내부적으로 복잡한 과정들이 있는데 이는 다른 글에서 설명하면 되고
중요한 것은 Rerender는 컴퓨팅 자원을 쓰는 성능에 영향을 주는 작업이라는 것이다.
따라서 단순하게 Rerendering을 진행 할 함수를 줄이는것으로 성능을 높일 수 있게된다.
이 방법에 대해 아주 간단한 코드로 설명을 해보겠다.
먼저 아래와 같은 함수가 있다.
이는 Input에 어떤 값을 입력 할 시 email state가 변경되고 이로인해 해당 함수를 다시 실행하게 된다. 그리고 이로인해 내부 컴포넌트들에 rerendering이 일어나게 된다.
이는 memoized 되어있지 않은 모든 내부 컴포넌트들에 대한 Rerendering 프로세스를 진행한다는 의미이고 내부 컴포넌트의 크기가 크면 클수록 복잡하면 복잡할수록 더 많은 컴퓨팅 자원을 소모하게 될 것이다.
그리고 이는 아래의 방법으로 간단하게 해결할 수 있게 된다.
위 사진처럼 함수를 나누는 것 만으로도 아래의 결과를 보이게 된다.
원래는 SigninPage 전체가 Rerender 되었다면 여기에서는 SigninEmailForm 만 Rerender 되게 되며 불필요한 계산을 하지 않게 된다. Profiler에서도 유의미한 결과를 보여준다.
이러한 방식은 웹을 좀 잘 만든다고 할 수 있는 토스같은곳의 웹 페이지를 보아도 실제로 많이 사용하고 있는 방식이다.
페이지 내부에 함수를 만들어 분리하는 방식으로 사용하더라도 전혀 문제가 없지만 이 방식으로 인해 파일의 개수가 늘어난다거나 과하게 Props를 넘겨줘야 한다거나 하는 경우에는 오히려 마이너스가 될 수 있으니 스스로 잘 판단해서 사용하는것이 중요하다고 생각한다.
주관적인 생각으로는 큰 신경을 쓰지 않고도 쉽게 성능을 최적화 할 수 있는 방법이며 가독성 있는 좋은 코드를 만들 수 있는 React의 코딩 패턴 중 하나라고 할 수 있을 것 같다.
