Facts
사용자가 송금 관련된 정보를 입력할 송금 form 에서 사용할 react custom hook 제작
모인에서 송금을 진행할 때 사용자는 받는사람의 정보 ( 이름, 은행 등) 을 입력하여햐 한다.
하지만 모든 국가가 동일한 정보를 필요로 하는게 아니라 국가별로 필요로 하는 정보가 다르고
송금받는 사람이 개인이냐, 법인이냐에 따라 다르다.
원래는 해당 정보의 DB fileds 형식에 client 를 맞추려 하였지만 DB fileds 와 화면과 match 가 안되서 debug 할 때나 아니면 후에 이 코드를 보는사람이 이해하기 힘들 것 같았다.
이에 화면에 맞게 상태 field 들을 관리하다가 http request 보낼 때 db fileds 에 맞춰서 보내는 것으로 컨셉을 잡았다.
form 상태의 경우 사용자의 입력이 자주 일어나기 때문에 redux store 에서 관리하면 상태가 변할 때마다
최상위 컴포넌트의 상태가 변하는 것이기 때무에 성능적으로 안 좋고
어차피 송금 form 에서만 사용하지 다른 component 들에서는 사용하지 않기 때문에 redux 를 사용하지 않기로 했다.
상태를 관리해야 할 데이터로 송금방식, 송금받는 사람의 종류 ( 개인, 법인 ) , 받는 사람 정보
EDD ( 자금출처, 직업, 관계, 송금목적 ) 가 있었다.
특히 받는사람 정보같은 경우 나라별로, 송금방식 별로 form 이 달라졌다.
특정 field 가 변하면 다른 field 의 정보도 같이 변경해줘야 하는 경우가 생겼다.
이런 처리를 useState 로 하게 되면 물론 할 수는 있지만 코드가 복잡해져서
가독성, 예측가능성이 떨어진다.
때문에 useReducer hook 을 사용했다. 또한 모인 legacy code 의 단점이었던 react-component 내부에 온갖 상태관련 로직, util 함수들을 때려박아 최악의 가독성을 해결하고자
react Component 내부에서 상태관리 로직을 custom hook 으로 분리해서
해당 customhook 을 component 에서 호출해서 사용하는 것으로 구성했다.
결과적으로 관심사를 분리하여 가독성을 높일 수 있었다.
Findings
custom hook 은 custom hook 을 호출한 react component 가 unmount 되어야지만 상태가 초기화 된다.
Feelings
점점 시간에 대한 압박이 들어오고 있다.
그럴 수록 test 제끼고 그냥 code 대충 써갈낄까 하는 생각도 든다.
하지만 그래서는 개선의 의미가 없다.
미래에는 내가 쓴 code 가 legacy 가 되어 누군가 github log 로 내 github id 를 보며 욕하지느 않게 해놓고 싶다.
