useEffectを使ってAPIからデータを取得しよう
前々回の記事で、useEffectについて学びました。
今回はuseEffectについて軽く復習をしてから
- APIからユーザー情報を取得する
- 取得したユーザー情報を画面に表示する
といった処理を見ていきましょう。
useEffectとは？
まずは、useEffectが何をするものなのかを簡単に復習しましょう。
useEffectは、コンポーネントが表示された後など、決められたタイミングで処理を実行したいときに使います。
例えば、次のように書きます。
useEffect(() => {
console.log("実行されました");
}, []);useEffectの中に、実行したい処理を書きます。
では、なぜわざわざuseEffectを使うのでしょうか？
Reactのコンポーネントでは、基本的に「画面に何を表示するか」を考えます。
一方で、APIにアクセスしたり、タイマーを動かしたりする処理は、画面を表示することとは別の処理です。
こうしたReactの外側と関わる処理を行うときに、useEffectが役立ちます。
例えば、
- API通信
- ブラウザの機能を利用する処理
- タイマー
- イベントの登録や解除
などです。
こうした処理を行うときに、useEffectが役立ちます。
最初は、
API通信など、Reactの外側と関わる処理でuseEffectを使う
くらいに覚えておけば十分です。
useEffectの中でAPI通信を行う
では、実際にAPIからユーザー情報を取得してみましょう。
例えば、次のようなコードです。
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://example.com/api/users")
.then(response => response.json())
.then(data => {
setUsers(data);
});
}, []);少し長くなりました。
ここでは、useStateとuseEffectが一緒に登場しています。
それぞれ何をしているのか見てみましょう。
useStateはデータを保存する
まず、この部分です。
const [users, setUsers] = useState([]);これは、APIから取得したユーザー情報を保存するためのStateです。
最初はユーザー情報がないので、空の配列[]を入れています。
APIからユーザー情報を取得できたら、
setUsers(data);としてStateを更新します。
つまり、useStateは、
取得したデータを保存しておく場所
として利用しています。
useEffectはAPI通信を実行する
次にこちらです。
useEffect(() => {
fetch("https://example.com/api/users")
.then(response => response.json())
.then(data => {
setUsers(data);
});
}, []);ここでは、fetch()を使ってAPIにアクセスしています。
APIからデータが返ってきたら、
setUsers(data);によってStateを更新します。
全体の流れを整理すると、
- コンポーネントが表示される
- useEffectが実行される
- APIにリクエストする
- データを取得する
setUsers()でStateを更新する- Reactが画面を更新する
となります。
この流れは、ReactでAPI通信をするときの基本的な考え方です。
useStateとuseEffectの役割分担
ここまでの内容を整理してみましょう。
| Hook | 主な役割 |
|---|---|
| useState | データを保持する |
| useEffect | API通信などの処理を実行する |
例えば、
const [users, setUsers] = useState([]);では、ユーザーデータを保存します。
そして、
useEffect(() => {
// API通信
}, []);では、APIからデータを取得します。
つまり、useStateは「データを保存する場所」、useEffectは「処理」と考えると、最初は理解しやすいでしょう。
もちろん、useEffectはAPI通信だけに使うものではありません。
ただ、Reactを学び始めた段階では、API通信を例にするとイメージしやすいです。
まとめ
今回は、useEffectを使ったAPI通信について学びました。
APIからデータを取得するときは、useStateとuseEffectを組み合わせることで、次のような流れを作ることができます。
- APIからデータを取得する
- Stateにデータを保存する
- Reactが画面を更新する
それぞれの役割を整理すると、次のようになります。
| Hook | 主な役割 |
|---|---|
| useState | データを保持する |
| useEffect | API通信などの処理を実行する |
まずは、
- useStateはデータを管理する
- useEffectはAPI通信など、Reactの外側と関わる処理に利用する
という基本的な役割を覚えておきましょう。
次回以降も、実際のコードを動かしながら、Reactの仕組みを少しずつ理解していきましょう。
コメント