GenericType 을 활용해서 컴포넌트를 만들어보자

글을 너무 오랜만에 씁니다... 이제부터 열심히 써볼려고 합니당..

 

CATE 어드민 페이지에서는 유저 / 아티스트 / 스페이스 / 전시 등을 각각의 페이지에서 관리하고 있습니다.

각각의 페이지에서 특정 유저들을 검색 할 수 있도록 도와주는 SearchForm 컴포넌트가 있습니다.

 

해당 컴포넌트는 각 페이지의 데이터 포맷에 맞는 컴포넌트로 분리 되어있었습니다.

<UserSearchForm>, <ArtistSearchForm>, <SpaceSearchForm> 등등…

해당 컴포넌트에 필요한 UI 컴포넌트의 수와 / 타입이 달랐기 때문에 빠르게 분리하여 작업을 진행하였습니다.

 

하지만 SearchForm 기능변경 요청이 들어오면 위 컴포넌트의 내용을 전부 변경해야하는 나쁜 코드였습니다.

확장성 측면에서 개선한다면 좋을 것 같아서 SearchForm용 공통 컴포넌트를 제작하기로 결정하였습니다.

 

우선 어떤 기능이 있는지 확인해 보겠습니다.

SearchForm 에서는 검색이 필요한 InputBox, CheckBox, SubmitButton 세가지로 나뉘어져 있습니다.

하지만 InputBox와 checkBox에 동적인 데이터가 들어가게 되는데요.

 

<ArtyInput name={"registerName"} label={"작성자"} onChange={onchange} value={searchItem.registerName}/>

동적으로 변하는 데이터는 다음과 같습니다.name, label, value

해당 문제를 어떻게 해결하면 좋을까 고민을 해보았습니다.

저는 GenericType 을 활용하여 문제에 접근하였습니다.

interface IProps {
    onSearch?: () => void;
    iSearchItem: object;
}

type indexType = {
    [index: string]: any;
}

const SearchForm = <T extends indexType>({onSearch, iSearchItem}: IProps) => {
	// 나머지
}

컴포넌트를 생성하기 전 GenericType으로 key, type을 확인 할 수 있다면

inputBox, checkBox 분리가 가능 할 것이라 판단하였습니다.

iSearchItem 은 화면에 그려줄 아이템의 label, value, name을 가지고 있는 object Class를 보내주었습니다.

이제 SearchForm은 name, value, type 을 전부 확인 할 수 있는 데이터들이 모였습니다.

받아온 데이터를 useState에 초기화 시켜두었습니다.

iSearchItem 을 Object.keys 를 사용하여 key 값을 가진 리스트를 생성하였습니다.

const [item, setItem] = useState({} as T);
const objectKeyList = Object.keys(iSearchItem);

검색창에서 변화가 일어날 때마다 onChange 이벤트를 입혀주도록 하겠습니다.

isBooleanTypeField 는 GenericType, iSearchItem 으로 string, boolean을 판단하도록 하였습니다.

const onchange = (event: { target: any }) => {
    setItem({
        ...item,
        [event.target.name] : 
            (isBooleanTypeField(event.target.name) ? 
            event.target.checked : 
            event.target.value)
    });
}

function isBooleanTypeField(name: string): boolean {
    return 'boolean' == (typeof iSearchItem[name as keyof T].value);
}

 

또한 jsx에 그려보겠습니다.

<ArtyInput name={objectKeyList?.[i]} label={iSearchItem?.[objectKeyList[i]].label} onChange={onchange} value={item?.[objectKeyList[i]] || ''}/>

와!! UI를 하드코딩으로 그려주던 로직을 objectClass 로 제어하였고,

4개 넘게 존재하던 SearchForm이 전부 하나로 통일되었습니다!

안녕 SearchForm..