React HOC vs HOF

남예지·2022년 12월 22일
0

HOC / HOf

함수를 리턴하는 함수 HOF

function aaa() {
  const apple = 10;

  return function bbb() {
    const banana = 20;

    console.log(banana);
    console.log(apple);
  };
}

aaa()();

(aaa())()
aaa를 실행한 결과값을 다시 실행한다.
이러면 bbb를 실행한 것과 같다.
aaa()()로 줄여 사용이 가능하다.
aaa가 실행되고 bbb가 실행된다.
aaa를 bbb보다 먼저 실행되기 때문에 Higher order Function(먼저 실행되는 함수)이라고 하며 HOF라고 한다. 여기서는 aaa가 HOF이다.

이는 파라미터를 사용해 간결하게 할 수 있다.


함수 선언식

function aaa(apple){

	return function bbb(banana){
		console.log(banana)
		console.log(apple)
	}
}


aaa(2)(3)

// 실행 결과
// 2 => aaa에 넣은 인자값
// 3 => bbb에 넣은 인자값

bbb에는 apple이 없지만 클로저에 aaa가 있으므로 콘솔에 //2 //3일 잘 찍히는 걸 확인할 수 있다.
이걸 화살표 함수로 바꿀수도 있다.

// 화살표 함수로 변경
const aaa = (apple)=>{
	return (banana)=>{
				console.log(apple)
				console.log(banana)
		}
}

aaa(2)(3)

이렇게 바꾼 코드에서 중괄호와 리턴 사이에 아무것도 없다면 중괄호를 생략해서 적을 수 있다.

// 중괄호 생략
const aaa = (apple)=>(banana)=>{
				console.log(apple)
				console.log(banana)
}

aaa(2)(3)

HOC

HOC는 상위에 있는 컴포넌트로 다른 컴포넌트보다 먼저 실행되는 컴포넌트
hoc는 hof와 같지만 함수와 컴포넌트라는 차이가 있다.

컴포넌트는 꺽쇠가 있는!! 그 외는 함수이다.


HOC 를 로그인 검증에 응용하기
다른 컴포넌트보다 먼저 실행되게 하기 위해 위에서 배운 함수를 리턴하는 함수를 활용하면 된다.

profile
총총

0개의 댓글