함수 컴포지션, 파이프라인 패턴

파이프라인 패턴 (if문의 분기처리 대신)

import Input from antd

type RHInputType<T extends FieldValues> = {
	...
    filters?: [(value: string) => string]
}

function RHInput<T extends FieldValues>({
...
filters = [(value) => value]
}:RHInputType<T>){

...
return (
<Controller 
	name={name}
    render={({field: {onChange, ...}}) => {
    	...
        return (
        <>
        	<Input 
            	...
                onChange={(e) => {
                	const newValue = filters?.reduce((result, filter) =>{
                    	return filter(result)
                    }, e.target.value)
                    
                    onChange(newValue)
                }}
            />
            ...
        </>
        )
    }}
/>
 )
}

외부에서 해당 컴포넌트 사용

<RHInput 
	...
    filters={[filter함수]}
/> // filter함수는 그냥 value받고, 필터링된 value로 return하는 함수

filter의 타입과 기본값을 자기 자신을 반환하는 함수로 받았기 때문에, filter가 적용되지 않았다면 아무일도 발생하지 않을것이고, 또한 배열에 담아서 필터함수를 전달하고 그 함수(들)을 reduce로 순차적으로(배열의 index에 따라 순서를 결정할 수 있을 것) 적용시켜서 최종 반환값을 onChange의 value값으로 결정지을 수 있다.

단순 if문으로 처리했을 때보다 재사용성, 유연성, 부수효과에 유리하며 무엇보다 함수형 프로그래밍 방식을 따른다

물론 위의 코드처럼 한가지의 filter만 적용했다면 if문이 더 직관적일 수는 있으나, 파이프라인 패턴은 더 복잡한 로직에 대한 확장성을 보장한다.

핵심

filters의 타입과 기본값을 [(value) => value] 라고 한 부분.
배열로 만들어서 index에 대한 필터 로직을 외부에서 컨트롤 할 수 있다. (reduce)
필터함수를 사용하지 않아도 기존 컴포넌트에는 아무런 영향을 미치지 않음.