[Korean FE Article] 리액트 폼 성능 개선
글링크 : https://velog.io/@superlipbalm/improve-the-performance-of-your-react-forms
소개
웹에서 사용자로부터 데이터를 입력받아 서버로 전송하기 위해 사용되는 폼들을 자주 보셨을 겁니다. 간단한 폼들도 있지만 실제로 복잡한 처리가 필요한 폼들이 많습니다. 사용자가 입력한 데이터를 제출하고, 서버 오류에 응답하고, 입력할 때 사용자가 입력한 값의 유효성을 검사해야 하며, 지원하지 않는 입력 유형이 필요한 경우도 존재합니다. 때문에 사용자가 폼과 상호 작용할 때 이러한 추가 작업들을 처리하기 위해 브라우저는 많은 자바스크립트 코드를 실행해야 하고, 이는 성능 문제로 이어지기도 합니다. 이 글에서는 리액트를 사용해 폼을 만들었을 때 자주 겪게 되는 성능 문제를 살펴보고 어떻게 문제를 해결하고 성능을 개선할 수 있는지에 대해 알아봅니다.
tl;dr
유저가 폼과 상호 작용하면 유효성 검사 등 폼이 처리해야 할 추가 작업을 위해 자바스크립트를 실행해야 하고, 이는 성능 문제로 이어질 수 있습니다.
상태 함께 두기(colocation)을 사용하면 각 폼 필드 컴포넌트에서 직접 상태를 관리해 사용자의 모든 상호 작용에 모든 컴포넌트가 리렌더링 되지 않도록 할 수 있습니다.
부모가 넘겨줘야 할 props가 줄어들어 간결해지는 장점도 있습니다.- 유효성 검사를 위해 다른 필드의 값을 알아야 하는 경우 아래 방법들을 사용해 볼 수 있습니다.
부모 컴포넌트로 상태 올려보내기
모든 자식 컴포넌트가 리렌더링 되는 문제가 발생하기 때문에 이상적이지 않습니다.
Context API 사용해 공급자와 소비자(의존성이 있는 필드들)만 리렌더링 되도록 하기
부모 폼의 DOM을 직접 참조해 change 이벤트 리스너를 부착해 유효성 검사하기