React コンポーネントのreturn {} か()で何が違うのか

Photo by Chris Ried on Unsplash

コンポーネントを作成する際、アロー関数を使ったreturnの書き方で{}か()を使用しているものがあって混乱していたのですが、なんとなく分かりました。

まず、Reactのコンポーネントを書くときこんな感じで書くと思うのですが

const Component = () => {
  return <h1>Hello,World</h1>
}

このとき、アロー関数の{}の部分は()でも書くことができます。

const Component = () => (
  <h1>Hello,World</h1>
)

何が変わるのかというと、結論から言えば()にすることによってreturnを省略することができます。

注意点としては、{}の場合は中で変数定義したりなどできるのですが、()の場合はreturnと書かれた状態で始まるため変数定義などができません。

なので、{}だと

const Component = () => {
  const text = 'Hello,World';
  return <h1>{text}</h1>
}

こんな感じでreturnまでは普通の関数の処理と変わらないので好きに定義が可能です。

一方()で書くと上のような書き方はできないので、returnで返す戻り値のみを書くことができます。

どちらもコンポーネントを作るという点では変わりないので、コンポーネントに何かさせるなら{}、テキストやボタンだけ表示するだけのコンポーネントなら()みたいな感じで使っていくのだと思います。

ただ、なぜこのような挙動になるのかはイマイチ分かりません…

色々調べてみたのですが、思うようなものが見つかりませんでした。

アロー関数

この説明の高度な構文の部分で、

// object リテラル式を返す場合は、本体を丸括弧 () で囲みます:
params => ({foo: bar})

と書かれていますが、オブジェクトで返しているわけでもないのでなんでなんだろう？

もしかしたらreactの書き方で認識されているのかな??

JSのアロー関数のreturnの書き方いろいろ - Qiita

この記事では戻り値が同じなら省略はできると書かれているみたいです、なぜそうなるのかがやはりわからない….

終わりに

個人的に、returnをしたときに複数行を返す場合は、

return (
<div>
  <h1>hello</h1>
</div>
)

こんな感じで()で括るので、ここの()の部分ということを表しているためにreturnが省略でき、変数定義などができないのかなと考えています。（推測）

まぁできるのでそこまで深く考えるのはやめます⭐（勉強します）