고차 함수

함수형 언어에서는 함수와 변수를 차별하지 않으므로 함수는 다른 함수의 입력 매개변수나 반환값으로도 사용될 수 있습니다.

고차 함수는 다른 함수를 반환하는 함수를 의미한다.

리액트 개발에서 고차 함수는 콜백 함수에 어떤 정보를 추가로 전달하려고 할 때 주로 사용한다.

const onClick = useCallbakc((name: string) => () => alert(`${name} clicked`), [])

 

리액트에서 고차 함수를 구현하는 이유는 함수의 타입 불일치를 해결하기 위해서이다. onClick 이벤트 속성은 () => void 타입의 콜백 함수를 설정해야 하므로 다음 처럼 콜백 함수 내부에서 필요한 name 변수를 전달할 수 없다.

() => alert(`${name} clicked`)

그러나 콜백 함수를 다음처럼 고차 함수로 구현하면 onClick이 요구하는 타입 함수를 반환할 수 있으면서 동시에 함수 몸통이 요구하는 name값 또한 전달할 수 있다.

export default function HighOrderCallback() {
    const onClick = useCallback((name: string) => () => alert(`${name} clicked`), [])

    let buttons = useMemo(() =>
            makeArray(3)
                .map(randomName)
                .map((name, index) => (
                    <Button
                        key={index}
                        // onClick(name)의 반환값을 파라미터로 넘긴다
                        onClick={onClick(name)}
                        className={"btn-primary btn-wide btn-xs"}>
                        {name}
                    </Button>
                )),
        [onClick]);

    return (
        <div className={'mt-4'}>
            <Title>HighOrderCallback</Title>
            <div className={'flex justify-evenly mt-4'}>{buttons}</div>
        </div>
    )
}