Builder.shin

React Hooks로 Form 상태 관리 리팩토링

배경

사내 관리자 페이지의 사용자 등록 폼이 클래스 컴포넌트로 작성되어 있었다. 여러 input 필드와 validation 로직이 뒤섞여 있어 유지보수가 어려웠다. React 16.8부터 Hooks가 안정화되었고, 팀 내에서도 도입 논의가 있어 이번 기회에 리팩토링을 진행했다.

기존 코드의 문제점

  • componentDidMount, componentDidUpdate에 분산된 로직
  • this 바인딩으로 인한 보일러플레이트
  • state 업데이트 로직의 복잡도

Hooks 적용

상태 관리 단순화

const [formData, setFormData] = useState({
  username: '',
  email: '',
  role: 'user'
});

const handleChange = (e) => {
  const { name, value } = e.target;
  setFormData(prev => ({ ...prev, [name]: value }));
};

Custom Hook으로 분리

validation 로직을 별도 Hook으로 추출했다.

function useFormValidation(values) {
  const [errors, setErrors] = useState({});
  
  useEffect(() => {
    const newErrors = {};
    if (!values.email.includes('@')) {
      newErrors.email = '유효한 이메일을 입력하세요';
    }
    setErrors(newErrors);
  }, [values]);
  
  return errors;
}

결과

  • 코드 라인 수: 180줄 → 125줄
  • 테스트 작성 용이성 증가
  • 로직 재사용 가능

다만 팀원들이 Hooks에 익숙하지 않아 코드리뷰 시간이 평소보다 길었다. useState의 비동기 특성이나 useEffect의 dependency array 개념을 설명하는 시간이 필요했다.

향후 계획

다른 Form 컴포넌트들도 점진적으로 마이그레이션할 예정이다. react-hook-form 같은 라이브러리 도입도 검토 중이다.

React Hooks로 Form 상태 관리 리팩토링