Higher-Order Components

HOC란?

• 컴포넌트의 공통 기능을 관리하기 위해 사용되는 함수
• 컴포넌트를 입력으로 받아서 컴포넌트를 출력해주는 함수이다.
• HOC를 사용하여 코드의 중복을 줄일 수 있다.

HOC를 사용하여 코드의 중복을 줄일 수 있다.

1. componentDidMount
2. componentWillUnmount
3. handleChange

class CommentList extends React.Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
        this.state = {
            comments: DataSource.getComments(),
        }
    }

    componentDidMount() {
        DataSource.addChangeListener(this.handleChange)
    }

    componentWillUnmount() {
        DataSource.removeChangeListener(this.handleChange)
    }

    handleChange() {
        this.setState({
            comments: DataSource.getComments(),
        })
    }

    render() {
        return (
            <div>
                {this.state.comments.map((comment) => (
                    <Comment comment={comment} key={comment.id} />
                ))}
            </div>
        )
    }
}

class BlogPost extends React.Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
        this.state = {
            blogPost: DataSource.getBlogPost(props.id),
        }
    }

    componentDidMount() {
        DataSource.addChangeListener(this.handleChange)
    }

    componentWillUnmount() {
        DataSource.removeChangeListener(this.handleChange)
    }

    handleChange() {
        this.setState({
            blogPost: DataSource.getBlogPost(this.props.id),
        })
    }

    render() {
        return <TextBlock text={this.state.blogPost} />
    }
}

HOC 활용

function withSubscription(WrappedComponent, selectData) {
    return class extends React.Component {
        constructor(props) {
            super(props)
            this.handleChange = this.handleChange.bind(this)
            this.state = {
                data: selectData(DataSource, props),
            }
        }

        componentDidMount() {
            DataSource.addChangeListener(this.handleChange)
        }

        componentWillUnmount() {
            DataSource.removeChangeListener(this.handleChange)
        }

        handleChange() {
            this.setState({
                data: selectData(DataSource, this.props),
            })
        }

        render() {
            return <WrappedComponent data={this.state.data} {...this.props} />
        }
    }
}

const CommentListWithSubscription = withSubscription(
    CommentList,
    (DataSource) => DataSource.getComments()
)

const BlogPostWithSubscription = withSubscription(
    BlogPost,
    (DataSource, props) => DataSource.getBlogPost(props.id)
)

주의사항

1. Don’t Mutate the Original Component

   • logProps의 문제점
     • 다른 HOC의 input으로 입력되면 componentDidUpdate가 override된다
     • 함수형 컴포넌트는 componentDidUpdate가 없어 작동하지 않는다.

   function logProps(InputComponent) {
       InputComponent.prototype.componentDidUpdate = function (prevProps) {
           console.log('Current props: ', this.props)
           console.log('Previous props: ', prevProps)
       }
       // The fact that we're returning the original input is a hint that it has
       // been mutated.
       return InputComponent
   }
   
   // EnhancedComponent will log whenever props are received
   const EnhancedComponent = logProps(InputComponent)

   • 해결책

   function logProps(WrappedComponent) {
       return class extends React.Component {
           componentDidUpdate(prevProps) {
               console.log('Current props: ', this.props)
               console.log('Previous props: ', prevProps)
           }
           render() {
               // Wraps the input component in a container, without mutating it. Good!
               return <WrappedComponent {...this.props} />
           }
       }
   }

2. HOC내에서 render 생명주기 사용하지 않기

   • 매번 새로운 값이라고 판단(React's diffing alogirithm 구분하지 못함)

   render() {
     // A new version of EnhancedComponent is created on every render
     // EnhancedComponent1 !== EnhancedComponent2
     const EnhancedComponent = enhance(MyComponent);
     // That causes the entire subtree to unmount/remount each time!
     return <EnhancedComponent />;
   }

3. Static Method 전달

   function enhance(WrappedComponent) {
       class Enhance extends React.Component {
           /*...*/
       }
       // Must know exactly which method(s) to copy :(
       Enhance.staticMethod = WrappedComponent.staticMethod
       return Enhance
   }
   
   // hoist-not-react-static 이용
   import hoistNonReactStatic from 'hoist-non-react-statics'
   function enhance(WrappedComponent) {
       class Enhance extends React.Component {
           /*...*/
       }
       hoistNonReactStatic(Enhance, WrappedComponent)
       return Enhance
   }
   
   // 정적메소드만 따로 export하여 사용하기
   // Instead of...
   MyComponent.someFunction = someFunction
   export default MyComponent
   
   // ...export the method separately...
   export { someFunction }
   
   // ...and in the consuming module, import both
   import MyComponent, { someFunction } from './MyComponent.js'

4. Ref는 전달

   function logProps(Component) {
       class LogProps extends React.Component {
           render() {
               const { forwardedRef, ...rest } = this.props
               return <Component ref={forwardedRef} {...rest} />
           }
       }
       return React.forwardRef((props, ref) => {
           return <LogProps {...props} forwardedRef={ref} />
       })
   }