React- 리액트교과서 8장 학습내역 (확장성을 이용한 React 고차 컴포넌트-HOC)

React:

확장성을 이용한 React 고차 컴포넌트 HOC

| 시작하기에 앞서

• 다른 컴포넌트에서도 공통적으로 사용할 약간의 기능을 기존 컴포넌트에도 적용하려면 어떻게 해야할까? 이는 개발확장성의 문제다. 코드베이스가 늘어날때 코드의 확장성 문제를 해결 할 수 있는 리액트의 기능과 패턴이 있다. 예를들어 고차 컴포넌트는 컴포넌트의 기능을 향상 시킬수 있다. 고차 컴포넌트를 활용해, 효율적인 작업을 할수 있게 된다.

| 코드 재사용을 위한 리액트 고차 컴포넌트 생성하기

• 예를 들어 각 개발자는 버튼,이미지,링크에 같은 기능을 수행하면서 서로 다른 시각적표현을 적용하려고 한다. 아마도 메서드를 만든후 이벤트 핸들러에서호출할 수 있게 하면 되는데, 고차컴포넌트가 더 우아한 해결책이 된다.

• 고차 컴포넌트를 이용하면 컴포넌트에 추가적인 로직을 적용해서 컴포넌트를 향상 시킬 수 있다. 고차 컴포넌트를 통해 다른 컴포넌트가 기능을 상속받는 패턴이라고 생각하면 된다. 

• 다시말해 고차컴포넌트를 통해 코드 재사용이 가능하다.

• 이를통해 리액트 컴포넌트를 위한 기능을 공유 할수있고, 중복배제 원칙 또한 지킬 수 있다.

• 위에서 알 수 있듯이, 고차 컴포넌트는 원래의 컴포넌트를 렌더링하면서 추가적인 기능을 포함시키도록 하는 react 고차 컴포넌트 클래스이다. 
• 고차 컴포넌트는 함수일뿐이므로 정의하는 방법이 매우 간단하다. 화살표 함수를 이용해 다음과 같이 선언할 수 있다.
  

const LoadWebsite =(Component) =>{

...

}

고차 컴포넌트 구현예제

const LoadWebsite = (Component) => {
  class _LoadWebsite extends React.Component {
    constructor(props) {
      super(props)
      this.state = {label: 'Run', handleClick: this.handleClick.bind(this)} 
    }
    getUrl() {
      return 'http://reactquickly.co/';
    }
    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} />
    }
  }
  _LoadWebsite.displayName = 'EhnancedComponent'
​
  return _LoadWebsite
}
​

• 위에서 살펴볼만한점은 displayName 을통해 컴포넌트 이름을 변경시켜준 점이다. 함수이름 대신 적절한 이름을 사용할 수 있기 때문에 유용하다.
• 위의 고차컴포넌트를 사용하는 방법은 아래와 같다

const EnhancedButton = LoadWebsite(Button)

const EnhancedLink = LoadWebsite(Link)

const EnhancedLogo = LoadWebsite(Logo)

세가지 컴포넌트의 렌더링은 모두 다르지만,LoadWebsite에서 this.props.handleClick과 this.props.label을 받았다. 

const EnhancedButton = LoadWebsite(Button)
const EnhancedLink = LoadWebsite(Link)
const EnhancedLogo = LoadWebsite(Logo)
​
class Content extends React.Component {
  render() {
    return (
      <div>
        <EnhancedButton />
        <br />
        <br />
        <EnhancedLink />
        <br />
        <br />
        <EnhancedLogo />
        <br />
        <br />
        <iframe id="frame" src="" width="600" height="500"/>
      </div>
    )
  }
}

고차 컴포넌트는 훌륭한 코드 추상화 방법이다. 이를 이용하면 재사용 가능한 리액트 컴포넌트를 작은 모듈로 만들 수 있다.

| 모범사례

• 컴포넌트를 프레젠테이션 컴포넌트와 컨테이너 컴포넌트로 구분할 수 있다.

• 고차 컴포넌트를 이용해 자식을 전달하는 바법을 살펴봤으므로 컨테이너 컴포넌트에 대해서 더욱 잘 이해할 수 있을 것이다.

• 일반적으로 코드를 두가지 방식의 컴포넌트로 분리하면 코드가 좀 더 단순해지고 유지보수도 쉬워진다. 프레젠테이션 컴포넌트는 보통 DOM과 스타일에 구조만 추가한다. 프레젠테이션 컴포넌트는 속성은 사용하지만 상태를 갖는 경우는 없다.

• 일반적으로 상태비저장 컴포넌트를 함수로 작성할 수 있다.

• 컨테이너 컴포넌트를 만들때, 고차 컴포넌트로 컨테이너 컴포넌트에 데이터 소스를 주입하기도 한다.(컨테이너 컴포넌트는 상태를 갖는다.)

• 문제해결에 도움이되는 형태의 컴포넌트로 시작하는 것이 최선이다. 여러 겹의 컴포넌트 계층에서 반복적인 패턴이나 속성을 계속해서 사용하는것을 발견한다면 컨테이너 컴포넌트를 적용할 수 있다.

| 참고하면 좋을링크

https://velopert.com/3537

https://www.vobour.com/%EB%A6%AC%EC%95%A1%ED%8A%B8-react-%EC%9D%B4%ED%95%B4-4-higher-order-component