[❗️Error] 12/11 (최우철) 리엑트 커스텀 훅으로 상태관리 리펙토링

### 마주친 에러에 대한 설명

- 작업을 진행하던 도중, 불필요하게 늘어나는 form의 형태가 너무 길어지기 시작했고, 이것을 일일이 작성하면서 진행하는 것은 시간낭비 및 유지보수에 어려움을 겪게 만든다는 생각이 들었다

- 여기에는 스크린샷으로 넣을 수 없을만큼 수많은 에러를 마주한 경험을 풀어놓는다
- 주된 이유는, 상태가 너무 중구난방하게 많았기 떄문이다. 사람인지라 너무 많은 코드들이 널부러져있으니 이게 뭔지 알 수가 없어서 이것저것만지다보니 온갖 에러를 마주하게되었고, 이걸 하나하나 해결하다가 지쳐 쓰러지는 상황까지 올 것 같았다.

> 업데이트 전의 상태관리의 모습...의 초창기 형태. 심지어 초창기임에도 상당히 정리되지 않아 중구난방하고 의미없이 코드들이 널부러져 있는 것을 볼 수 있다.

- 지금 위의 이미지에서 보는 상태가 겨우 2개이니 망정이지, 만약 3개고 4개고 수십조억개로 늘어난다고 생각해보라.... 깜찍하다
(그리고 그것을 과거의 내가 겪었다)

- 그래서, useState의 상태관리를 어떻게하면 관심사적으로 분리하여 사용할 수 있을지에 대해 고민하다가 react hook을 알게되었다

- 공식문서에 따르면, react에서 훅을 이용해 상태분리를 하는것은 그리 어렵지않고 그냥 관습적으로(라고 쓰고 강제라고 말하는) 사용하는 "use" prefix를 붙인 함수 내에서 다양한 상태를 정의하면 된다

---

### How to improve
- 그래서, 상태로 관리할 내용들을 useForm이라는 이름의 훅으로 분리한 후, 이 안에다가 전체적인 상태를 관리할 state을 하나 만들어두었다.
- 이 state에 초깃값으로는 훅의 prop으로 전달받는 값으로 적용하도록 해 두었다.
- 상태에 대한 컨트롤은 안에 공용함수로 정의함으로써, 나름대로 객체지향적인 프로그래밍을 만들어보았다.

- 사용할땐 단순히 이 훅을 가져온 후, 초깃값을 인자로 집어넣어 초기화하면 된다.

> 결론적으로, 실제로 해당 상태들이 관리되야 하는 영역의 코드가 확실히 줄고, 의미적으로 분리된 상태관리를 할 수가 있었다