【React】React Hooksに入門する(前半) 【初心者向け】

## そもそもReact Hooksって何?
React Hooksのhookとは、2019年2月リリースのReact16.8から追加された、state などの React の機能を、クラスを書かずに使用できる機能のことです。

メリットとして、関数コンポーネントに**state**と持たせたり、**ライフサイクル**に応じた処理を適宜実装することができます。
これにより記述がより簡潔に、Reactの学習コストも落とすことができました🥺

## React Hooksを使ってみよう
### 環境構築
今回は時短の為にViteというビルドツールを使用していきます。
ViteとはVue.jsの開発者Evan You氏が中心となって開発している、フロントエンドのビルドツールになります。
詳しく知りたい方は下記をご覧ください。

https://ja.vitejs.dev/

```terminal
$ npx create vite@latest
? Project name:react-hooks-introduction
? Select a freamwork:react
? Select a variand:javascript
```
これでフレームワークの作成をすることができます。
その後、作成してディレクトリに移動してセットアップしてサーバーを起動してください。
コマンドは下記になります。

```terminal
$ cd react-hooks-introduction 
$ npm i
$ npm run dev #viteの場合はstartではなくdevなので注意
```

下記のようにサーバーを立ち上げられたらOKです！
![スクリーンショット 2023-05-11 12.22.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636995/1897d7b0-2fb0-a3a5-481c-754a54a65c07.png)

そして、src/App.jsxファイルを開いてください。
ビルドツールで立ち上げると`useState`が`import`されていますが、
それらを削除して下記の状態にしてください。

```App.jsx

import './App.css'

function App() {
  return <div className='App'></div>
}

export default App
```

それでは順に学んでいきましょう！

### useState

useStateとは、関数コンポーネントのstateを保持したり、更新したりするためのフックになります。
```App.jsx
import { useState } from 'react'
import './App.css'

function App() {
  const [count,setCount] = useState(0) 

  const handleClick = () => {
    setCount(prev => prev + 1)
  }

  return (
  <>
    <h1>useState</h1>
    <button onClick={handleClick}>count is {count}</button>
  </>
  )
}

export default App
```

上記のコードでボタンをクリックしてcountが増えていくページが作成されると思います。
![スクリーンショット 2023-05-11 12.42.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636995/78a30462-cf80-7842-91cd-f62daaec5042.png)

コードについて軽く補足していきます。

```jsx
 const [count,setCount] = useState(0) 
```
こちらは第１引数に現在の値と、第２引数に更新関数を返しています。
countには`useState`の引数が初期値として格納されます。

また、分割代入を使用しているので分割代入という言葉自体分からない方はこちらを参考にしてください！

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment


```jsx
  const handleClick = () => {
    setCount(prev => prev + 1)
  }
```
ボタンをクリックした際に、上記の更新するための関数が走り値が更新されます。

またこの際に、
```jsx
    <button onClick={handleClick}>count is {count}</button>
```
ではなく
```jsx
    <button onClick={handleClick()}>count is {count}</button>
```
と記述してしまうと、レンダリングされた際に`handleClick`が走るので注意してください！

### useEffect

useEffectは、関数コンポーネントで副作用を制御できるフックとなります。

```jsx
import { useEffect, useState } from 'react'
import './App.css'

function App() {
  const [count,setCount] = useState(0)

  const handleClick = () => {
    setCount(prev => prev + 1)
  }

  useEffect(() => {
    console.log('Hello useEffect')
  },[count])

  return (
  <>
    <h1>useState,UseEffect</h1>
    <button onClick={handleClick}>count is {count}</button>
  </>
  )
}
export default App
```

補足していきます。

```jsx
  useEffect(() => {
    console.log('Hello useEffect')
  },[count])
```
第1引数には実行させたい副作用関数を記述して、 第2引数には副作用関数の実行タイミングを制御する依存データを記述します。

今回でいくと、countが第２引数に当たるのでボタンをクリックするたびに
コンソールに`Hello useEffect'が出力されます。

### useContext
useContextは、複数のコンポーネント間で共通して利用したいデータを管理できるフックになります。
これによってバケツリレー式でpropsを渡しているものがグローバルに管理することができ、データの管理がわかりやすくなりました！

データ管理するファイルですが`App.jsx`でも可能ですが、今回は`main.jsx`
に格納していきます。

```main.jsx
import React, { createContext } from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

const comicInfo = {
  title: '呪術廻戦',
  author: '芥見下々',
}

// グローバルに管理したいcontextを生成する
const ComicContext = createContext(comicInfo)

ReactDOM.createRoot(document.getElementById('root')).render(
  // valueに共有したいデータも定義する必要があるので注意
  <ComicContext.Provider value={comicInfo}>
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  </ComicContext.Provider>
)

export default ComicContext
```

それでは実際に使っていきましょう！

```App.jsx
import { useContext, useEffect, useState } from 'react'
import './App.css'
import ComicContext from './main'

function App() {
  const [count,setCount] = useState(0)
  const comicInfo = useContext(ComicContext)

  const handleClick = () => {
    setCount(prev => prev + 1)
  }

  useEffect(() => {
    console.log('Hello useEffect')
  },[count])

  return (
  <>
    <h1>useState,UseEffect</h1>
    <button onClick={handleClick}>count is {count}</button>
    <hr/>
    <h1>useContext</h1>
    <p>{comicInfo.title}</p>
    <p>{comicInfo.author}</p>
  </>
  )
}

export default App
```

```
 const comicInfo = useContext(ComicContext)
```
実際の画面
![スクリーンショット 2023-05-11 15.05.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636995/209c3fc3-a1b2-d280-6c56-985718067feb.png)

今回の場合は`main.jsx`と`App.jsx`しかないのであまり恩恵を感じにくくpropsで渡した方が早いですが、
componentの構造が深くなっていくとややこしくなっていくのでその場合は恩恵を感じられると思います。

どの場面で使われるかというとECサイトやSNSなどでいくと、ログイン情報などの認証情報はどの
コンポーネントでも使用する場合が多いので`useContext`や`Redux`が使用されます。

因みにQiita社内でも`useContext`は多用されてます！

## 最後に
今回紹介した、Hooksが基本かつ頻出する機能になります。
次回は、まだ紹介していない`useReducer` `useCallback` `useMemo` `useRef`
について紹介していこうと思います！

今回の記事が参考になったら幸いです。

## 参考記事
[フック API リファレンス](https://ja.legacy.reactjs.org/docs/hooks-reference.html)
[フック早わかり(React公式)](https://ja.legacy.reactjs.org/docs/hooks-overview.html)
[5分でわかるReact Hooks](https://qiita.com/ushi_osushi/items/98d1bc4a83265a764084)
[【初心者向け】 React Hooks とは?](https://udemy.benesse.co.jp/development/react-hooks.html)