다수의 컨트롤된 텍스트 입력을 가진 느린 React 성능 문제 해결하기

React를 사용하여 여러 개의 제어된 텍스트 입력란이 느려요

React에서 여러 개의 제어된 텍스트 입력란에 입력할 때 지연이 발생한다면 당황스러울 것입니다. 이 문제는 짜증나는 상황일 수 있지만, 여러 가지 가능한 해결 방법이 있습니다.

React Dev Tools 비활성화하기

느린 성능의 원인 중 하나는 React Dev Tools입니다. 이 도구들은 입력란에 의도치 않게 영향을 주어 지연을 발생시킬 수 있습니다. 이를 해결하기 위해 React Dev Tools을 비활성화해 보거나, 영향을 멈추기 위해 새 페이지를 열어 보세요.

  
    비슷한 상황을 경험한 적이 있었고, 해결책은 React Dev Tools을 비활성화하는 것이었습니다. 어떻게든 입력란에 영향을 주고 있어서 문제가 발생했습니다. 문제는 페이지를 새로 고쳐도 React Dev Tools 탭을 클릭한 적이 있다면 영향을 주기도 하더라구요. 그러한 영향을 중단하려면 새 페이지를 열어야 합니다. 크롬에서도 완전히 제거할 수도 있지만 그렇게 하지 않는 것을 추천합니다. 사용하는 데 유용한 도구이기 때문입니다. :)
  

onChange 대신 onBlur 사용하기

입력값을 상태에 저장만 하고 실시간 렌더링이 필요하지 않은 경우, onChange 이벤트 대신 onBlur로 대체할 수 있습니다. 이 방법을 사용하면 딜레이와 지연이 제거됩니다. 다음과 같이 코드를 업데이트하세요:

  
    <label>이벤트 이름</label>
    <input type="text" placeholder="제목" className="form-control" name="title" value={this.state.event.title} onBlur={this.handleChange} />
  

  
    이런 일이 발생하는 다양한 원인이 있을 수 있습니다. 비슷한 문제를 겪었고, 주요 원인으로 걸러낸 것은: 원인이 무엇이든 상관없이 빠른 해결책을 찾았습니다. 상태에 저장하기만 하고 실시간 렌더링에 사용하지 않는 경우 'onChange'를 'onBlur'로 안전하게 바꿀 수 있습니다. 이 방법은 딜레이와 지연이 없습니다. 이 방법이 동작하지 않을 수 있는 다른 경우를 알고 있다면 알려주세요! 코드를 다음과 같이 바꾸세요: <label>이벤트 이름</label>
    <input type="text" placeholder="제목" className="form-control" name="title" value={this.state.event.title} onBlur={this.handleChange} />
  

입력 요소를 구성 요소로 분리하기

여러 개의 입력 요소를 가진 큰 양식을 사용하면 지연에 기여할 수도 있습니다. 한 가지 해결책은 자체 상태 변경을 처리하는 개별 입력 구성 요소를 만들고, 필요할 때 이를 부모 구성 요소로 전달하는 것입니다. 이렇게 하면 리렌더링이 전체 양식이 아닌 특정 입력에만 격리되게 됩니다.

  
    입·출력과 양식에서 큰 양식을 다루는 데 사용할 수 있는 예제로 "React에서 큰 양식을 다루는 패턴"이 있습니다. 주요 포인트는 변경시에만 부모로 전달되지 않을 경우 부모 구성 요소로부터 업데이트되지 않도록 입력을 구성 요소로 가져오는 것입니다.
  

React Hook Form 사용하기

리렌더링을 최소화하고 성능을 최적화하는 데 탁월한 성과를 내는 React Hook Form은 양식의 반응성을 개선하는 데 훌륭한 도구일 수 있습니다. 다음은 예시입니다:

  
    아마 React Hook Form은 리렌더링을 최소화하고 성능을 최적화하는 데에 좋은 도구라고 합니다. 아직 시도해보지는 않았지만요.
  

Formik으로 양식 생성하기

양식 생성을 단순화하기 위한 프레임워크로 Formik을 고려해 보세요. React에서 양식 입력 처리의 복잡성을 추상화하고 성능을 향상시킬 수 있습니다. 다음은 예시입니다:

  
    저는 개인적으로 Formik을 사용하고 긴 양식을 구축하는 데에 추천합니다. Formik은 이 복잡성을 추상화해주기 때문이죠.
  

이러한 해결책들을 적용하면 React에서 여러 개의 제어된 텍스트 입력란에 입력할 때 겪는 지연과 딜레이를 완화할 수 있습니다. 요구 사항에 가장 적합한 방법을 선택하여 시도해 보세요. 즐거운 코딩하세요!

참고 자료 : 

reactjs