【React】基本のフックについて

## UseState

```ReactApp.js

import { useState } from "react";
//useStateフックをReactからインポートする
import "./App.css";

function App() {
  const [count, setcount] = useState(0);
  //useStateフックを使って状態を管理し、setcount関数を使って状態を更新

  const handleclick = () => {
    setcount(count + 1);
  }

  return (
    <div className="App">
      <h1>UseState</h1>
      <button onClick={handleclick}>+</button>
      <p>{count}</p>
    </div>
    
  );
}
export default App;

```


## UseEffect

```React:App.js

import { useState,useEffect } from "react";
//useEffectフックをReactからインポートする
import "./App.css";

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

  const handleclick = () => {
    setcount(count + 1);
  }

  useEffect(() => {
    console.log("countが更新されました");
  },[count]);
 //useEffectフックを使用して、副作用を処理する
 //第二引数の配列 [count] が変化する度にuseEffectの中の関数が実行される

  return (
    <div className="App">
      <h1>UseState,UseEffect</h1>
      <button onClick={handleclick}>+</button>
      <p>{count}</p>
    </div>
    
  );
}
export default App;

```

## useContext


```React:index.js


import React,{createContext} from 'react';
//ReactとcreateContext、ReactDOMをインポートする
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';


const root = ReactDOM.createRoot(document.getElementById('root'));

const info = {
  name: "Tanaka Taro",
  age: 25,
  from: "Japan",
  sports:"baseball",
};

const InfoContext = createContext(info);

root.render(
  <InfoContext.Provider value={info}>
   <React.StrictMode>
      <App />
    </React.StrictMode>
  </InfoContext.Provider>
);
//InfoContext.Providerを使用して、infoオブジェクトをコンテキストとして提供

export default InfoContext;
//InfoContextをデフォルトエクスポートする

reportWebVitals();

```


```React:App.js

import { useState,useEffect, useContext} from "react";
import "./App.css";
import InfoContext from "./index";



function App() {
  const [count, setcount] = useState(0);
  const info = useContext(InfoContext);
  // コンテキストから情報を取得

  const handleclick = () => {
    setcount(count + 1);
  }

  useEffect(() => {
    console.log("countが更新されました");
  },[count]);

  return (
    <div className="App">
      <h1>UseState,UseEffect</h1>
      <button onClick={handleclick}>+</button>
      <p>{count}</p>

      <hr />
       <h1>useContext</h1>
      <p>{info.name}</p>
      <p>{info.age}</p>
    </div>
    
  );
}
export default App;


```
















## useRef

```React:App.js

import { useState,useEffect, useContext,useRef} from "react";
//useRefフックをReactからインポートする
import "./App.css";
import InfoContext from "./index";



function App() {
  const [count, setcount] = useState(0);
  const info = useContext(InfoContext);
  const ref = useRef();
  // refを使用してDOM要素を参照

  const handleclick = () => {
    setcount(count + 1);
  }

  const handleRef = () => {
    console.log(ref.current.value);
  }
//handleRef関数はボタンがクリックされたときに呼び出され、
//refで参照している入力フィールドの値をコンソールに表示。


  useEffect(() => {
    console.log("countが更新されました");
  },[count]);

  return (
    <div className="App">
      <h1>UseState,UseEffect</h1>
      <button onClick={handleclick}>+</button>
      <p>{count}</p>

      <hr />
       <h1>useContext</h1>
      <p>{info.name}</p>
      <p>{info.age}</p>

      <hr />
      <h1>useRef</h1>
      <input type="text" ref={ref} />
      <button onClick={handleRef}>useRef</button>
    </div>

 
  );
}
export default App;

```