react v15 -> v16へマイグレーション　


- react v15.6.2 -> v16.13.1
- react-dom v15.6.2 ->v16.13.1
- react-router v3.0.3 -> v5.2.0
- react-router-dom 5.2.0(追加)
- styled-components v2.3.2 -> v5.1.1
- react-responsive v2.0.0 -> v8.1.0
- react-document-meta -> react-helmet(変更)
- history v3.0.0  -> v5.0.0
- react-slick  ->v0.27.1


## react

### `componentWillReceiveProps`が廃止予定
今後削除される機能なので、ロジックを組み直したり, `componentDidUpdate`に置き換えたりなどの対応が必要です。
今回は急ぎなので、`UNSAFE_componentWillReceiveProps ` に置き換えます。
componentWillReceivePropsと機能は同じです。後ほどリファクタリングします..!

```diff
- componentWillReceiveProps(nextProps) { ...
+ UNSAFE_componentWillReceiveProps(nextProps) {
```


### `componentWillMount`が廃止予定
`componentWillReceiveProps`と同様です。こちらも`UNSAFE_componentWillMount()`にしてあとでリファク(

```diff
- componentWillMount() { ...
+ UNSAFE_componentWillMount() {
```

また、自分のコードで`componentWillMount`等の廃止予定ライフサイクルメソッドを使っていなくても、依存パッケージ内で使用されている場合がある。
その場合はパッケージをアップデートするか、アップデート対応していない場合はパッケージの入れ替えを行なった。


## ルーティング
### Link
`Link`コンポーネントは react-routerからreact-router-domへ移動されたので、
import元を全て書き換えます。

```diff
- import { Link } from 'react-router'
+ import { Link } from 'react-router-dom'
```

### browserHistoryの廃止
v4からbroserHistoryが廃止になっているので、置き換えが必要になります。

```diff
- <Router history={browserHistory}>
-  ...
- </Router>
+ <BrowserRouter>
+  ...
+  </BrouserRouter>
```

```diff
- const hashLocation = browserHistory.getCurrentLocation().hash.replace('#', '')
- const hashLocation = this.props.location.hash.replace('#', '')
```

子コンポーネントでlocationやhistoryを使いたい場合(propsで渡って来ない場合）は、
react-routerがhooks対応しているのでそちらを使えばバケツリレーにならずスッキリかけます。

```diff
- import React, { Component } from 'react'
- class Breadcrumb extends Component {
- componentDidMount() {
-   this.props.dispatch(breadcrumb(browserHistory.getCurrentLocation().pathname));

+ import React, { useEffect } from 'react'
+ const Breadcrumb = (props) => {
+  const location = useLocation()
+  useEffect(() => {
+   props.dispatch(breadcrumb(location.pathname))
+  }, [])

```

react-routerのhooksに関しては、下記の記事がわかりやすかったです。
[React RouterがHooks対応したので使い方を整理する](https://qiita.com/ozaki25/items/bb0eb273611eebc603dd#uselocation)


```react:store.jsx
import { history } from './user'

export default function configureStore(initialState) {
...

sagaMiddleware.run(rootSaga, { history })
```


## styled-components
### extend -> styled()
`extend`はv4から廃止されていたので、`styled(Comp)` の表記に統一します。

```diff
- const ButtonTertiary = Button.extend`
- ...
- `
+ const ButtonTertiary = styled(Button)`
+ ...
+ `
```

### injectGlobal -> createGlobalStyle
`injectGlobal`というグローバルのCSSの記述が、v4から`createGlobalStyle`というAPIに取って代わられています。

```diff
- injectGlobal`
-@font-face {
-   ...
+ export const GlobalStyle = createGlobalStyle`
+ @font-face {
+  ...
```

## react-router-scroll
SPAでは何らかの処理をしない限り、ページ遷移後もスクロールの位置が先頭に戻らない。
今回アップデートしたプロジェクトでは、 [react-router-scroll](https://www.npmjs.com/package/react-router-scroll)が使われていた。
しかし、**3年前から更新がかかっていない...**
自分で実装した方が早いと判断し、パッケージを捨てることにする。

```diff
- import { useScroll } from 'react-router-scroll';
+ import ScrollTop from './containers/ScrollTop'

```

```react:ルーティング部分
 <BrowserRouter>
    <ScrollTop>
      <Switch>
        <Route exact path="/" component={Top} />
      </Switch>
    </ScrollTop>
 </BrowserRouter>
```

```react:ScrollTop.jsx
import { useEffect } from 'react'

export default function ScrollTop(props) {
  useEffect(() => {
    window.scrollTo(0, 0)
  }, [props.location])
  return props.children
}

```

実はredux周りなんかも入れたらもっと膨大な作業になりました...
こまめなアップデート、目指していきたいです!

## 参考資料
[Styled Components v4について](https://qiita.com/7tsuno/items/8fc1f4124b0519b58e63)
[[React]react-router v4で画面遷移時に前のページのスクロール位置が残る](https://qiita.com/dnrsm/items/e424701aee9f922850d3)