[7/10] 고차 함수

함수를 리턴하는 함수

export const createHandleAdd = (fieldsLength: number, append: any) => () => {
  if (fieldsLength < 10) {
    append({ name: '', phone: '', count: 1 });
  }
};

는 아래와 같은 의미이다.

function createHandleAdd(fieldsLength, append) {
	return function () {
    	if (fieldsLength < 10) {
        	append({ name: '', phone: '', count: 1 });
        }
    };
}

이처럼 사용하는 이유

- 외부 값을 받아서, 내부에서 사용할 수 있는 콜백 함수를 만들어내기 위함

const handleAdd = createHandleAdd(fields.length, append);

<ModalAddBtn onClick={handleAdd}>추가하기</ModalAddBtn>

- handleAdd는 () => { ... } 형태의 진짜 핸들러 함수

- createHandleAdd()는 그 핸들러를 만들어주는 생성자 역할