Form 컴포넌트의 관심사 분리하기 - 전체 input 상태값을 하나의 handler 함수로 관리

Form을 저장할 때 필요한 input 상태값을 object 타입으로 한번에 관리하고, 각 input 값이 변동될 때마다 상위 부모에서 handleChange 함수를 호출하여 form 상태값을 일괄적으로 관리한다.

상위 부모는 상태값 관리 및 비즈니스 로직을 담당하고, 하위 컴포넌트는 상위에서 상태값을 받아 ui 만 그릴 수 있도록 관심사를 분리하였다. 

 

기본적인 설계는 위의 설명과 같이 컴포넌트를 구현하려고 코드를 리팩토링하는데 초점을 맞추었는데, 뭔가 문제가 있었다. 

상위 부모 컴포넌트 

 

export const Form = () => {
  const initialFormValue: Info = {
    name: '',
    location: {
      address: '',
      detailAddress: '',
      zipCode: '',
      latitude: 0,
      longitude: 0,
    },
     isGroup: false,
  };

  const [formValue, setFormValue] = useState<Info>(initialFormValue);

  const handleChangeFormValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, checked } = e.target;
    if (e.target.type === 'checkbox') {
      setFormValue({
        ...formValue,
        isGroup: checked,
      });
    } else {
      setFormValue({
        ...formValue,
        [name]: value,
      });
    }
  };

  const handleCreateInfo = (inputs: Info) => {
  	//생성 api를 서버에 요청
  };

  const handleSave = () => {
      handleCreateInfo(formValue);
  };

  return (
    <>
      <BasicInfoForm
        formValue={formValue}
        onChangeFormValue={handleChangeFormValue}
      />
      <Box display={'flex'} justifyContent={'flex-end'} gap={2}>
        <Button onClick={handleCancel}>
          취소
        </Button>
        <Button onClick={handleSave}>
          저장
        </Button>
      </Box>
    </>
  );
};

 

하위 자식 컴포넌트 

 

interface Props {
  formValue: Info;
  onChangeFormValue: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
export const BasicInfoForm = (props: Props) => {
  const { formValue, onChangeFormValue } = props;
  const { siteName, phone, location } = formValue;

  return (
    <Grid container border={'solid 1px'} mb={3}>
    
        <Typography>이름</Typography>
        <TextField
          placeholder='이름을 입력하세요'
          name='name'
          value={name}
          onChange={onChangeFormValue} />
          
        <Typography>전화번호</Typography>
        <TextField
          name='phone'
          value={phone}
          onChange={onChangeFormValue} />
          
        <Typography>그룹 설정</Typography>
        <FormGroup>
        <FormControlLabel
          control={
            <Checkbox
              checked={isGroup}
              onChange={onChangeFormValue}
            />
            }
           />
        </FormGroup> 
          
    </Grid>
  );
};

 

(주소 Textfield도 이 컴포넌트에서는 동일한 반복이므로 생략 )

 

 

 

위 예제 코드를 세부적으로 보자!

 

 

interface Info {
    name: string;
    location: {
      address: string;
      detailAddress: string;
      zipCode: string;
      latitude: number;
      longitude: number;
    },
     isGroup: boolean;
     phone?: string
  };

 const [formValue, setFormValue] = useState<Info>(initialFormValue);

 

 

상위 컴포넌트에서 `formValue`라는 상태값으로 이름, 주소, 전화번호, 그룹설정 여부 데이터를 Info라는 타입의 객체형태로 관리한다. 

 

 

 

  const handleChangeFormValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, checked } = e.target;
    if (e.target.type === 'checkbox') {
      setFormValue({
        ...formValue,
        isGroup: checked,
      });
    } else {
      setFormValue({
        ...formValue,
        [name]: value,
      });
    }
  };

 

 

그리고 이 `formValue`라는 상태데이터는 상태를 변경해주는 함수`handleChangeFormValue` 를 호출하면서 각 이름,주소 데이터 상태가 변경된다. 

여기서 실제 유저의 이벤트를 받는 인풋 컴포넌트, 체크박스 컴포넌트는 하위에 있고, 상위 부모에서 해당 프로퍼티의 상태값을 변경시켜야하기 때문에 하위 컴포넌트의 이벤트를 부모에서 알아야 된다고 생각했다.

그래서 받아오는 event 타겟의 이름(`name`, `phone`, ...)에 따라 event.target.value를 변경시켜주도록 상위 부모에서 이벤트 핸들러 함수를 작성해주었었다. 

 

