작년 11월에 진행했던 프로젝트와 이번 프로젝트의 로그인 회원가입 기능 구현에서 코드 차이를 비교해보면
useState로 상태관리 했던 작년 첫 프로젝트 VS react-hook-form을 사용했던 이번 프로젝트
이렇게 정리할 수 있다.
이런 면에서 차이가 확연히 나기 때문에 직접 비교하면서 어떤 코드가 효율적인지 고민해보면 좋을 것 같다.
input 상태관리
(1) 작년 프로젝트 (구멍마켓)
위와 같이 필요한 정보를 입력받고 onChange이벤트가 실행될 때마다 각각의 상태변경함수에 e.target.value를 저장하였다. 또한 각각의 입력값마다 유효성 검사 확인여부를 불리언 값으로 관리하는 state도 함께 만들었다.
이렇게 코드를 작성하면 생기는 단점들을 정리해보았다.
💻 UseState를 통해서만 상태관리를 하는 경우!
1.코드의 가독성이 떨어지고, 컴포넌트의 로직이 복잡해진다.
2. 많은 상태 변수를 업데이트하게 되면, 컴포넌트의 리렌더링이 발생할 가능성이 높아진다. 이는 성능에 영향을 줄 수 있다.
3.useState를 호출하면 각 상태 변수마다 메모리 공간이 할당 되는데, 많은 상태 변수를 가진 컴포넌트의 경우, 메모리 사용량이 증가할 수 있다.
(실제로 크게 문제가 되진 않는다고 한다)
❓ 그렇다면 해결 방법은?
관련된 상태 변수들을 하나의 객체로 묶어서 유지하는 것이다.그렇게 관리하면
상태 변수의 수가 줄어들고, 상태 간의 관계와 종속성을 관리하기 쉬워진다.
또한 리액트 hook중에 하나인 useReducer를 사용하여 관리할 수도 있다.
useReducer를 사용하여 리팩토링한 코드는 useReducer에 관한 글을 쓸 때 작성하도록 하겠다.
(2) 올해 프로젝트 (CMGG)
타입스크립트를 사용하고, react-hook-form 라이브러리를 사용하여 구현했다.
form형식에서 대부분을 react-hook-form을 사용해서 구현했는데 그 이유를 정리해보겠다.
1. 주요 API기능이 쉽고 직관적이다.
예를 들면 handleSubmit 기능은 폼 제출을 처리하기 위해 제출 이벤트가 발생하면 등록된 유효성 검사 규칙에 따라 폼 데이터의 유효성을 검사하고, 유효한 경우에는 지정된 콜백 함수를 호출한다.
=> 즉 별도의 유효성 검사를 시행하는 코드를 짤 필요가 없다는 것이다.2. 성능 최적화
리액트의 효율적인 렌더링 방식과 결합하여, 불필요한 리렌더링을 최소화하고 폼 처리의 성능을 향상시킨다.
이와 관련해서 더 조사해봤는데, 얕은 비교 (Shallow Comparison)를 시행하고, 등록(Registration)과 컨트롤(Control)을 통해서 필요한 폼 데이터만 추적하는 방식을 통해서 성능을 향상시킨다.
또한 입력 대기열 (Input Queue)을 사용하는데, 이를 통해 사용자의 입력에 대한 변경 사항을 추적하는데, 입력 이벤트를 버리지 않고 적절한 타이밍에 변경 사항을 처리하고 업데이트하기 때문에 Input 이벤트에 대한 불필요한 리렌더링을 줄일 수 있다.3. 유효성 검사 및 에러 처리가 쉽다!!
이 부분은 코드를 참고하여 보면 쉽게 알 수 있다.
register의 required 속성을 사용하여 submit의 필수 요소인지 아닌지를 간편하게 설정할 수 있고, pattern에 정규표현식을 넣으면 handleSubmit이 실행될때 자동적으로 유효성 검사를 시행해 준다.
에러처리 또한 react-hook-form에서 정해준 형식대로 작성하면 매우 간단하게 에러처리를 할 수 있다. 위 코드와 같이 각각의 타입별로 에러 메세지를 다르게 띄우는 것도 쉽게 가능하다.
또한 2번에서 설명했던 성능 최적화도 register함수를 사용해서 input 요소를 등록하고, name 속성에 "password"를 지정하여 해당 요소를 식별하면react-hook-form에 의해 자동으로 추적되며, 입력값은 폼 데이터로 관리되어서 onChange이벤트에 대한 불필요한 렌더링을 최소화할 수 있는 것이다.
=> 즉 register함수가 알아서 추적해주기 때문에 각각의 input에 onChange에 상태변경함수를 쓰지 않고도 구현가능하다 👻
이와 같은 이유로 react-hook-form으로 구현을 했을 때, useState만 사용하여 회원가입 기능을 구현했을 때의 단점(상태관리 측면)을 보완할 수 있었다.
그렇다면 react-hook-form을 사용하는게 더 나은 방법아니야?
onChange에 이벤트를 걸어서 input값을 관리하는 방법에 장점은 없을까?
이런 의문점이 들 수 있다.
위와 같이 onchange 이벤트를 통해 실시간으로 유효성 검사를 수행하기 때문에, 사용자는 입력이 유효한지 즉시 피드백을 받을 수 있다. react-hook-form은 사용자가 잘못된 입력을 제출하고 나서야 오류를 알게 되는 데에 반해 위와 같은 방법은 사용자 경험(UX)을 향상시킬 수 있다.
결론
react-hook-form을 사용하면 개발자 입장에서 기능 구현을 쉽고 편리하게 할 수 있지만, 사용자 ux적인 측면을 고려했을 때는 이벤트를 통해서 사용자에게 즉각적인 유효성 검사의 피드백을 해주는 것이 더 나은 방법이라고 생각되었다.
따라서 어떤 방식으로 구현할 것인지에 대해서는 내가 만들고자 하는 방향성(사용자친화적인 ux가 중요한지, 효율성이 높고 빠른 기능구현이 중요한지)이 어디에 중점을 두고 있는지를 생각하여 구현하면 좋을 것 같다는 생각이다.
기능 구현을 할 때 어떤 방식이 좋은지에 대해서, 장점과 단점을 항상 염두해두고 어떨 때 쓰는게 가장 효율적일지를 생각하면서 구현하는 '끊임없이 생각하는 개발자'가 되자
