[React] Invalid Hook Call Warning(클래스 컴포넌트에서 Hook 사용하기)

에러

리액트 공식 홈페이지에서 Invalid Hook Call Warning라는 타이틀로 이 이슈에 대한 정보를 아주 친절하게 제공하고 있다.

Hooks can only be called inside the body of a function component.

There are three common reasons you might be seeing it:

1. You might have mismatching versions of React and React DOM.
2. You might be breaking the Rules of Hooks.
3. You might have more than one copy of React in the same app.

원인

옆에 계신 디블리셔분이 도움을 요청했던 에러이다. 반응형 퍼블리싱을 위해 use-media라는 패키지를 사용하려다가 발생했는데, 원인은 2번 'You might be breaking the Rules of Hooks' 에 해당하는 것이었다. 클래스 컴포넌트에서는 Hook을 호출하면 안되는데 그 규칙을 어기고 있었던 것이다.

완전히 다른 팀의 코드라 정확하게 기억이 나질 않아 비슷하게 구조만 구현했다.

import React from 'react'; 
import { connect } from 'react-redux';
import useMedia from 'use-media';

class DashboardTitle extends React.Component {
    어떤멤버함수 () {
        return {
            ...
            widgets: function () {
                const isTabletPC = useMedia({ maxWidth: '800px' });
                // isTabletPC 가 true이면 a를 렌더링하고 아니면 b를 렌더링하는 코드
            }
        }
    }

    render () {
        return <어떤컴포넌트> { 어떤멤버함수.widgets() } </어떤컴포넌트>
    }
}

const mapStateToProps = (state) => {};

const mapDispatchToProps = (dispatch) => {};

export default connect(mapStateToProps, mapDispatchToProps)(DashboardTitle);

해결

처음에는 use-media가 자체적으로 클래스 컴포넌트에서 사용하는 방법을 제공하는지 찾아보았으나 발견하지 못했다.

그래서 다시 클래스 컴포넌트에서 훅을 사용할 수 있는 방법이 있는지 검색했다. 그리고 정답은 바로 How can I use React hooks in React classic class component?에 있었다. HOC를 통해 클래스 컴포넌트에 Hook을 호출해 리턴받은 결과를 props로 전달해줌으로써, 결과적으로는 클래스 컴포넌트 안에서 Hook을 사용하지 않으면서도 사용한 것과 같은 결과를 얻을 수 있다.

예로 withHook이라는 HOC 함수를 만들었다. 이 함수는 MyComponent에 Hook을 호출해 얻은 결과 isTabletPC를 props로 추가한 뒤 반환한다. export 할 때 withHook 함수의 파라미터로 isTabletPC를 사용하고자하는 컴포넌트를 넘겨준다면, 그 컴포넌트 내부에서 this.props.isTabletPC로 접근하여 사용할 수 있게 된다.

import React from 'react'; 
import { connect } from 'react-redux';
import useMedia from 'use-media';

function withHook (MyComponent) {
  return function WrappedComponent (props) {
      const isTabletPC = useMedia({ maxWidth: '800px' });
    return <MyComponent {...props} isTabletPC={isTabletPC} />;
  }
}

class DashboardTitle extends React.Component {
    // ... 

    어떤멤버함수 () {
        return {
            widgets: function () {
                // this.props.isTabletPC 로 접근
            }
        }
    }

    render () {
        return <어떤컴포넌트> { 어떤멤버함수.widgets() } </어떤컴포넌트>
    }
}

const mapStateToProps = (state) => {};

const mapDispatchToProps = (dispatch) => {};

export default connect(mapStateToProps, mapDispatchToProps)(withHook(DashboardTitle));

---

➕

나는 리액트를 함수형 컴포넌트로 배우고 그 이후에도 쭉 함수형 컴포넌트만 쓰고 있다. 그래서 구글링으로 문제는 해결했지만 정확히 이 상황에서 이렇게 해결하는 것이 최선인건지 판단하기가 힘들었다. 애초에 호환되지 않는 라이브러리를 사용하는 것을 지양해야하는 건지(동일 기능을 제공하면서 클래스에서 사용할 수 있는 다른 라이브러리를 찾는 등), 아니면 이렇게 HOC를 만들어서 사용하면 되는 건지에 대한 의문점이 남는다.