【ReactHooks】useContextの使いどころ

Copy
import React, { createContext } from "react";

export const TestContext = createContext();

Copy
import "./styles.css";
import React, { createContext } from "react";
import Sample1 from "./sampleComponent1";
import Sample2 from "./sampleComponent2";

// Context作成
export const TestContext = createContext();

export default function App() {
  // providerに渡す値を定義
  const val = {
    id: 1,
    name: "ishidaaaaa"
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {/* providerに設定 */}
      <TestContext.Provider value={val}>
        <Sample1 />
        <Sample2 />
      </TestContext.Provider>
    </div>
  );
}

Copy
/** @jsxImportSource @emotion/react */
import { useContext } from "react";
import { TestContext } from "./App";
import { css } from "@emotion/react";

const Sample1 = () => {
  // Contextからデータ取得
  const { id, name } = useContext(TestContext);

  return (
    <div css={[container]}>
      <div css={item}>{`id:${id}`}</div>
      <div css={item}>{`name: ${name} `}</div>
    </div>
  );
};

export default Sample1;

const container = ()=>[
  css`
    display:flex;
    justify-content:center;
    margin:40px;
  `
]

const item = ()=>[
  css`
    flex:1;
    border:1px solid black;
  `
]

Copy
import { createContext, useState, useContext } from "react";

// Context作成
const SampleContext = createContext();

// Contextを取得する関数を作成する
const useSampleContext = () => useContext(SampleContext);

// 引数の要素をproviderでラップするコンポーネント
const SampleProvider = ({ children }) => {
  // state
  const [count, setCount] = useState(1);

  // stateを加算
  const add = () => {
    setCount((prevCount) => prevCount + 1);
  };

  // stateを減算
  const substract = () => {
    setCount((prevCount) => (prevCount !== 0 ? prevCount - 1 : prevCount));
  };

  // Contextに設定するオブジェクトに値を設定
  const contextValue = {
    count,
    setCount,
    add,
    substract
  };

  return (
    // 作成したContextのproviderでラップする
    <SampleContext.Provider value={contextValue}>
      {children}
    </SampleContext.Provider>
  );
};

// 関数とコンポーネントをexportしておく
export { useSampleContext, SampleProvider };

Copy
import "./styles.css";
import { SampleProvider } from "./contextComponent";
import { SampleA } from "./componentA";
import { SampleB } from "./componentB";

export default function App() {
  return (
    <div className="App">
      <h1>useContext sample</h1>
      <SampleProvider>
        <SampleA />
        <SampleB />
      </SampleProvider>
    </div>
  );
}

Copy
import { useSampleContext } from "./contextComponent";

export const SampleA = () => {
  // contextより値を取得
  const { count, add, substract } = useSampleContext();
  return (
    <>
      <h2>componetA</h2>
      <h2>{count}</h2>
      <button onClick={add}>加算</button>
      <button onClick={substract}>減算</button>
    </>
  );
};

Copy
import { useSampleContext } from "./contextComponent";

export const SampleB = () => {
  //contexより値を取得
  const { count, add, substract, setCount } = useSampleContext();
  return (
    <>
      <h2>componetB</h2>
      <h2>{count}</h2>
      <button onClick={add}>加算</button>
      <button onClick={substract}>減算</button>
      <button onClick={() => setCount((prev) => prev * 2)}>倍</button>
    </>
  );
};