【React】{} と {{}} の違いってなに ( ﾟдﾟ)？

背景

reactを勉強し始めて、たまに見る{{}} ってなに？
{} ではいかんのか？

たとえば、contextで providerのvalueをセットする時とか...

  const [tasks, setTasks] = useState([]);
  return (
    <AppContext.Provider
      value={{
        tasks,
        setTasks
      }}
    >
      {children}
    </AppContext.Provider>
  );

インラインスタイルを適用する時とか

const App = () => (
  <div style={{color: 'blue'}}>
    Hello World
  </div>
);

これは一体...{} とはどう違うのか???
と疑問に思ったことがあったので、学習のために残そうと思いました。

違い

外側の{}はJavaScript として解釈させる特別な構文
内側の{}内は単なるJavascriptオブジェクト

インラインスタイル

<div style={{color: 'blue', backgroundColor: 'lightgray'}}>

外側の{}はstyleプロパティにJavaScriptオブジェクトを渡すことを解釈させているので...

// 「JavaScriptオブジェクトが来るぞ...!」　と解釈させている
<div style={...}>

のようなイメージ

一方で、内側の{}はJavaScriptオブジェクトになる

{ color: 'blue', backgroundColor: 'lightgray' }

合わせて使うと以下のようになる。

<div style={{ color: 'blue', backgroundColor: 'lightgray' }}>

この構造により、ReactコンポーネントのJSX内で
インラインスタイルを直接設定できる。
そして、これは以下のように書き直すのと同じになる。

  const divStyle = {
    color: 'blue',
    backgroundColor: 'lightgray'
  };

  return (
    <div style={divStyle}>
      Hello World
    </div>
  );

こう書かれると特に疑問を持たないのですが、
急に{{}} とかされるとパニックになりました... 　~_~;
冷静に考えると、「そらそうか...」という感じですね。

provider での記法

  const [tasks, setTasks] = useState([]);
  return (
    <AppContext.Provider
      value={{
        tasks,
        setTasks
      }}
    >
      {children}
    </AppContext.Provider>
  );

これも上記と同じように、オブジェクトリテラルなので、{{}} が必要です。
が、「{task, setTask}ってオブジェクトじゃなくね ?」 て思いません？
だって キーとバリューがないし...

（僕は最初思いました...(Ｔ＿Ｔ)

どうやらJavaScriptのショートハンド（短縮記法）の一種であり、
以下のように書くのと同じになるのです。

<AppContext.Provider
  value={{
    tasks: tasks,
    setTasks: setTasks
  }}
>

ここまで来るとインライン記法と同じですね。
{{}} を使って、渡す値をオブジェクトとして一括で定義している ということです。

まとめ

ここまで見ていただきありがとうございました。 (＞人＜;)
冷静に考えると「そらそうか...」となる内容でした。

けど喉につっかえた小骨が取れた感覚で満足　😃

参考

「可読性を上げる」ために敢えてショートハンドを使う