Gumi-nikky

勉強したことのメモ書きと日記。

Reactの勉強1

React Hooks

useEffect

useEffect(() => {
  /* 第1引数には実行させたい副作用関数を記述*/
  console.log('副作用関数が実行されました！')
},[依存する変数の配列]) // 第2引数には副作用関数の実行タイミングを制御する依存データを記述

Reactのレンダリングまで関数の処理を遅らせる。

useRef

const refObject = useRef(initialValue)

//例
const number = useRef(100);
console.log(number.current); // 100

useRefで生成したオブジェクトは親classがアンロードされるまで同一オブジェクトを扱う。

useState

//const [状態変数, 状態を変更するための関数] = useState(状態の初期値);
const [count, setCount] = useState(initialState)

// ちなみにクラスコンポーネントでは、、、
this.state = {
  count: initialState
}

initialstateが初期値で、初回レンダー時にstateが代入される。setstate関数を格納し、stateを更新する。

i18next

useTranslation

import React from 'react';
import { useTranslation } from 'react-i18next';
 
export const TestComponent = () => {
  const { t } = useTranslation();
  return <div>{t('test.message')}</div>;
}

内にreact-i18next経由で取得した文字列(翻訳された文字列)を表示する。メッセージキーをtに渡すことで、jsonファイルに定義されたメッセージが返却される。