React 7 고차함수
포스트
취소

React 7 고차함수

고차함수의 정의

고차 함수는 다음의 2가지 중 한가지를 수행할때 이를 고차함수라고 합니다

  1. 다른 함수를 매개변수로 받는 함수

  2. 함수를 반환하는 함수

함수를 인자로 전달하는

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function opertaionFunction (x , y , optFunction){

	return optFunction(x ,y);
}

function add (x , y){

	return x + y;
	
}

function multiple (x , y){
	
	return x * y;
}

console.log(opertaionFunction(5 , 6 , add)) //11
console.log(opertaionFunction(5 , 6 , multiple)) //30


예를 들어서 이런 함수가 있다고 하자 opertaionFunction 은 총 3개의 인자를 받는데 그 중 마지막 인자는 다시 x , y 를 인자로 해서 다른 함수를 호출로 return 을 하고 있습니다 이런 형태를 함수를 인자로 전달하는 것을 말합니다

함수를 반환

1
2
3
4
5
6
7
8
9
10
11
12
13
const plus_a_b = (a , b) => {

    alert(`첫번쨰 값은 ${a}`)
    alert(`두번쨰 값은 ${b}`)

    return () => {

        return a + b;
    }
}

const add_function = plus_a_b(5 , 6)
console.log(add_function())

이 경우를 보자 이 경우에는 plus_a_b 는 인자 2개를 받아서 alert 을 호출 후 익명함수를 반환하는 것을 볼 있습니다 이떄 const add_function = plus_a_b(5 , 6) 에는 alert 만 호출이 되고 그 뒤의 함수는 가지고 있는 형태입니다 아직 호출하기전 상태만 가지고 있고 console.log(add_function()) 이렇게 될시 함수를 호출하게 됩니다 이떄는 클로저의 개념도 들고 있으니 참고바랍니다

클로저 : https://time-kimdongy1000.github.io/posts/React-4/