Typescript + React 조건부 props 전달하기 - discriminated unions

서론

기본적인 Form 컴포넌트가 있는데, 이름, 주소, 핸드폰 번호를 input으로 받을 수 있고, 저장버튼을 누르면 input 정보가 저장된다. 

이 Form 컴포넌트는 생성시, 수정시 재사용할 수 있는 컴포넌트이다.

 

생성시

기본 input 초기 상태값이 빈 string을 가진다.

저장 이벤트 발생시 input 데이터 값을 모아서 생성요청을 보내는 함수인 onCreateInfo라는 함수를 호출한다.

 

수정시

상위 컴포넌트에서 전달 받은 데이터 value값을 초기값으로 가진다. 

저장 이벤트가 발생하면 input 데이터를 서버에 수정 요청을 보내는 onEditInfo라는 함수를 호출한다. 

 

 

interface Props {
  data?: Data; //수정시에만 존재
  onCreateInfo?: (inputs: Data) => void;
  onUpdateInfo?: (inputs: Data) => void;
}

export const InfoForm = ({ data, onCreateInfo, onUpdateInfo}: Props) => {

  const initialFormValue: Data = {
    name: '',
    address: '',
    phone: '',
  };
  
  const [formValue, setFormValue] = useState<Data>(
    data
      ? {
          name: data.name,
          address: data.address,
          phone: data.phone
        }
      : initialFormValue,
  );
  
  const handleSave = () => {
    //data가 있으면 수정하기
    if (data) {
      onUpdateInfo?.(formValue);
    }
    // 없으면 생성하기
    else {
      onCreateInfo?.(formValue);
    }
  };
  
  const handleChangeFormValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target; //name은 인풋요소에 바인딩시킨 'name' 'address' 'phone'
    setFormValue({ ...formValue, [name]: value });
  };
  
  return (
    <>
       <TextField
          name='name'
          value={name}
          onChange={handleChangeFormValue} />
       <TextField
          name='address'
          value={address}
          onChange={handleChangeFormValue} />
       <TextField
          name='phone'
          value={phone}
          onChange={handleChangeFormValue} />
        <Button onClick={handleCancel}>
          취소
        </Button>
        <Button onClick={handleSave}>
          저장
        </Button>
    </>
  );
  }

 

 

아래는 Form 컴포넌트를 사용하는 부모 컴포넌트이다.

 

생성 컴포넌트

export const CreationContainer = () => {
  const [postSiteInfo] = usePostSiteInfoMutation();
  
  const handleCreateInfo = (inputs: Data) => {
    postSiteInfo(inputs)
      .unwrap()
      .then((res: Data) => {
        //detail view 페이지로 이동
      })
      .catch((err: ErrorReturnType) => alert(err.data.error.message));
  };

  return (
    <>
      <Typography variant='h5'>
        생성
      </Typography>
      <InfoForm
        onCreateInfo={handleCreateInfo}></InfoForm>
    </>
  );
};

 

 

수정 컴포넌트

export const EditContainer = () => {

  const { data, isSuccess } = useGetSiteInfoQuery(siteId);
  const [updateSiteInfo] = useUpdateSiteInfoMutation();
 
  const handleUpdateInfo = (inputs: Data) => {
	 updateSiteInfo({ id: siteId, body: inputs })
      .unwrap()
      .then((res) => {
        alert('정보가 수정되었습니다');
      })
      .catch((err: ErrorReturnType) => alert(err.data.error.message));
  };

  return (
    <>
      <Typography variant='h5'>
        수정
      </Typography>
      <InfoForm
 		data={data}
        onUpdateInfo={handleUpdateInfo}}></InfoForm>
    </>
  );
};

 

 

기존 내가 코드를 짤때 생각했던 로직은 이렇다.

생성, 수정시 공통으로 사용할 수 있는 Form 컴포넌트를 사용하는데 생성시에는 onCreateInfo라는 props만 전달해주면 되고, 수정시에는 아래와 같은 data 객체와 onEditInfo라는 props를 전달해주면 된다. 

 

{ 
  name: '원래 가지고있는 이름',
  address: '주소',
  phone: '폰번호' 
}

 

 

이렇게 코드를 작성하다보니 위와 같은 조건으로 typescript로 코드를 짜려면 Form 컴포넌트는 아래와 같이 모든 필드가 optional이 되어야 작동하였다. 

 

 

interface Props {
  data?: Data; //수정시에만 존재
  onCreateInfo?: (inputs: Data) => void;
  onEditInfo?: (inputs: Data) => void;
}

 

 

하지만 모든 컴포넌트가 optional인 props를 가지는 컴포넌트는 과연 괜찮은걸까?

이 코드의 문제는 아래와 같았다.

 

---

