목차

• React Hook Form
• 실시간 글자수 파악
• 성능 개선 전
• 성능 개선 후
• 결과

React Hook Form

• 저는 react-hook-form을 사용하여 textarea를 통해 사용자 입력 값을 처리하고 있습니다. 이를 통해 제어 컴포넌트와 비제어 컴포넌트의 장점을 살리며, 실시간 유효성 검사를 수행하고 리렌더링을 최소화하여 성능을 개선하고자 했습니다.

• React Hook Form에 대한 자세한 정보는 공식문서를 참조해보세요. React Hook Form 공식문서

---

실시간 글자수 파악

• 제가 구현 중인 프로젝트는 입력값을 1000자로 제한하고 있습니다. 사용자 경험을 개선하기 위해, 입력 중인 글자 수를 실시간으로 확인할 수 있는 기능이 필요합니다.

• react-hook-form의 장점 중 하나는 리렌더링을 최소화하는 것입니다. 그러나 글자 수를 실시간으로 파악해야 하기 때문에, 입력할 때마다 리렌더링이 발생합니다.

---

성능 개선 전

• 저는 실시간 글자수를 감지하기 위해 react-hook-form의 watch 메서드를 활용하여 글자수를 파악했습니다.

• watch 메서드를 사용할 경우 Form 전체가 리렌더링 됩니다.

• 제가 진행하는 프로젝트는 하나의 Form안에 input 3개, textArea 3개로 구성되어있습니다.

• 따라서 1글자당 총 6번의 리렌더링이 발생합니다.

---

성능 개선 후

• react-hook-form은 렌더링을 최소화하는 라이브러리인데 방법이 없을까 고민하다가 useWatch를 발견했습니다.

• 그래서 어떤 차이가 있는건가?? watch 함수는 폼의 입력 값이 변경될 때마다 모든 폼 컴포넌트를 리렌더링합니다 반면, useWatch 함수는 독립적으로 리렌더링을 합니다.

• 따라서 위 사진과 같이 독립적으로 값이 변경되는 하나의 TextArea만 리렌더링 하게 됩니다.

---

변경된 코드

• 공식문서 참조
  

---

결과

• 제가 진행하는 프로젝트는 하나의 Form안에 input 3개, textArea 3개로 구성되어있습니다.

• 총 3개의 TextArea를 각각 1000자씩 입력할 경우

1. 개선 전에는 최대 18,000번의 리렌더링이 발생합니다.
2. 개선 후에는 최대 3000번의 리렌더링으로 줄어듭니다.

• 따라서 최대 15,000번의 리렌더링을 줄일 수 있으며, 약 84%의 리렌더링을 줄일 수 있었습니다.