2021/10/20

新卒デザイナーが学ぶReact 〜React Hooks〜

山之内瑞貴

初めまして！21 卒新卒採用でクラッソーネにジョインした山之内です。

現在、UI デザイナーとしてプロダクト開発部に在籍しています。UI を取り扱うデザイナーなのでちゃんと実装の能力も身につけたいと思い、現在進行形で React の学習に励んでいます。

そんな僕が、React 学習でつまづいた React Hooks を数回に渡って記事化していきたいと思います。今回は初回として React Hooks について解説します。

参考教材

React を学習するにあたって、教科書にしたのが「基礎から学ぶ React/React Hooks」です。
こちら弊社エンジニアの服部麻子さんが著した本になります！

https://www.amazon.co.jp/dp/B09CP8T4TX

React Hooks

React Hooks は React 16.8 で追加された機能になります。

そもそも React にはコンポーネントを宣言する記述方法が２種類あります。

① クラスコンポーネント

class Sample extends React.Component = () => {
 render(){
   return <p>クラスコンポーネント</p>
 }
}

② 関数コンポーネント

const Sample = () => {
 return <p>関数コンポーネント</p>
}

このように、クラスコンポーネントは関数コンポーネントよりもコードの記述量が増加します。また、クラスコンポーネントはthisやbindなどのコードを記述する必要があるので、複雑性も増します。

しかし、以前はクラスコンポーネントが主流でした。というのも、クラスコンポーネントは state というものを取り扱うことができるのですが、従来の関数コンポーネントでは state を取り扱うことができなかったからです。しかし、React Hooks の登場により、React Hooks の一つである useState によって state の管理が関数コンポーネントでも実現可能となりました。

state や useState は次回の記事で紹介していきたいと思いますので、少々お待ちください 🙇‍♂️

Hooks は「〜に接続する、引き寄せる」などの意味を持つ hook in から来ています。つまり React Hooks は関数コンポーネントを React の機能に接続させることによって、クラスコンポーネントでしかできなかったことを関数コンポーネントでもできるようにさせるものになります。

useState 以外にも useEffect や useCallback などがあり、これら一つ一つをフック（hook）と呼び、まとめて React Hooks（hooks）と呼びます。