Common form 으로 중복되는 작업 줄이기

회사에서 새로 맡게된 서비스나 외주 진행하고 있는 것에 form 형식이 많다.

예를 들어 이런 페이지가 3~4개 정도 있다고 하면

  <Form>   
  <Form.Item
            name={email.contact.name}
            label={email.contact.label}
            rules={email.contact.rules}
          >
         <Input placeholder ={email.contact.placeholder}></Input>
 </Form.Item>
   <Form.Item
            name={email.contact.name}
            label={email.contact.label}
            rules={email.contact.rules}
          >
         <Input placeholder ={email.contact.placeholder}></Input>
 </Form.Item>
   <Form.Item
            name={email.contact.name}
            label={email.contact.label}
            rules={email.contact.rules}
          >
         <Input placeholder ={email.contact.placeholder}></Input>
 </Form.Item>
 <Form>

이런 폼이 대충 10~20 여개 나온다. 그걸 일일히 다 쳐야한다. 그러자면 너무 비효율적이고 반복적 업무이다. 현재 configs에서 스트링 값들을 변수로 가져오는 방식을 사용하는데도 이 방식은 개발자스럽지 못하다.

그래서 반복되는 걸 해결하고자 하면 array로 돌리면 된다.

{values.forms.map((form)=>{
	return (<Form.Item
            name={form.name}
            label={form.label}
            rules={form.rules}
          >
         <Input placeholder ={form.placeholder}></Input>
 </Form.Item>)
}))}

문제는 form의 형태가 다를 경우이다. 단순 string만 받는 형태가 아니라 중간중간에 select가 있을 수 있고 date를 받아오는 datepicker가 있을 수 있다.

그렇다면 이걸 어떻게 해결해야할까?
타입을 정해서 나오는 형식을 다르게하면 된다.

const values = {forms: [
{ type: "string", name: "email", label: "email", ...}
{ type: "number", name: "phoneNumber", label: "phone number", ...},
{type: "datePicker" ,name: "date", label: "start date",
...},
{type: "select", name: "city", label: "city", ...}
]}

위와 같이 타입 정의를 해주고!

{values.forms.map((form)=>{

	if(form.type === datePicker){
    	return (
        	<Form.Item
            name={form.name}
            label={form.label}
            rules={form.rules}
          >
       <DatePicker />
       </Form.Item>
        )
    }
    
    if(form.type === select){
    	return (
        	<Form.Item
            name={form.name}
            label={form.label}
            rules={form.rules}
          >
      <Select>
         {form.options.map((option)=> (<Select.Option value="demo">Demo</Select.Option>))}
        </Select>
       </Form.Item>
        )
    }
    
	return (<Form.Item
            name={form.name}
            label={form.label}
            rules={form.rules}
          >
         <Input placeholder ={form.placeholder}></Input>
 </Form.Item>)

위와 같이 정의 해놓고 Commonform으로 만든다음 가져오면
위에 있던 긴 Form 줄이 모두 하나의 폼으로 깔끔하게 된다.

<CommonForm values={values}/>

우리는 깔끔하게 values만 props로 내려주면 된다.

단점은 있다. 중간중간 tooltip등 디테일한 추가 폼 요청 사항이 있으면 이에 대응하기가 쉽지않다(대응하려면 일일히 Commonform에 설정을 해주어야한다), 그래서 이건 간단한 형식에서만 추천하는 방식이다.