[React] 제네릭 조건부 타입 활용하기 - 컴포넌트를 커스텀훅으로 제공

프론트엔드 개발을 하다보면 흔히 마주할 수 있는 상황이다. Select, Toggle 또는 DatePicker 등의 인풋 컴포넌트들을 설계할 때, 그 컴포넌트들을 핸들링할 커스텀훅도 같이 작성해 사용할 수 있다. 보통은 useToggle, useSelect 등의 이름으로 쓰고 [value, onChange] 같은 배열을 return해 사용한다. 외주 개발을 하면서 초기에 이런 컴포넌트 작업을 해야할 일이 많았다.

 

import useSelect from '~hooks/useSelect';
import Select from '~components/Select';

const App = () => {
  const [value, handleSelectValue] = useSelect();

  return (
    <>
      <Select 
          value={value}
        onClick={handleSelectValue} 
        placeholder={'등급 선택'}
      />
    </>
  );
};

위와 같이 매번 컴포넌트 따로 훅 따로 만들고 사용할 때도 컴포넌트 따로 훅 따로 임포트해와, 훅에서 리턴한 값들을 컴포넌트에 prop으로 넘기는 패턴이 일반적이다. 조금더 개선해볼 수 있을 것 같다.

 

우리가 알고 싶은건 input 값이 바뀌었을때 핸들링하는 onChange 함수가 아니라, 지금 input에 들어있는 value가 궁금한거니까 한번 더 추상화를 해볼 수 있겠다 싶어 고민을 해보았다. 추가로 해당 input이 여러 타입의 value를 가질 수 있다면 타입 추론은 어떤식으로 해야할지에 대한 고민까지.

 

이번 글에선 그 고민에 대한 결과를 적어보았다.

 

---

 

컴포넌트도 커스텀훅으로 제공하기

Select 컴포넌트를 아래와 같이 사용하도록 구현할 수 있다.

 

import useSelect from '~hooks/useSelect';

const RANK_OPTIONS: Option[] = [
  {value: 'white', label: 'white'},
  {value: 'silver', label: 'silver'},
  {value: 'gold', label: 'gold'},
  {value: 'dia', label: 'dia'},
];

const App = () => {
  const [rank, renderSelectRank] = useSelect(RANK_OPTIONS, 'silver');

  return (
    <>
      {renderSelectRank({placeholder: '등급 선택'})}
    </>
  );
};

useSelect Hook의 인자로 옵션 배열과 initialValue를 넘겨준다. 컴포넌트와 직접적으로 관련괸 renderSelectRank에는 placeholder를 넣어주어 사용한다.

 

const useSelectInput = (
  options: Option[],
  initialValue: selectOption = null,
) => {
  const isMulti = isMultiSelect(initialValue);
  const [value, setValue] = useState<selectOption>(initialValue);

  const renderSelectInput = ({placeholder, width}: SelectInputProps) => (
    <SelectStyles width={width}>
      <Select
        isMulti={isMulti}
        onChange={selectOption => setValue(selectOption)}
        defaultValue={initialValue}
        options={options}
        placeholder={placeholder}
      />
    </SelectStyles>
  );

  return [value, renderSelectInput] as const;
};

export default useSelectInput;

간략하게 표현된 useSelect Hook의 구현이다. 훅이 render함수를 반환하는게 낯설 수도 있지만 (컴포넌트를 적절한 위치에 렌더링하고 선택된 값을 내보낸다는) 딱 필요한 정보만 App에서 볼 수 있게 되었다. render 함수에 인자로 넘겨준 값이 실제 컴포넌트의 props으로 들어간다는 점에서, 비슷하게 객체의 형태로 넘기도록 설계했다는 점도 매력있다.

 

 

컴포넌트가 여러 타입의 value를 가질 수 있다면?

 

isMulti를 true로 주면 위의 사진처럼 값을 여러개 선택할 수 있다. 현재 사용하고 있는 react-select라이브러리는 value에 Option 또는 Option[] 타입을 받을 수 있다.

 

type selectOption = SingleValue<Option> | MultiValue<Option>;

const isMultiSelect = (value: selectOption): value is MultiValue<Option> => {
  return (value as MultiValue<Option>)?.length !== undefined;
};

export interface SelectInputProps {
  placeholder?: string;
  width?: number;
}

해당 Select 컴포넌트에게 multi인지 single인지 여부를 따로 받지 않고, 인자로 받은 initialValue의 타입을 보고 결정하도록 했다.

 

const [rank, renderSelectRank] = useSelect(RANK_OPTIONS, []);

초기값으로 빈 배열을 넣어주면 MultiSelect 컴포넌트로써 동작한다.

 

 

타입추론 문제

