React 用語一覧と利用ガイド
React をマスターし、コンポーネントベースのアプリケーション開発を効率的に行うための用語解説とガイドを提供します。
React の基本から高度な概念まで理解しましょう。
React フック
React フックは、関数コンポーネントで状態や副作用を扱うための特別な関数です。以下に主要な React フックを説明し、サンプルコードも提供します。
useState
useStateは、関数コンポーネントで状態を管理するための React フックです。状態の保持と更新が可能です。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}useEffect
useEffectは、関数コンポーネント内で副作用を制御する React フックです。副作用は、DOM の変更や非同期処理など、関数外の影響を与える処理を指します。
import React, { useState, useEffect } from 'react';
function DataFetching() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => setData(data));
}, []);
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}useRef
useRefは、関数コンポーネント内で DOM 要素や他の Ref オブジェクトにアクセスするために使用されます。
import React, { useRef, useEffect } from 'react';
function FocusInput() {
const inputRef = useRef(null);
useEffect(() => {
// ページがロードされたときに input 要素にフォーカスを当てる
inputRef.current.focus();
}, []);
return <input ref={inputRef} type="text" />;
}useContext と createContext
useContextとcreateContextを組み合わせて、コンテキストを使用できます。これにより、親から Props 経由でデータを渡す必要がなくなります。
import React, { useContext, createContext } from 'react';
const MyContext = createContext();
function App() {
return (
<MyContext.Provider value="Hello from Context!">
<ChildComponent />
</MyContext.Provider>
);
}
function ChildComponent() {
const value = useContext(MyContext);
return <p>{value}</p>;
}useMemo と useCallback
useMemoは値のメモ化に使用され、useCallbackは再レンダリングを避けたいコンポーネントに関数を渡す際に利用します。
import React, { useState, useMemo, useCallback } from 'react';
function List({ items }) {
const itemCount = useMemo(() => items.length, [items]);
const handleClick = useCallback((item) => {
// ハンドラーロジック
}, []);
return (
<div>
<p>Item Count: {itemCount}</p>
{items.map((item) => (
<button key={item.id} onClick={() => handleClick(item)}>
{item.name}
</button>
))}
</div>
);
}Recoil
Recoil は React アプリケーション内での状態管理を簡略化します。以下に Recoil の主要なフックを説明し、サンプルコードを提供します。
useRecoilState
useRecoilStateは、useState のようにステートを扱います。ステートが更新されると、それを使用するコンポーネントは再レンダリングされます。
import { useRecoilState } from 'recoil';
import { myState } from './recoilAtoms';
function MyComponent() {
const [state, setState] = useRecoilState(myState);
return (
<div>
<p>State: {state}</p>
<button onClick={() => setState(state + 1)}>Increment</button>
</div>
);
}useRecoilValue
useRecoilValueは RecoilValue 型のデータを受け取り、ステートを利用します。ステートが更新されると、それを使用するコンポーネントは再レンダリングされます。
import { useRecoilValue } from 'recoil';
import { myState } from './recoilAtoms';
function MyComponent() {
const state = useRecoilValue(myState);
return <p>State: {state}</p>;
}useSetRecoilState
useSetRecoilStateは RecoilState 型のデータを受け取り、ステートのセッター関数を提供します。ステートが更新しても、使用するコンポーネントは再レンダリングされません。
import { useSetRecoilState } from 'recoil';
import { myState } from './recoilAtoms';
function MyComponent() {
const setState = useSetRecoilState(myState);
return (
<div>
<button onClick={() => setState((prev) => prev + 1)}>Increment</button>
</div>
);
}Redux
Redux は強力なグローバルステート管理ツールですが、Recoil の利用を検討することをお勧めします。以下は Redux の主要な関数とサンプルコードです。
createSlice
createSliceを使用すると、Reducer を生成し、Action Type と Action Creator が自動生成されます。
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: (state) => state + 1,
decrement: (state) => state - 1
}
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;configureStore
configureStoreを使用して、作成した Slice を 1 つのストアに結合できます。
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
const store = configureStore({
reducer: {
counter: counterReducer
}
});useSelector
useSelectorを使用して、ストアに保存されたステートデータから必要なデータを取得します。
import { useSelector } from 'react-redux';
function CounterDisplay() {
const count = useSelector((state) => state.counter);
return <p>Count: {count}</p>;
}useDispatch
useDispatchを使用して、ストアのデータを変更する関数を取得できます。
import { useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';
function CounterButtons() {
const dispatch = useDispatch();
return (
<div>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
}React とそのエコシステムの用語を理解し、これらのフックとツールを活用して効果的なアプリケーションを開発してみて下さい。