React Currying

커링(Currying)이란 ?

• 커링은 함수를 여러 개의 인자를 받는 함수로 분해하여 각각의 단일 인자를 받는 함수로 변환하는 프로세스를 말합니다.

• 쉽게 얘기하면 함수안에 함수를 반환하는 함수로 이해하면 됩니다.

• 장점 : 커링을 통해 함수를 재사용하기 쉽게 만들 수 있습니다.

• 또한, 부분 적용(partial application)을 통해 인자 일부를 미리 적용한 새로운 함수를 생성할 수 있습니다. 예를 들어, multiply 함수를 커링하여 특정 값을 고정시킨 함수를 만들 수 있습니다.

function multiply(a, b) { // 파라미터로 두 인자를 받아 곱셈을 반환하는 함수
    return a * b;
}

function curryingMul(a) { // 함수 안에 함수가 들어간 curryingMul 함수
    return function(b) {
        return multiply(a, b);
    }
}

const multiplyByTwo = curryingMul(2); // 출력 예제
console.log(multiplyByTwo(3)); 
// 출력: 6이라고 나옵니다.

고차 함수(Higher-order function)란?

• 고차 함수는 다른 함수를 인자로 받거나 함수를 반환하는 함수를 의미합니다.

• 장점 : 이를 통해 코드를 간결하게 작성하고 재사용성을 높일 수 있습니다.

const function1 = (func) => (word) => {
    func();
    console.log(`${word}`);
}

const sayHello = () => console.log('Hello');

const higherOrderFunction = function1(sayHello);
higherOrderFunction('World'); 
// 출력: Hello World로 나옵니다.

HOC(고차 컴포넌트)

• React에서 HOC(고차 컴포넌트)는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수를 의미합니다.
• 주로 HOC 컴포넌트 간의 로직을 공유하거나, 특정 조건에 따라 컴포넌트를 렌더링하는 경우에 사용됩니다.

const withLogging = (WrappedComponent) => {
  // withLogging은 컴포넌트를 감싸는 새로운 컴포넌트를 반환해요
    return class WithLogging extends React.Component {
        componentDidMount() {
            console.log(`Component ${WrappedComponent.name} 마운트!.`);
        }

        render() {
            return <WrappedComponent {...this.props} />;
        }
    }
}

const MyComponent = () => <div>My Component</div>;

const MyComponentWithLogging = withLogging(MyComponent);

참고 자료

• Chat GPT
• 커링과 HOC