HOC(고차함수)는 props대신에 컴포넌트를 인자로 받고,
새로운 컴포넌트를 리턴하는 역할을 하는 녀석입니다.
고차함수는 매개변수를 통해 전달받은 콜백함수를 호출 시점을 결정하여 호출합니다.
따라서 콜백함수는 고차 함수에 의해 호출되며, 이때 고차함수는 필요에 따라 콜백함수에 인수를 전달할 수 있습니다.
----함수의 주입----
어떤 작업을 수행하는 함수를 정의해봅시다.
function repeat(n) {
for (let i=0; i<n; i++) console.log(i)
}
repeat(5); // 0 1 2 3 4 5 위에서 선언한 repeat이라는 함수는 매개변수로 전달받은 숫자만큼 console.log를 반복해 호출합니다.
이때 repeat함수는 console.log(i)에 의존하는 상태입니다.
이런경우 "짝수만 프린트" 같은 다른작업을 수행하기 위해서는 새로운 함수를 정의해야합니다.
function repeat1(n) {
for (let i=0; i<=n; i++) console.log(i);
}
repeat1(5); //0 1 2 3 4 5
function repeat2(n) {
for (let i=0; i<=n; i++){
if (i % 2 == 0) console.log(i)
}
}
repeat2(5); //0 2 4 위 예제의 repeat1과 repeat2는 일정범위를 반복하는 작업은 공통적으로 수행하지만, 반복하면서 하는일의 내용은 다릅니다
즉, 공통부분이 있지만 차이가 나는 부분이 있기 때문에 매번 함수를 새롭게 정의해야한다.
이러한 문제를 함수의 합성을 이용하여 다음과 같은 방법으로 해결할수 있습니다.
- 공통으로 수행되는 로직을 미리 정의한다.
- 상황에 따라 변경되는 로직을 추상화하여 외부에서 내부로 주입한다.
//외부에서 주입괸 func를 n만큼 반복하며 호출한다.
function repeat(n, func) {
for (let i=0; i<=n; i++) func(i);
}
let printAll = function (num) {
console.log(num);
};
let printEven = function (num) {
if (num % 2 == 0) console.log(num);
};
//반복 호출할 함수를 인수로 주입한다.
repeat(5, printAll); //0 1 2 3 4 5
repeat(5, printEven); //0 2 4본질적으로 동일한 개념을 공유한다고 생각하면 이해가 쉽겠습니다.
🌟콜백함수
자바스크립트의 함수는 일급 객체이므로 함수의 매개변수로 함수를 전달할 수 있어 위와 같은 디자인이 가능하고, repeat함수는 더이상 내부로직에 강력히 의존하지 않아 더욱 유연한 구조를 갖게됩니다.
이처럼 매개변수를 통해 다른함수의 내부로 전달되는 함수를 콜백함수라고 하며, 매개변수를 통해 콜백함수를 전달받는 함수를 고차함수라고 합니다
🌟고차함수
훅이 새로 나와서 hoc의 사용량이 줄어들음
컴포넌트안에 있는 로직을 다시 재활용 할수있는 어드벤스드한 기술
리액트로 만들어진 컴포넌트를 그냥 사용할 뿐이지 이 하이어 오더 컴포넌트라고 하는 이 개념은 리액트에서만 국한된 내용이 아닙니다. 어떠한 패턴을 의미하는건데 ,
보통 리액트에서 컴포지셔널한 네이처라고 해서 이제 리액트의 컴포넌트를 상속받거나 재활용하는방식이 아니라 조합방식으로 하는 어떤 리액트 컴포넌트의 본성으로부터 야기된 어떤 패턴이라고 설명되고 있습니다.
hoc는 function입니다.
function에는 인자를 받구요, 그리고 새로운 컴포넌트를 리턴해줍니다.
컴포넌트도 사실 함수라고 볼수있습니다. 물론 클래스 컴포넌트도 있지만 함수컴포넌트같은 경우는 props를 인자로 받고 그 모습을 props에 의존적으로 보여줍니다 ui로드러나는거죠.
일반적으로 콜백함수가 고차함수 내부에만 호출된다면 콜백함수를 익명함수 리터럴로 정의하면서 곧바로 고차함수로 전달하는 것이 일반적인 방법입니다
우리는 이런 컴포넌트를 넣고 뭔가 공통적인 로직, 재활용되는 로직이 추가된 새로운 컴포넌트를 받는겁니다.
hoc같은 경우는 여러 라이브러리에서도 제공됩니다.