문제는 여기다. useSelect 커스텀훅에서 나온 value(여기선 rank)의 타입이 내가 생각하는대로 나오지 않는다는 것이다. SingleValue와 MultiValue의 유니온으로 state의 상태를 지정해주었기 때문에, 커스텀훅에서 반환될때도 그 타입(selectOption)으로 나온다.

 

if (isMulti){
    return [value as MultiValue<Option>, renderSelectInput] as const;
} else {
    return [value as SingleValue<Option>, renderSelectInput] as const;
}

이렇게 타입 가드를 사용해 단언을 해주면 될까하고 수정해보았더니

 

무언가 적용이 되긴하지만, 원하는대로 정확하게 타입이 추론되지는 않았다.

어떻게 하면 해결할 수 있을까!

 

---

 

제네릭 조건부 타입 활용하기

useSelect 커스텀훅에서는 single과 multi select를 모두 처리하기 때문에 그에 맞게 반환 타입을 수정해야 한다. 하지만 useState의 타입을 통해 타입 추론을 완벽하게 하려면 위와 같은 어려움이 있었다

 

조금의 삽질 끝에, 타입스크립트의 제네릭을 통해 커스텀훅 함수에 전달되는 initialValue의 타입에 따라 반환 타입이 달라지도록 처리할 수 있었다.

 

 

조건부 타입

타입은 가능한 값들의 집합이다

조건부 타입에 대한 이야기에 앞서 이 개념을 한번 더 정리하고 가면 좋다. 이펙티브 타입스크립트 스터디를 처음 시작할때 가장 헷갈렸던 부분 중 하나이다. T extends U 이면 T는 U의 부분집합이라고 말할 수 있다.

 

T가 U를 확장했다는 것은, U에 있는 모든 속성과 메소드들이 T에도 있다는 것을 보장한다. 다르게 말하면 'T는 U에 할당 가능하다' 라는 의미를 가지고 있다. (U로 할 수 있는 모든 것들을 T로도 할 수 있다 → T는 U에 할당 가능하다)

 

T extends U ? X : Y

 

이를 통해 아무런 타입의 값이나 들어갈 수 있는 제네릭 T에 제약을 걸 수 있다. 그리고 그 개념을 이용해 조건부 타입을 나타낼 수 있다. 삼항연산자와 비슷하게 생겼다. T가 U를 확장하면(True면) 타입 X를, False면 타입 Y를 반환한다.

 

 

적용해보기

그렇다면 지금 useSelect 컴포넌트에선 이렇게 구현을 해볼 수 있다.

 

type SingleSelect = SingleValue<Option>;
type MultiSelect = MultiValue<Option>;

const useSelectInput = <T extends SingleSelect | MultiSelect>(
  options: Option[],
  initialValue: T,
) => {
  const isMulti = isMultiSelect(initialValue);
  const [value, setValue] = useState<T>(initialValue);
  //...

  return [value, renderSelectInput] as SelectReturnType<T, typeof renderSelectInput>;
};

T는 SingleSelect 또는 MultiSelect에 할당 가능한 객체들의 집합이다. 인자로 받은 initialValue와 state의 타입은 당연히 T이겠다. 그리고 커스텀훅은 SelectReturnType<T>라는 타입을 반환한다.

 

type SelectReturnType<T, RenderType> = T extends MultiSelect
  ? [MultiSelect, RenderType]
  : [SingleSelect, RenderType];

여기서 조건부 타입이 등장한다. T가 MultiSelect에 할당 가능하면, MultiSelect에 맞는 리턴 타입을 반환한다.

 

조건부 타입은 컴파일 타임에 타입을 결정하는데 사용된다. 하지만 isMultiSelect 같은 타입 가드는 런타임에서 실제 값에 따라 동작한다. 그렇기 때문에 아까 위에서 타입가드에서 나온 결과를 조건으로 타입을 단언해 반환했을 땐 제대로 추론이 되지 않는것이라고 결론을 내렸다.

 

 

+ initialValue를 생략하고 싶다면

const [rank, renderSelectRank] = useSelect(RANK_OPTIONS, []); //Multi
const [rank, renderSelectRank] = useSelect(RANK_OPTIONS, null); //Single

initialValue의 타입을 보고 select state의 타입을 결정하고 있다. SingleSelect이고 초기값이 없는 경우에도 위와 같이 null을 필수적으로 주어야 한다. 그럴 때 initialValue(두번째 인자)를 생략할 수 있게 하기 위해 initialValue에 디폴트 값 null을 넣어보았다.

 

const useSelectInput = <T extends SingleSelect | MultiSelect = SingleSelect>(
  options: Option[],
  initialValue: T = null as T,
) => {

이렇게. initialValue가 null일때 SingleSelect가 나올 수 있도록 T의 디폴트도 지정해주었다.

 

드디어 내가 생각하는대로 타입 추론이 되는것을 확인해 볼 수 있다.