1. 모든 props가 optional이라 Form 컴포넌트를 사용하는 입장에서는 생성할 때 필요한 props와 수정할때 필요한 props가 어떤건지 알기 힘들다.
2. 만약 Form 컴포넌트 사용시 아무런 props를 전달하지 않거나, 생성할 때 data를 props로 전달한다면?
   컴포넌트가 의도했던 바와 다르게 동작한다. 

---

 

따라서, 위와 같은 문제를 막기 위해 해결책을 고민해야 했다.

 

1. 수정시에는 data, onUpdateInfo 만 전달하기 
2. 생성시에는 onCreateInfo 만 전달하기 

 

금요일부터 주말까지 계속 나를 고민에 빠뜨린 문제였는데, 고민 끝에 discriminated unions 타입으로 문제를 해결할 수 있었다.

 

Discriminated unions 구별된 유니온

union (합집합) 타입으로 A, B 타입 둘을 합친 결과로 A, B 타입 모두 사용할 수 있는데, 이 둘 타입이 서로 구별될 수 있는 공통된 프로퍼티(판별자/구별자)를 가지고 있다. 따라서 그 공통적인 프로퍼티로 A, B 타입을 쉽게 구별할 수 있게 한다. 

 

 

type ConditionalProps =
  | {
      type: 'edit';
      data: Data;
      onUpdateInfo: (inputs: Data) => void;
    }
  | {
      type: 'create';
      onCreateInfo: (inputs: Data) => void;
    };

 

 

여기서는 type 이라는 속성 값으로 edit에 필요한 props와 create에 필요한 props를 구분한다. 

즉, Conditional Props는 결국 Union 타입이라 위에 명시된 모든 속성값 type, data, onUpdateInfo, onCreatInfo 을 다 사용 가능하다. 하지만 우리가 원하는 건 각 type 에 따라 사용할 수 있는 속성값을 나누어 주는 것이다. 

따라서 서로를 구분할 수 있는 공통적인 프로퍼티인 type를 주어 edit 에 필요한 속성값과 create에 필요한 속성값을 구분해준다. 

 

 

export const InfoForm = (props: ConditionalProps) => {

  const initialFormValue: Data = {
    name: '',
    address: '',
    phone: '',
  };
  
  const [formValue, setFormValue] = useState<Data>(
    props.type === 'edit' //<----- props.type으로 구분
      ? {
          name: props.data.name,
          address: props.data.address,
          phone: props.data.phone
        }
      : initialFormValue,
  );
  
  const handleSave = () => {
    //props.type가 edit 이면 수정하기
    if (props.type === 'edit') {
      props.onUpdateInfo(formValue);
    }
    else {
      props.onCreateInfo(formValue);
    }
  };
  
 //..이하 코드는 맨 처음 예시 코드와 동일
  }

 

 

사용할때는 type을 narrowing down해주어 props.type가 'edit'인 경우 쓸 수 있는 프로퍼티인 data 와 onUpdateInfo 를 활용해서 로직을 작성하고, 그 이외 생성시에는 onCreateInfo 프롭스를 활용해서 생성시 필요한 함수를 호출한다. 

여기서 애먹었던 부분이 있는데, 습관처럼 아래와 같이 props를 구조 분해 할당했더니 ..

 

export const InfoForm = (props: ConditionalProps) => {
const { type, data, onUpdateInfo, onCreateInfo } = props

 

 

Property 'data' does not exist on type 'ConditionalProps'.ts(2339)

 

 

이렇게 ts 에러가 났다. 

discriminated unions를 이런 예제처럼 사용할 때에는 props를 판별자에 따라 구별되게 사용하도록 타입을 좁혀둔 것이므로 모든 프로퍼티를 구조분해할당할 수는 없는 듯하다. 

따라서 구조분해할당하지 않고 그대로 props 변수를 가지고와서 사용하면 된다.

 

결론 

 

구별된 유니온을 사용해서 Form 컴포넌트를 사용하면, 이제 생성컴포넌트에서 수정할때 쓰이는 data props를 사용하려고 하면 IDE에서 에러를 내준다.

마찬가지로? 수정컴포넌트에서 data props가 빠진다면 에러를 내주고, 생성시 필요한 onCreateInfo를 props로 사용한다면 마찬가지로 에러를 내준다.

 

 

이제 필요할 때 사용할 수 있는 type으로 narrowing down 해줌으로써 더 안정적인 프로그래밍을 할 수 있다. 더 나은 코드가 되었다. 

👏🏽👏🏽👏🏽

 

 

References

https://www.typescriptlang.org/docs/handbook/2/narrowing.html#discriminated-unions

https://dev.to/mdmostafizurrahaman/conditional-props-in-react-with-the-help-of-discrimination-union-type-5cn2