[React] Currying 과 HOC 에 대해서

커링이란?

커링은 반환값이 함수인 디자인 패턴을 말한다.

왜 커링을 사용해야 하는가?

중복된 코드를 줄여준다.

원하는 기능을 적재적소에 조합해서 사용할 수 있다.

실행 시점을 뒤로 미룰 수 있다

const server = ip => {
  return (connectionInfo) => {

  }
}

// 사용
const connection1 = server('http://localhost:3001')
const connection2 = server('http://localhost:3002')

// do someting...
connection1({id: 'id1', password: 'password1'})
connection2({id: 'id2', password: 'password2'})

HOC란?

High Order Component 로 상속 패턴을 지양하고 컴포넌트를 한층 업그레이드 시키는 방법이다.

 

왜 상속 패턴을 지양 한다는 걸까?

 

상속 패턴 은 부모의 속성을 동시에 가질 경우 문제가 발생 할 수 있다.

예를 들어 Button 있고 이를 상속받는 LodingButton 과 TooltipButton 이 있다고 가정하자.

 

추가로, SubmitButton 이 필요해서 Button 을 상속 받아 사용하기로 했다.

이 때, 기획이 바뀌고, SubmitButton 에도 로딩 기능이 필요하다고 하여 Button 을 상속받고 있는 LoadingButton 을 상속받아 SubmitButton 버튼을 만들기로 했다.

 

한 번에 기획 할 것이지... 또 기획이 바꼈다. 기획자 자질이 의심된다. SubmitButton 버튼에도 툴팁 기능이 필요하다고 한다. 따라서, 상속 관계는 아래와 같이 변경되었다.

 

Button ← LodingButton ← TooltipButton ← SubmitButton

특별한 문제는 없어 보인다.

 

하지만, SubmitButton 덕분에 TooltipButton 는 불필요하게 LodingButton 을 상속받게 되었다. 기능이 추가 될 때 마다 상속받는 구조는 변경될 것이고, 한 눈에 보기 어려워진다.

 

그렇다면, 기본 구조는 그대로 두고, 원하는 기능만 상속받아 사용할 수 없을까?

 

HOC 를 통해 위 문제를 해결 할 수 있다.

HOC는 함수형 컴포넌트를 반환 할 수도 있고, 클래스형 컴포넌트를 반환할 수도 있다.

// 함수형 컴포넌트 반환
function withSomething(Component) {
  // Do something...
  return function Upgraded(props) {
    return <Component {...props} />
  }
}

// 클래스형 컴포넌트 반환
function withSomething(Component) {
  // Do something...
  return class Upgraded extends React.Component {
    render() {
      return <Component {...this.props} />
    }
  }
}

HOC 를 사용할 때 주의해야 할 점이 있다.

1. 기존에 연결된 프로퍼티를 모두 전달해 주어야 한다.
2. 이름은 with 로 시작한다.
3. displayName을 설정해 주어야 한다.

이 정도까지가 HOC에 대한 기본 개념이다.