[28] React HOC vs HOF

HOC (Higer order Component)

상위 컴포넌트라는 뜻,
로그인을 하지 않은 유저가 로그인을 해야 볼 수 있는 페이지에 접근하려면 '로그인을 해주세요'하고 로그인창으로 보내는 페이지에 모두 처리를 해야한다고 가정할 때, 하나하나 다 코드를 넣어줄 수 없다. 이런 문제를 HOC를 사용하면 해결할 수 있다.

HOC를 하나 만들고 로그인이 필요한 컴포넌트 앞에 HOC만 붙여주면 간단하게 권한 처리를 끝낼 수 있다.

HOC는 데이터를 클로저 함수의 특징을 위용해 무손실로 전달할 수 있다. event.target.id 등을 사용하지 않고 바로 함수에서 전달받은 인덱스 값을 전달하여 출력할 수 있다. 따라서 id를 남용하지 않아 오류를 방지할 수 있다.

HOF (Higer order Fuction)

고차함수는 함수를 인자로 받거나 또는 함수를 반환함으로써 작동하는 함수를 말한다. 간단히 말하자면 고차 함수는 함수를 인자로 받거나 함수를 출력으로 반환하는 함수를 말한다. HOF 를 사용하면 보다 유연하고 반복을 줄일 수 있는 코드를 작성할 수 있다.

예제
고차 함수가 아닌 함수로 작성

const arr1 = [1, 2, 3]
const arr2 = [];

for(let i = 0; i <arr1.length; i++){
	arr2.push(arr1[i] * 2);
}
console.log(arr2) //prints[2, 4, 6]

고차 함수로 작성

const arr1 = [1,2,3]

const arr2 = arr1.map(function(el){
	return el*2
})

console.log(arr2)
// [2,4,6]

화살표 함수를 이용하면 훨씬 짧게 작성 가능

const arr1 = [1,2,3]
const arr2 = arr1.map(el => el * 2);
console.log(arr2)
// [2,4,6]

참고
https://intrepidgeeks.com/tutorial/hofhoc

https://ko.reactjs.org/docs/higher-order-components.html

https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-22-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B3%A0%EC%B0%A8-%ED%95%A8%EC%88%98Higher-Order-Function-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0