[ZIMZIM] input과 관련된 공통 컴포넌트 controlled component와 uncontrolled component 중 어느것을 따라야 할까?

react 공식문서를 살펴보면 controlled component와 uncontrolled component에 대한 설명이 있다(링크).

 

controlled component는 state로 관리되며 input의 onChange 이벤트를 통해 입력값을 즉각적으로 받아볼 수 있으며, 이를 통해 포맷팅, 유효성 검사를 할 수 있다. 복잡한 폼과 데이터 처리가 필요할 때 권장된다.

uncontrolled component는 ref로 관리되며 필요할 때만 해당 데이터를 참조하는 방식으로 단순한 폼에 사용하여 성능을 향상 시킬 수 있다. 

 

ZIMZIM에서 로그인 폼은 uncontrolled component, 회원가입은 controlled component로 구성하였다.

로그인 시 사용자가 아이디와 패스워드를 입력하고 로그인 버튼을 클릭했을 때 ref를 통해 사용자가 입력한 값이 있으면 서버에 전송하며 없으면 에러 문구를 띄워 다시 입력하도록 유도했다.

회원가입 시 사용자가 아이디, 닉네임, 비밀번호를 입력하게 되는데 이때 유효성 검사가 이루어지며 유효성 검사를 하기위해서는 사용자가 입력한 값을 즉시 받아 처리해야되기 때문에 controlled component를 도입했다.

 

로그인 폼과 회원가입 폼에서 모두 input을 사용하여 공통컴포넌트를 만들어 재사용하고자 했다.

먼저 uncontrolled component의 input과 controlled component의 input을 따로 구성하는것을 생각해 봤다.

둘의 차이는 ref로 접근하느냐, value로 접근하느냐의 차이인데 컴포넌트를 두개를 만들어 사용하는 것은 추후 개발시 혼동을 줄 수 있다고 판단하게 되었고 하나의 컴포넌트를 만들어 두가지 방법에 접근하는것이 낫다고 판단하게 되었다.

 

먼저 forwardRef를 통해 부모 컴포넌트에서 ref를 통해 input에 접근할 수 있게 하며 props들을 받아 폼 필드의 동작을 제어할 수 있게 만들었다. props 중 value는 controlled componet 방식을 사용할 때 입력 필드 값이며 defaultValue는 uncontrolled component 방식을 사용하는 초기값이다.

 

이후 controlled인지 uncontrolled인지 확인 후 controlled인 경우 값이 변경될때마다 업데이트한다(useEffect 구문). handleChange함수에서는 controlled일 경우 onChange 이벤트에서 이벤트를 관리할 수 있도록 하며 uncontrolled에서는 internalValue를 계속해서 업데이트 하는 방식으로 처리한다.

 

결론적으로 코드는 이렇게 작성되었다.