그런데 이 코드에는 이런 문제점이 있는데... 

기획이 고도화되어 기능이 추가되어 form에서 새로운 데이터를 추가해서 submit해야하는 상황이 있다고 하자. `Info` 타입으로 관리하는 데이터에서 배열 타입을 가진 그룹 데이터도 추가해야 된다.

 

 

interface Info {
  ...동일
  groups: string[]
}

 

 

`groups` 프로퍼티로 관리하는 그룹 데이터는 ui를 자동완성 검색 컴포넌트 구현했는데, 이 검색 컴포넌트는 onChange 이벤트로 다른 이벤트 타입과 추가적인 인자를 필요로 한다.  

부모에서는 핸들체인지 함수의 인자로 e: React.ChangeEvent를 받는 반면에,  하위 자식인 자동완성 컴포넌트는 함수의 인자로 React.SyntheticEvent와 newArr라는 새로운 배열까지 두 가지의 인자를 받는다. 

 

 const handleChangeFormValue = (e: React.ChangeEvent<HTMLInputElement>) => {...}

const handleChangeAutoComplete = (e: React.SyntheticEvent, newArr: string[]) => {...}

 

 

 

그래서, 자동완성 컴포넌트는를 추가한다면 상위부모의 `handleChangeFormValue`함수로 일괄적으로 데이터 변경을 처리할 수 없다는 문제점이 드러났다. 

시도

이렇기에 고민끝에 `자동완성의 상태값을 관리하는 배열`을 따로 부모에 추가해서 하위 자식 자동완성 상태를 관리했다. 그런데, 이 경우 자동완성에 해당하는 상태는 formValue 상태와 따로 독립적으로 작동한다. 그렇기에 form을 submit 하는 저장시에 그 `formValue`와 `자동완성 배열 Value` 두 가지를 합쳐서 서버에 저장하는 방식으로 구현하는 것으로 해결했다.

 

하지만 위와 같은 해결책은 당장 급한 불을 끈 workaround에 불과하다. 왜냐면? 

 

• `HTMLInputElement` 이벤트를 발생시키지 않는 컴포넌트는 부모의 핸들체인지 함수로 제어할 수 없어, 부모의 change 함수에서 모든 상태값을 제어하고자 했던 의도로 했던 리팩토링한 의미가 없어진다.
• 또, 따로 상태값으로 관리하고 있는 Autocomplete의 ui라도 변경되면 그 상태를 따로 관리하고 있는 곳을 찾아서 또 다 수정해줘야 하는 문제점이 있을 수 있다. 

 

리팩토링

부모에서 일괄적으로 자식 상태를 변경시키고 싶으면 change 함수를 변경할 필요가 있다.

여기서 부모는 자식의 이벤트 정보를 알 필요가 없다.

`이벤트는 각 자식 컴포넌트에서` (인풋이던 체크박스던 자동완성이던) 이벤트핸들러로 호출하고, 부모의 change 함수 매개변수에는 event 정보가 아닌 새로 갱신하고자 하는 값을 해당 프로퍼티를 키값으로 하는 객체 형태로 적어준다.

 

 

  const handleChangeFormValue = (newValue: Partial<Info>) => {
    setFormValue({...formValue, ...newValue });
  };

 

 

이렇게 적어주면 부모에서 자식컴포넌트에 연결된 상태값을 하나의 함수로 제어할 수 있게된다. 

코드도 단 3줄로 줄어들었다. 

이름 컴포넌트 

       <TextField
          value={name}
          onChange={(e) =>
            onChangeFormValue({ name: e.target.value })
          } />

 

 

하위 자식에 있는 컴포넌트에서 onChange 이벤트를 바인딩해 해당 컴포넌트에서 발생하는 이벤트 밸류값을 인자로 받아 상위에서  props로 넘겨받은 `onChangeFormValue` 함수를 호출해준다. 

체크박스 컴포넌트 

         <FormGroup>
          <FormControlLabel
            control={
              <Checkbox
                checked={isGroup}
                onChange={(e) =>
                  onChangeFormValue({ isGroup: e.target.checked })
                }
              />
            }
          />
        </FormGroup>

 

 

체크 박스도 마찬가지.

체크박스를 눌러서 받는 이벤트 값은 event.target.checked 값으로 알 수 있으니 { 해당 프로퍼티 : 이벤트 값 } 을 인자로 넘겨주어 상위에서 관리하고 있는 `FormValue` 상태값이 변경되게 한다.

 

 

리팩토링하느라 재밌었다!!!!