react-nativeでポート8081起因のビルドエラー

エラー内容

ポート8081がすでに他のプロセスで使用されているため、React Nativeの開発サーバーが起動できないエラーが発生。
※動作環境はmacOS

info Welcome to React Native v0.76
info Starting dev server on port 8081...
error listen EADDRINUSE: address already in use :::8081.

対応は、ポートを使用しているプロセスを特定して終了して再起動すれば直ります。
1.以下のコマンドをターミナルで実行して、ポート8081を使用しているプロセスを特定

lsof -i :8081

2.PIDの値（例: 12345）がそのプロセスのIDです。このプロセスを終了

kill -9 12345

なんでポート8081関連のエラー？

React Nativeでは、Metroバンドルサーバーというツールが動作する際にポート8081を使用します。このMetroバンドルサーバーは、React Nativeアプリの開発環境において重要な役割を果たしています。

Metroバンドルサーバーとは？

Metroバンドルサーバーは、以下のような役割があります。

1. コードバンドルの生成:
   アプリが起動するとき、MetroはJavaScriptコードを一つのバンドルにまとめる。
   例えば、index.jsやApp.tsxなどを解析し、依存関係を解決して実行可能な形式にする。
2. リアルタイムリロード:
   開発中にコードを変更すると、Metroは変更を検知して更新内容をアプリに反映する（Hot ReloadingやFast Refresh）。
3. アセットの提供:
   画像やフォントなどの静的リソースをアプリに提供する。

なんでビルド時にポート8081が必要なのか？

1. コードの供給:
   ビルドプロセスでは、Metroサーバーを介して最新のJavaScriptコードがエミュレーターまたは実機に送信される。
2. リアルタイム性:
   開発中のアプリは、Metroサーバーに依存してコードやアセットを取得します。ビルド中もこのプロセスが必要になる。
3. エミュレーターとの接続:
   エミュレーターはMetroサーバーからコードや更新情報を受け取るため、ポート8081が開放されている必要がある。

余談

そういえばターミナルでnpx react-native run-iosと打つと、以下画像のように別ターミナルで開かれますね。これがMetroサーバー起動画面だったこと、このエラーで知りました。。