改めてReactに再入門した

はじめに

今年から実務で初めてReactを触り始めたマークアップエンジニアです。
以前小さなアプリケーションを作ったものの、それ以来実務でReactを触ることはなく、いざ実務で触ることになってからは浅い知識で実務をこなしていたので今回改めて再入門することにしました。

再入門の教材

Udemyの「【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript」が社内でも観ている方が居ましたし、何よりも評価が高かったのでこの教材を購入しました。

改めて得た知識

childrenはJSXタグの中に格納できる

Container.js

export const Container = ({children}) => {
    return (
        <div>{children}</div>
    )
}

Text.js

export const Text = ({text}) => {
    return (
        <p>{text}</p>
    )
}

App.js

import { Container } from './Container'
import { Text } from './Text'

const App =()=> {
    return(
        <>
            <Container children={<Text text="子要素です" />} />
        </>
    )
}

上記の様な書き方は現場でほぼ見ないけど、こういう書き方もできるという事を知りました。

React Hookは関数内（もしくはカスタムフック内）のトップレベルでしか呼ぶことができない

index.js

import { useState } from 'react'

const [count, setCount] = useState() //関数コンポーネントの外なのでNG

const Example =()=> {
    if(){
        const [count, setCount] = useState() //関数コンポーネント内のトップレベルではないのでNG
    }
    const [count, setCount] = useState()　// この位置だとOK
}

オブジェクト型のステートを扱う時はオブジェクトで渡す必要がある

Example.js

import {useState} from "react"

export const Example = () => {
  const personObj = {name: "Tom", age: 18}
  const [person, setPerson] = useState(personObj)

  const cangeName = (e) => {
    setPerson({name: e.target.value, age: person.age})
    // personObjの名前を変更
  }

  const cangeAge = (e) => {
    setPerson({name: person.name, age: e.target.value})
    // personObjの年齢を変更
  }

  return (
    <>
      <h3>Name: {person.name}</h3>
      <h3>Age: {person.age}</h3>
      <input type="text" value={person.name} onChange={cangeName} />
      <br />
      <input type="number" value={person.age} onChange={cangeAge} />
    </>
  )
}

useStateの初期値として personObj が保持・管理されているので、「名前だけ」変更するとしてもオブジェクト自体を渡してあげる必要があるとのことです。

さらにオブジェクト型のステートを扱う時はスプレッド演算子を使用する

Example.js

import {useState} from "react"

export const Example = () => {
  const personObj = {name: "Tom", age: 18}
  const [person, setPerson] = useState(personObj)

  const cangeName = (e) => {
    setPerson({...person, name: e.target.value})
  }

  const cangeAge = (e) => {
    setPerson({...person,  age: e.target.value})
  }

// ステートの変更する値以外はスプレッド演算子を使用

  return (
    <>
      <h3>Name: {person.name}</h3>
      <h3>Age: {person.age}</h3>
      <input type="text" value={person.name} onChange={cangeName} />
      <br />
      <input type="number" value={person.age} onChange={cangeAge} />
    </>
  )
}

上記のコードは personObj をスプレッド演算子でクローンし、新たに値を変更した形になります。
ここで分かったことは、personObj　の中身を「直接変更した」のではなく「コピーして変更した」ということです。
スプレッド演算子に関しては、この記事が分かりやすかったです。

以上は動画前半の１〜５セクションあたりでした。
実装の時の注意点や、「何故そうなるのか」という事を詳しく説明されているので雰囲気でしか理解してない私にとっては基礎を固めるにはとても良い教材になっています。

引き続き頑張っていきます。