Reactㅣ코드 재사용을 위한 React 고차 컴포넌트

만약 3명의 개발자 동료와 같이 일하는데, 각각 버튼, 이미지, 링크를 클릭하면 React웹사이트로 연결시키고자 한다. 그래서 React웹 사이트를 불러올 수 있는 구현을 요구했다. 이럴 때 '고차 컴포넌트'를 쓰면 효과적이다.

'고차 컴포넌트'를 이용하면, 컴포넌트에 추가적인 로직을 적용해 컴포넌트를 향상 시킬 수 있다. 고차 컴포넌트를 통해 다른 컴포넌트가 기능을 상속받는 패턴이라고 생각하면 쉽다. 즉, '고차 컴포넌트를 통해 코드 재사용이 가능해진다'.

고차 컴포넌트는, 원래의 컴포넌트를 렌더링하면서 추가적인 기능을 포함시키도록 하는 React의 컴포넌트 클래스이다. 어려워보이지만 간단하다. 고차 컴포넌트는 함수일 뿐이므로 화살표 함수를 이용해 아래와 같이 선언할 수 있다.

const LoadSite = (Component) => {
~~~
}

LoadSite는 임의로 지은 이름이다. 고차 컴포넌트의 이름은 자유롭게 지어도 된다. 함수의 인자는 향상되지 전의 원래 컴포넌트로, 인자 이름도 자유롭게 정할 수 있다.

만약 3명의 동료가 Button, Link, Logo 를 클릭하면 웹 사이트로 이동시키고 싶다. 그러면 상태비저장 컴포넌트 Button, Link, Logo가 있다고 생각해보자. 그리고 여기에 고차 컴포넌트 함수를 적용시켜보면 아래와 같다.

const LoadSite = (Component) => {
  class _LoadSite extends React.Component {
    constructor(props) {
      super(props)
      this.state = {label: 'Run', handleClick: this.handleClick.bind(this)} 
    }
    getUrl() {
      return 'https://instagram/brian_binn'
    }
    handleClick(event) {
      document.getElementById('frame').src = this.getUrl()
    }
    componentDidMount() {
      console.log(ReactDOM.findDOMNode(this))
    }
    render() {
      console.log(this.state)
      return <Component {...this.state} {...this.props} />
    }
  }
  _LoadSite.displayName = 'EhnancedComponent'

  return _LoadSite
}

설명 하기 전에 위에 코드에 썼긴 했는데, displayName과 펼침 연산자 ...에 대해서도 설명해보겠다.

displayName을 이용한 자식 컴포넌트와 부모 컴포넌트의 구분

JSX는 인스턴스(엘리먼트)의 이름으로 컴포넌트 클래스 이름을 사용한다. 따라서 위 코드를 보면 고차 컴포넌트로 생성한 엘리먼트의 이름은 _LoadSite 이다.

만약 컴포넌트의 이름을 변경하고 싶다면, displayName 정적 속성을 사용할 수 있다. 그리고 ES6의 정적 클래스 속성은 클래스 정의 밖에서 정의해야 한다.

즉, React 엘리먼트의 이름을 컴포넌트 클래스 이름과 다르게 해야 할 때 displayName을 사용할 수 있다.

펼침 연산자를 통해 모든 속성 전달하기

펼침 연산자는 ES6+/ES2015+에서 배열을 위한 기능이다. 그리고 객체에 사용할 수도 있다.

사용법도 어렵지 않다. 펼침 연산자를 이용하면 객체(obj)의 모든 속성을 엘리먼트의 속성으로 전달할 수 있다. 아래와 같이 말이다.

<Component {...obj}>

맨 위 예시 코드를 보면, 원래 컴포넌트를 렌더링 할 때 고차 컴포넌트에 있는 상태와 속성을 전달하기 위해 펼침 연산자를 사용했다. 펼침 연산자가 필요했던 이유는, 함수에서 인자로 사용할 속성을 미리 알 수 없었기 때문이다. 따라서 펼침 연산자는 객체 또는 변수의 모든 데이터를 전달하는 포괄문인 것이다.

React와 JSX에서는 펼침 연산자를 여러 개 사용할 수 있고, key=value로 속성을 선언하는 기존 방법도 함께 사용할 수 있다. 만약 현재 클래스의 모든 상태와 속성, className을 새로운 컴포넌트에 전달하는 경우에는 아래와 같이 쓸 수 있다.

<Component {...this.state} {...this.props} className="success"/>

만약 자식이 있는 경우에는 어떻게 할까? 이도 펼침 연산자를 활용할 수 있다.
이해를 돕기 위해 아래에 예시 코드를 작성해보면,

class DoneLink extends React.Component{
	render(){
    	return <a {...this.props}>
        <span class="velog"></span>
        {this.porops.children}
        </a>
    }
}

ReactDOM.render(
	<DoneLink href="/success.html">
    	Thanks!
    </DoneLink>,
    document.getElementById('success-man')
)

• DoneLink에 전달한 모든 속성을 복사해서 < a>로 전달한다.

고차 컴포넌트에서 모든 속성과 상태를 원래의 컴포넌트를 렌더링할 때 전달한다.

고차 컴포넌트는 굉장히 유용한 코드 추상화 방법이다.
고차 컴포넌트 패턴을 이용하면 재사용 가능한 React컴포넌트를 작은 모듈로 만들 수 있다. 고차 컴포넌트와 속성 타입은 사용이 편리하고 개발자 친화적인 컴포넌트를 만들 수 있는 굉장히 좋은 도구이다!