はじめに
日々実務で、React/TypeScriptと戦っているのですが、どっちの書き方がいいんだろう?🤔と迷うことがあります。
今回は、Reactには欠かせない親コンポーネントから子コンポーネントにpropsを渡すときに生じた疑問について書きます。
React Navigationを使用して画面遷移する際の具体的なコード例を通じて、Propsの渡し方における選択肢と、それをどのように書き分けるのか、基準を紹介します。綺麗なコードを書くために使える基準だと思います。
同じ初心者エンジニアの方の参考になれば嬉しいです！
自己紹介
私は2023年9月1日にフロントエンドエンジニアとして自社開発のSaaS企業に入社しました。
未経験独学で、薬剤師からの転職です。
詳しくはこちらをご覧ください。
この記事で伝えたいこと
- 関数をPropsとして渡す時は、その関数になるべく引数を渡さない形で揃えると美しくなる
背景
- React Nativeでスマホアプリの開発をしている
- 複数のコンポーネントで共通のコンポーネント（
ModalComponet）を呼ぶことになった。 - propsとして
moveToに次の画面遷移先を示す関数を渡したい。 - それぞれのコンポーネントで渡す画面遷移先が異なる
- propsの中身をどのように書けばいいのか迷ってしまった
疑問点
なにを迷ったのか、疑問点は以下の2つです。
- propsで渡す関数の中身の長さが異なる時、どこまで関数に切り出せばいいのか？
- なんとなく長い、見た目が悪いという感覚で書き分けてしまったが、具体的な基準はあるのか？
以下、私がなんとなく長い、見た目が悪いかなという感覚に基づいて書いたコードです。
パターン1. アロー関数を書く
<ModalComponent
setModalData={setModalData}
moveTo={() => navigation.navigate(pages.userSetting.name)}
/>
propsに直接コールバックを書きました。
少し長い気もしますが、一行なのでいいかなと思いました。
パターン2. 関数を切り出す
const moveToTop = () => {
navigation.reset({
index: 0,
routes: [{ name: pages.top.name }],
});
};
<ModalComponent
modalData={modalData}
moveTo={moveToTop}
/>
propsに渡す関数を切り出しました。
理由はコールバックが複数行に渡るため、propsに書くと行が広がって見えにくいと思ったからです。
パターン3.関数そのものを渡す
<ModalComponent
modalData={modalData}
moveTo={navigation.goBack}
/>
propsに関数を直接渡しました。
navigation.goBackは、React Navigationライブラリのメソッドの1つで、現在の画面を閉じて前の画面に戻るためのメソッドです。
3パターンをなんとなくの感覚で書いてみました。
このままでも良いのですが、書き方が異なるのは気持ちが悪いし、具体的な書き分けの基準が知りたかったので先輩に聞いてみました。
ポイント
この基準に従うと、他のpropsで変数を渡している部分の書き方と揃う(見栄えが良い)というメリットがあります。
実際に上記をリファクタしてみましょう。
リファクタ
パターン2、3は引数を渡していないのでこのままで良さそうです。
パターン1のみ修正します。
+ const moveToUserSetting = () => {
+ navigation.navigate(pages.userSetting.name);
+ };
<ModalComponent
modalData={modalData}
- moveTo={() => navigation.navigate(pages.userSetting.name)}
+ moveTo={moveToUserSetting}
/>
引数を渡しているので、アロー関数を切り出します。
最初よりすっきりしました。
これにより、他のpropsで変数(modalData)を渡す書き方と揃って見栄えが良くなりました。
今回はpropsの数が少ないのであまりメリットを感じませんが、コンポーネントが大きくなり、propsの数が増えると、揃っていないとガタガタして見えるので、基準を持っておくことは大切だと思います。
終わりに
綺麗なコードを書くための1つの基準を教えていただきました。
ただ、あくまで基準の1つなので、他にも状況に応じて判断していく必要があります。
なんとなくで書いていたものに、具体的な基準が見つかると、一気に書きやすくなりますね。
なんとなくで書かずに、基準に基づいて書いていきたいです。