Higher-Order Component

HOC(Higher-Order Component) 패턴

여러 컴포넌트 간 공유되는 로직을 관리하는 방법

• React에서 파생된 패턴
• 고차함수(HOF, Higher-Order Function) 기반의 디자인 패턴
• 컴포넌트를 인수로 받아 컴포넌트를 리턴하는 함수를 의미

HOF(Higher-Order Function)

함수를 인자로 받아 함수를 리턴하는 함수

• 공통으로 사용되는 로직을 함수에 넣고 개별적인 로직을 파라미터로 받는다

//Ex
function hof(individualLogic) {
	// x, y를 인자로 가지는 익명함수를 리턴
  return function(x,y) {
	// 인자로 전달한 individualLogic 함수 실행
    const result = individualLogic(x, y);
    //공통 로직 부분
    console.log('result:', result);
    return result;
  };
}

function add(x, y) {
  return x + y;
}

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

const addAndLog = hof(add); 
const multiplyAndLog = hof(multiply);

HOC 적용하기

• HOC 이름은 with라는 접두어와 함꼐 prop의 이름을 붙이는 것이 관례
  - 이런 네이밍을 통해 HOC가 사용되는 컴포넌트에서 해당 prop의 출처를 명확하게 추적 가능
• 컴포넌트 간에 공유되는 코드 재사용 방법을 좀 더 HOF스럽게 풀어내는 방법

withHOC.js

import component from '경로';

export default function withHOC(component) {
  return {
    name,
     // 공통적인 로직
    created() {    
    },
    render(createElement) {
      return createElement(component);
    }
  }
}

단점

HOC를 많이 쓰면 쓸수록 그만큼 컴포넌트 깊이가 깊어짐에 따라 컴포넌트 간 통신에 불편함이 발생