커링과 HOC

HOC를 이해함에 있어 커링을 이해하면 더 쉽게 이해가 되는 것 같아서 내용을 적어보려고 한다.

커링이란?

커링은 함수 내부에서 함수를 리턴하는 것을 말한다.

일반적으로 함수는 다음과 같다.

function add (num1 : number , num2 : number) {
        return num1 + num2
}

커링을 활용하면 다음과 같은 변경이 가능하다.

function addPlus(num1) {
    return function addPlus2(num2) {
        return num1 + num2
    }
}

addPlus는 함수를 리턴한다. 즉,

const 이름은상관없어요 = addPlus(1) // => 이것의 리턴 값이 함수인 것이다.
이름은상관없어요(2) // => 이것의 리턴값이 처음에 받은 1과 두번째로 받은 2를 더한 3이 된다.

두번에 걸쳐서 했지만 한번에 통합해서 사용할 수 있다.

addPlus(1)(2) // 이러면 바로 3이 나온다!

이러면 addPlus가 리턴하는 함수의 이름은 상관이 없다는 걸 알 수 있다. 어디에서도 addPlus2는 언급되지 않는다 그렇다면 이름이 없는 함수로 바꿀 수 있을것이고 더 나아가 화살표 함수로도 바꿔 작성할 수 있을 것이다.

const addPlus = (num1 : number) => {
    return (num2 : number) => {
        return num1 + num2
    }
}

화살표 함수는 중괄호를 생략하면 return을 생략할 수 있다.

const addPlus = (num1 : number) => (num2 : number) => num1 + num2

엄청 깔끔한 형태가 됐다!!

 

HOC (고차 컴포넌트)란?

hoc는 컴포넌트가 실행되기 전에 실행되는 컴포넌트를 말한다. return 값이 컴포넌트이다.

근데 사실 컴포넌트는 함수이다. 그럼 커링이지 않은가!?

const withAny = (Component : React.FC) => <T extends {}>(props : T) => {
        // 컴포넌트가 렌더링 되기 전에 실행될 로직
    return <Component {...props}/>
}

export default withAny

컴포넌트를 처음 인자로 받고 다음 인자로 그 컴포넌트에서 사용 될 props를 받는다.

앞서 컴포넌트는 사실 함수라고 했었다! (괜히 함수형 컴포넌트겠는가?)

그럼 함수식으로 컴포넌트를 사용하는 형태를 봐보자.

<Component name={name} age={age} /> // 우리가 원래 사용하던 방식
Component({name, age}) // 함수식으로 사용하는 방식

그럼 hoc를 사용한다면?

withAny(Component)({name, age}) // 커링이랑 같은 형태이다.

우리는 이제 어떠한 컴포넌트를 만들고 export 할 때 hoc로 감싸면, 그 컴포넌트를 사용할 때 props를 인자로 주면서 사용할 수 있다.

const Component = ({name : string }) => {

        return <div>컴포넌트!</div>
}

export default withAny(Component) // 인자를 하나 더 받으면 실행되는 함수(컴포넌트)

import Component from '.Component.tsx' 
// hoc가 적용된 컴포넌트 실은 withAny(Component)이지만 export default로 이름은 자유롭게 설정할 수 있다.
const mainPage = () => {

    return (
        Component({name : '이름'}) // 이렇게 하면 그동안의 커링과 똑같고
        <Component name='이름'> // 이렇게 하면 컴포넌트 식으로 커링한 것!
    )
}

위 코드의 주석을 보면 이해가 더 잘 될 것이다.