React Hook는 지난 ReactConf 2018에서 발표된, class없이 state를 사용할 수 있는 기능이다.

현재 v16.7.0-alpha 버전에서 사용 가능하고 지난 12월 정식 릴리즈된 16.7.0 버전에는 포함되지 않았다.

react 공식 페이지에서도 아직 몇몇 세부 사항들이 변경 될 수도 있다고 하지만 워낙 커뮤니티에서 핫 하기 때문에 다들 한번씩 살펴 보는 것 같다.

hooks가 왜 필요한가?

문제의 시작

react를 처음 접했을 땐 UI를 재사용 가능한 component들로 나누고 모듈화가 잘 될 줄 알았는데 사실 그게 쉽지 않았다. 로직이 ui 및 life cycle에 너무 밀접하게 결합되어 있었다.

/* 로직과 UI가 섞인 Component */
class HomeBanners extends Component {
    componentWillMount() { /* 배너 정보 가져오기 */ }

    render() {
        return <>
            {this.state.banners.map((banner, index) => /* 배너 UI */}
        </>
    }
 }

/* 비슷한 또 다른 배너 Component */
class OtherBanners extends Component { ... }

HOC(Higher Order Component)

그래서 시도한 방법이 HOC다. 화면에서 재사용 가능한 로직 만을 분리해 component를 만들고 재사용 불가능한 부분들 만을 감싸는 형식으로 처리하는 방법이다.

import React, { Component } from 'react';

const withRequest = (url) => (WrappedComponent) => {
  return class extends Component {
    render() {
      return (
        <WrappedComponent {...this.props}/>
      )
    }
  }
}

export default withRequest;

import React, { Component } from 'react';
import withRequest from './withRequest';

class Post extends Component {
  render() {
    const { data } = this.props;
    if (!data) return null;

    return (
      <div>
        { JSON.stringify(this.props.data) }    
      </div>
    );
  }
}

export default withRequest('<https://jsonplaceholder.typicode.com/posts/1>')(Post);

HOC로 해결되지 않는 문제들

이렇게 로직을 분리해서 둘러싸고, 둘러싸고 하다보면 wrapper 지옥이 펼쳐진다... 안 그래도 react개발을 하다보면 자주 사용하게 되는 withRouter, connect 등의 HOC들이 있는데 거기에 또 계속 감싸게 되는 것이 개인적으로 영 별로라고 생각이 된다.

Functional Component

함수형 컴포넌트를 사용해 ui에 집중하고 단순한 컴포넌트로 분리한다. props만을 이용한다. 하지만 state와 life cycle메소드를 사용할 수 없다.