마지막 팀 프로젝트로 Continew 라는 이어살기 및 쉐어하우스 중개 플랫폼을 개발했었다.
프로젝트 도중 갑자기 온라인 계약서 기능을 내가 맡아서 추가하게 되었고, 남은 기간동안 계약 단계 + 판매자/구매자 여부를 판단해서 부분적으로 disabled 된 form을 제시하고 서명까지 받아야한다는 중압감에, 과거의 나는 일단 돌아가는 코드를 짠다...🙄
계약서 구조
📍 프로젝트 계약서 양식
📍 구조
Props drilling은 피해야겠는데 가독성은 높여야 하고 도메인은 낯설고.... 그래서 일단 컴포넌트를 UI와 비슷하게 작게 나누고, 상태는 부모 컴포넌트가 아니라 Redux에서 관리하도록 만들었다. 그런데 생각보다 코드가 세상 세상 복잡해졌다.
비제어 컴포넌트를 사용해보자
프로젝트 기간 동안은 문제점을 알고 있지만 외면했고 (그러면 안됐다) 프로젝트 기간이 끝나고 다시 공부해보니 form을 제출할때만 데이터를 모아서 제출하면 되는 방식이기 때문에 비제어 컴포넌트를 쓰는게 맞겠다는 생각이 들었다. 여러가지 방법을 찾아보다가 React Hook Form을 알게 되었고 이 라이브러리를 사용하면 코드도 줄이고 렌더링도 최적화 할 수 있겠다고 판단했다.
부끄럽지만 '누군가는 비슷한 고민을 하고 있지 않을까?' 라는 생각과 선생각 후코딩을 하자는 반성의 의미에서 전과 후를 비교해보았다.
📍 단순 input 엘리먼트(제어 컴포넌트)만 사용했던 리팩토링 전
한 글자를 칠 때 마다 렌더링 된다 당연하다
📍 React Hook Form을 이용해 비제어 컴포넌트를 사용한 리팩토링 후
React Hook Form
Reack Hook Form 공식문서 가 상세해서 그래도 큰 어려움은 없었다.
React Signature Canvas와 함께 사용해보자
비대면 서명을 받기 위해 React Signature Canvas를 이미 사용하고 있었다.
외부에서 컴포넌트를 제어하는 React-Select, AntD, MUI 등과 함께 사용하기 위해 React Hook Form은 Controller라는 Wrapper를 제공한다.
공식문서와 함께 아래 게시글을 참고해서 서명 또한 React Hook Form을 사용해 구현할 수 있었다.
https://ozkaptanhakan.medium.com/how-to-add-react-signature-canvas-on-react-hook-form-f1e93929959e
저 깊은 중첩구조를 뚫고 들어갈 useFormContext, register, handleSubmit 과 같은 메서드를 사용해 리팩토링을 완료했다.
Redux에서 React Context로
또 계약서 내용 + 현재 사용자의 역할 + 현재 단계에 대한 정보가 페이지 전반적으로 필요했는데 이전에는 Redux를 사용해서 관리했다.
하지만
- 처음 렌더링 할 때 정보를 저장하고, 변경되지 않을 것이고(= 상태 관리가 필요하지는 않다)
- 4~5단계의 props drilling를 피하자
이러한 조건을 고려해봤을 때 React Context를 사용하기로 결정하고 ContractContext를 만들어주고 Provider를 통해 제공해주었다.
결과
총 731줄(+236 -495)의 코드라인이 수정되었다.또한 원래의 기능을 그대로 유지하면서 렌더링을 최적화 시켰다.
기능 구현은 완료되었지만 코드를 다시 보다보니 내부 함수 리팩토링도 진행해야할 것 같다.
처음부터 방향을 잘못 잡고 시작한 코드가 산더미처럼 쌓이는 것을 보면서 볼때마다 가슴이 답답했다 😱
'갈아엎고 새로운 방향을 찾아서 내가 그대로 기간 내에 적용할 수 있을까? 우리 프로젝트에서 정말 중요한 핵심 기능인데... 괜히 건드렸다가 발표날 구현이 안되면....' 하고 생각하면서 어째저째 돌아가는 코드는 만들었다.
하지만 다시는 급하다고 일단 아는대로 코드를 짜기 시작하는 행동은 하지 말아야겠다고 다짐했다. 하루정도라도 시간을 내서 받은 요구사항, 또 이 기능이 정확하게 어떻게 동작해야하는지 정리하고 그에 맞게 기능을 갖추도록 최대한 알아보는 것이 시간을 더 절약하는 길이라는 것을 깨달았다.
외부 라이브러리를 사용할 때는 신중하게 판단해야 하겠지만 위와 같은 이유로 현재의 코드 변화는 매우 만족스럽다!
