React Redux functional component 적용

React Hooks는 functional component를 사용할 수밖에 없다. 애초에 그러려고 만든 거니까. 그동안 redux와 react를 connect하기 위해서 hoc를 사용했는데 decorator를 사용했었다.

import React, { Component } from 'react';
import { connect } from 'react-redux';

@connect(state => ({
  name: state.name
}))
class MyComponent extends Component {
  render() {
    const { name } = this.props;
    return (
      <div>{name}</div>
    );
  }
}

export default MyComponent;

이 decorator는 class에만 사용할 수 있다. 그래서 functional component에는 사용할 수가 없다. hooks를 사용해볼까 하고 찾아봤지만 마땅히 좋아 보이는 것이 없었다. Provider를 만드는 부분부터 약간 달라지고 있어서 첨부터 만드는 거면 몰라도 이미 만든 것 전체를 바꿀 수는 없었다.

하지만 방법이 있었다. 아주 쉽고 예전부터 알고 있었지만 생각을 못했던 것.

import React from 'react';
import { connect } from 'react-redux';

function MyComponent(props) {
  const { name } = props;

  return (
    <div>{name}</div>
  );
}

export default connect(state => ({
  name: state.name
}))(MyComponent);

decorator를 사용안하면 된다. 이 간단한 것을 이제야 알았다. 앞으로는 functional component로 모두 만들 수 있을 것 같다.