🔶 useStateのデフォルトの外観の違い

🔹 コード#コード#

(생략)

function createBulkTodo() {
  const array = [];
  for (let i = 0; i <= 2500; i++) {
    array.push({
      id: i,
      text: `할 일 ${i}`,
      checked: false,
    });
  }
}

const App = () => {
  const [todos, setTodos] = useState(createBulkTodo);

	(생략)
};

export default App;

🔹 注意|usStateのデフォルト→関数の挿入

useState(createBulkTodo())の場合
→レンダリング毎に呼び出すcreateBulkTodo関数

useState(createBulkTodo)の場合
==パラメータ:関数形式
→素子を初めてレンダリングしたときのみ実行createBulkTodo関数

🔶 React.利用する

🔹 シンボルツリーのレンダリングを防止するには

使用

部品→shouldComponentUpdate(ライフサイクル)

関数素子→React.memo使用

🔹 React.memo

素子props変化x→xの再レンダリング

使用方法
ラップ構成部品

    (생략)
    
    export default React.memo(컴포넌트명);

🔶 関数の作成を続行しない方法

🔹 防止理由

依存アレイ内部状態が変化するたびに→関数(第1パラメータ)が再生を続ける

🔹 useStateの関数式更新

関数型更新とは?

更新関数をsetStateのパラメータに入れる

更新関数とは?
ステータスの更新方法の定義

⑪関数型更新例

既存コード

    const [number, setNumber] = useState(0);
    const onIncrease = useCallback(
    	() => setNumber( number + 1 ),
    	[number],
    )

適用コード

    const [number, setNumber] = useState(0);
    // prevNumbers === 현재 number 값
    const onIncrease = useCallback(
    	() => setNumber(prevNumber => prevNumbers + 1),
    	[],
    )

リファレンスprevNumber =>追加と配列のみ変更([])

🔹 useReducer

サンプルコード

import React, { useRef, useCallback, useReducer } from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';

function createBulkTodos() {
  const array = [];
  for (let i = 0; i <= 2500; i++) {
    array.push({
      id: i,
      text: `할 일 ${i}`,
      checked: false,
    });
  }
  return array;
}

function todoReducer(todos, action) {
  switch (action.type) {
    case 'INSERT': // 추가
      // { type: 'INSERT', todo: { id: 2501, text: '할일 2501', checked: false } }
      return todos.concat(action.todo);
    case 'REMOVE': // 삭제
      // { type: 'REMOVE', id: 1 }
      return todos.filter((todo) => todo.id !== action.id);
    case 'TOGGLE': // 토글
      // { type: 'TOGGLE', id: 1 }
      return todos.map((todo) =>
        todo.id === action.id ? { ...todo, checked: !todo.checked } : todo,
      );
    default:
      return todos;
  }
}

const App = () => {
  const [todos, dispatch] = useReducer(todoReducer, undefined, createBulkTodos);

  // 고유 값으로 사용 될 id
  // ref 를 사용하여 변수 담기
  const nextId = useRef(2501);

  const onInsert = useCallback((text) => {
    const todo = {
      id: nextId.current,
      text,
      checked: false,
    };
    dispatch({ type: 'INSERT', todo });
    nextId.current += 1; // nextId 1 씩 더하기
  }, []);

  const onRemove = useCallback((id) => {
    dispatch({ type: 'REMOVE', id });
  }, []);

  const onToggle = useCallback((id) => {
    dispatch({ type: 'TOGGLE', id });
  }, []);

  return (
    <TodoTemplate>
      <TodoInsert onInsert={onInsert} />
      <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
    </TodoTemplate>
  );
};

export default App;

⑪パラメータの変化

既存useReducer2番目のパラメータ=初期状態

2番目のパラメータ=undefined

3番目のパラメータ=初期状態作成関数(createBulkTodos)

⑪効果

構成部品の最初のレンダリング時にのみ関数を呼び出す

メリットとデメリット

短所
既存のコードを多く修正する必要があります

長所
ステータス更新ロジック→構成部品の外に置くことができます.

🔹 2つの方法のパフォーマンスの違い:類似

→好みで選ぶ

🔶 相関構成部品の最適化

関連部品→最適化

例
リスト関連構成部品を最適化する場合
→(リスト内+リスト自体)すべてのコンポーネントを最適化する必要があります.

n/a.理由

事前に最適化(将来不要なレンダリングが発生しないように)

不要なレンダリングxがすぐに発生しても
他のコンポーネントが変化し、不要なレンダリングが発生する可能性があります.
→事前比較/パフォーマンス最適化(react.memoを使用)